如何阻止 Flot Charts 重新排序我的数据？

Question

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

 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' }
    }
);

Answer 1

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;

Answer 2

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]];

Answer 3

Flot 将 x 值作为数字并相应地显示/排序它们。如果你不想这样，你可以使用 category 模式（请参阅 example and this fiddle 和你的数据）。

 xaxis: {
     //ticks: 12,
     tickColor: '#ffffff',
     mode: 'categories'
 }

PS: 您的数据不可能有 12 个刻度，因为只定义了 4 个数据点。

文档中描述了 here 默认情况下 flot 将所有数据读取为数字。

如何阻止 Flot Charts 重新排序我的数据？

How to stop Flot Charts from re-ordering my data?

javascript

flot