the tips of the bar chart in wijmo 3

1. Hide the label on each bar
 var _chartLabels = $("#wijbarchartPro").wijbarchart().data().fields.chartElements.chartLabels; $.each(_chartLabels, function (index, elem) {
   if((index%2)==1){elem.attr('text', '');}
 });


 2. rotation label on bar


chartLabelStyle: {rotation: 90},

3. 
You can get the path element of the axis using the following properties :

xaxis  = $(“#wijbarchart”).wijbarchart().data().wijbarchart.axisEles[0].attrs.path[0];
yaxis = $(“#wijbarchart”).wijbarchart().data().wijbarchart.axisEles[0].attrs.path[1];

4.
The chartLabels[index].attrs.x and chartLabels[index].attrs.y return the positiong of the label.
For instance, to get the position of first label upi may use the following js :
var x = $(“#wijbarchart”).wijbarchart().data().fields.chartElements.chartLabels[0].attrs.x;
var y = $(“#wijbarchart”).wijbarchart().data().fields.chartElements.chartLabels[0].attrs.y;

5.Change Bar Color


mouseOut: function (e, data) {
         //data.bar.attr({ fill:'#799foa',stroke:'#9062bd'});

        for(var i=0;i < data.bar.length ; i++){
            bars[i].attr({ fill:'#799foa',stroke:'#9062bd'});
        }

 },    



6.Change Bar Color Script
Copy Code from http://wijmo.com/docs/wijmo/ChangeBarColorByValue.html

<script type="text/javascript">
    var fill = "";
    $(document).ready(function () {
        $("#chart").wijbarchart({
            header: {text: "Big Ten Championships"},
            horizontal: false,
            seriesList: [{
                label: "Big Ten Championships",
                legendEntry: false,
                data: {
                    x: ['Illinois', 'Indiana', 'Iowa', 'Michigan', 'Michigan State',
                        'Minnesota', 'Nebraska', 'Northwestern', 'Ohio State',
                        'Penn State', 'Purdue', 'Wisconsin'],
                    y: [230, 167, 105, 351, 84, 178, 3, 69, 185, 57, 69, 183]
                }
            }],
            mouseOut: function (e, data) {
                var y = data.y,
                bar = data.bar;
                if (y < 100) {
                    bar.attr({ fill: "red", stroke: "none" });
                }
                if (y > 100 && y < 200) {
                    bar.attr({ fill: "yellow", stroke: "none" });
                }
                if (y > 200) {
                    bar.attr({ fill: "green", stroke: "none" });
                }
            }
        });
    var bars = $("#chart").data("fields").chartElements.bars;
    $.each(bars, function (i, bar) {
        var node = bar.node,
        data = $(node).data("wijchartDataObj"),
        y = data.y;
        if (y < 100) {
            bar.attr({ fill: "red", stroke: "none" });
        }
        if (y > 100 && y < 200) {
            bar.attr({ fill: "yellow", stroke: "none" });
        }
        if (y > 200) {
            bar.attr({ fill: "green", stroke: "none" });
        }
    })
});
</script>

评论

发表评论

此博客中的热门博文

XML, XSL, HTML

The code in this section is that an XSLT transform is used to translate XML input data to HTML output. Ref: https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html Note - The article1a.xsl , which is from in XSLT examples . The following code is for joy.  import java.awt.Desktop; import java.io.*; import java.net.URISyntaxException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerConfigurationException; import javax.xml.transform.TransformerException; import javax.xml.transform.TransformerFactory; import javax.xml.transform.dom.DOMSource; import javax.xml.transform.stream.StreamResult; import javax.xml.transform.stream.StreamSource; // For write operation import org.w3c.dom.Document; import org.w3c.dom.Element; import org.xml.sax.SAXException; public class Stylizer { ...
阅读全文

Input in element.eleme.io

Input Input data using mouse or keyboard. Input is a controlled component, it always shows Vue binding value . Under normal circumstances, input event should be handled. Its handler should update component's binding value (or use v-model ). Otherwise, input box's value will not change. Do not support v-model modifiers. ¶ Basic usage < el-input placeholder = "Please input" v-model = "input" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > Hide ¶ Disabled Disable the Input with the disabled attribute. < el-input placeholder = "Please input" v-model = "input" :disabled = "true" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > ¶ Clearable Make the Input clearable with the...
阅读全文

Data URI是由RFC 2397 ACE

https://www.rfc-editor.org/rfc/rfc2397 http://codingpy.com/article/how-to-turn-your-browser-into-code-editor/ https://ace.c9.io/build/kitchen-sink.html https://c9.io/ https://angular-ui.github.io/ The "data" URL scheme Status of this Memo This document specifies an Internet standards track protocol for the Internet community, and requests discussion and suggestions for improvements. Please refer to the current edition of the "Internet Official Protocol Standards" (STD 1) for the standardization state and status of this protocol. Distribution of this memo is unlimited. Copyright Notice Copyright (C) The Internet Society (1998). All Rights Reserved. 1 . Abstract A new URL scheme, "data", is defined. It allows inclusion of small data items as "immediate" data, as if it had been included externally. 2 . Description Some applications that use URLs also have a need to embed (small...
阅读全文