Flot Categories插件订购不正确

时间:2015-09-21 06:48:36

标签: javascript jquery flot

提前感谢您的时间。

我有一个Flot Chart的代码

 <script src="js/plugins/flot/jquery.flot.js"></script> 
 <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script> 
 <script src="js/plugins/flot/jquery.flot.spline.js"></script> 
 <script src="js/plugins/flot/jquery.flot.resize.js"></script> 
 <script src="js/plugins/flot/jquery.flot.categories.js"></script> 

 <script type="text/javascript">

$(document).ready(function(){                  

  $(function() {

var data = [{
    "label": "Commission",
    "color": "#1ab394",
    "data": [["Oct", ],["Nov", ],["Dec", ],["Jan", ],["Feb", ],["Mar", ],["Apr", ],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]
}, {
    "label": "EPL",
    "color": "#1C84C6",
     "data": [["Oct", 0],["Nov", 0],["Dec", 0],["Jan", 0],["Feb", 0],["Mar", 0],["Apr", 0],["May", 1.75],["Jun", 0.00],["Jul", 0.17],["Aug", 0.39],["Sep", 0.35]]
}];

var options = {
               series: {
                    lines: {
                            show: false,
                            fill: true
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4
                        },
                        points: {
                            radius: 0,
                            show: true
                        },
                        shadowSize: 2
                },
                grid: {
                    borderColor: '#eee',
                    borderWidth: 1,
                    hoverable: true,
                    backgroundColor: '#fff'
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return x + ' : ' + y; }
                },
                xaxis: {
                    tickColor: '#eee',
                    mode: 'categories'
                },
                yaxis: {
                    tickColor: '#eee'
                },
                shadowSize: 0
            };

    var chart = $('.dashchart');
    if(chart.length)
       $.plot(chart, data, options);

  });

 })(window, document, window.jQuery);
  </script>

文档说明......

默认情况下,标签按数据系列中的符号进行排序。 如果您需要不同的订购,您可以指定&#34;类别&#34;在...上 轴选项并列出其中的类别:

https://code.google.com/p/flot/source/browse/trunk/jquery.flot.categories.js?r=341

然而,x轴排序与数据系列不同,如下面的屏幕截图所示

知道为什么会这样。

Flot chart with wrong x-axis order

1 个答案:

答案 0 :(得分:0)

我想出来了。希望有一天能帮助某人

似乎Flot不喜欢数据系列中的空值

 "data": [["Oct", ],["Nov", ],["Dec", ],["Jan", ],["Feb", ],["Mar", ],["Apr", ],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]

更改为此并且工作正常

 "data": [["Oct", 0],["Nov", 0],["Dec", 0],["Jan", 0],["Feb", 0],["Mar", ]0,["Apr", 0],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]