如何停止Flot Charts重新排序我的数据?

时间:2015-08-22 22:36:26

标签: javascript flot

我正在使用折线图。我提供以下数据:

 var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
 var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];

在上面,每组的第一个数字是一年中的一周,我试图显示最近4个月的数据。

但是,绘制图表时,Flot图表会按照第一个值(从最低到最高)对数据进行重新排序,从而产生各种问题。这个系列中没有4列,而现在有52列,这些线条完全不合适。

我在文档中没有看到任何可能发生这种情况的内容,也没有看到任何可以阻止它的内容。但是,为了使数据有意义,不得重新排序数据。

是否有一个我不知道的设置可以阻止这种行为?

修改:添加地图代码

var plot = $.plot('#scheduled-actual-flot-line', [
    {
        label: 'Scheduled Hours',
        data: scheduled,
        lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
        points: { show: true, radius: 4 }
    },
    {
        label: 'Actual Hours',
        data: actual,
        lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
        points: { show: true, radius: 4 }
    }],
    {
        series: {
            lines: { show: true },
            points: { show: true },
            shadowSize: 0   // Drawing is faster without shadows
        },
        colors: ['#afd2f0', '#177bbb'],
        legend: {
            show: true,
            position: 'nw',
            margin: [15, 0]
        },
        grid: {
            borderWidth: 0,
            hoverable: true,
            clickable: true
        },
        yaxis: { ticks: 4, tickColor: '#eeeeee' },
        xaxis: { ticks: 12, tickColor: '#ffffff' }
    }
);

2 个答案:

答案 0 :(得分:0)

Flotr示例使用for循环创建随机数据,因此第一个索引将始终是顺序的。

[[51,1700],[52, 1750],[1,1600],[2,1675]];

您的数组显示flotr必须在数组上进行排序,然后将数据集绘制为线条,条形图或其他任何内容。

我只能建议你创建一个月份的时间戳,并且有时间设置你可以在flotr设置中根据需要格式化日期。

另一种方法是用顺序索引替换您的异常数据(月):

var arr = [[51,1700],[52, 1750],[1,1600],[2,1675]];
for(var i=0; i<arr.length; i++) arr[1][0] = i;

答案 1 :(得分:0)

Flot正在为折线图(或任何类型的x-y图)做它应该做的事情。它显示了左侧数据集的最后两个点,因为1和2确实小于 51和52.我猜你正在尝试显示跨越一年边界的数据。您需要在第二年的前两周以后而不是第一年的前两周。您可以使用实际日期而不是周数,在这种情况下,Flot会处理它。这也可以让您更灵活地标记x轴。但作为一个快速解决方案,只需在第二年的数据中添加52,例如:

var scheduled = [[51,1700],[52, 1750],[53,1600],[54,1675]];
var actual = [[51,1320],[52, 1550],[53,1575],[54,1600]];