根据不同的属性绘制JS折线图

时间:2015-01-14 11:45:55

标签: javascript arrays flot

我有一个像这样的数组:

[&#34;第1周,2014年&#34;,3,{full_date:&#34; Sun Apr 06 2014 00:00:00 GMT + 0100(GMT日光时间)&#34;}] < / p>

enter image description here

我遇到的问题是日期没有正确排序,我有五个不同的折线图,每个都有不同的日期出现在它们上面。但是折线图将它们加在一起而不是插入它们之间,所以如果我的第一个数组有第1周,第3周和第4周,而我的第二个数组有第1周,第2周和第4周,它就会像

第1周,第3周,第4周,第2周并没有订购它们。我的解决方案是创建一个填充数组,其中包含来自所有数组的所有选项,所以是一条不可见的行,但每个日期都有,但我想知道是否有一个选项可以让它自己完成或者如果可能的话通过不同的方式排序财产,例如full_date。

var options = {
    series: {
        lines: {
            show: true
        },
        points: {
            radius: 3,
            fill: true,
            show: true
        }
    },
    xaxis: {

        tickLength: 0,
        mode: "categories",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'open sans',
        axisLabelPadding: 10
    },
    yaxes: [{
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'open sans',
        axisLabelPadding: 3,

    }, {
        position: "right",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'open sans',
        axisLabelPadding: 3
    }
    ], legend: {
        noColumns: 1,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 2,
        borderColor: "#633200",
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
    },
    colors: ["#FF0000", "#0022FF"]
};

1 个答案:

答案 0 :(得分:1)

不,flot本身没有更简单的选项。

使用所有周创建填充数组或使用缺失周的空值扩展现有数组是最佳选择。根据您的服务器端代码,一个或另一个可能更容易。