Javascript 如何阻止Flot图表重新排序我的数据?

Javascript 如何阻止Flot图表重新排序我的数据?,javascript,flot,Javascript,Flot,我用的是折线图。我提供以下数据: var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]]; var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]]; 在上面,每组的第一个数字是一年中的一周,我试图显示最后4个月的数据 但是,当绘制图表时,Flot charts会按照第一个值(从低到高)对数据重新排序,这会产生各种问题。该系列中没有4列,现在有52列,行也很不正常 我在文档中没有看到

我用的是折线图。我提供以下数据:

 var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
 var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];
在上面,每组的第一个数字是一年中的一周,我试图显示最后4个月的数据

但是,当绘制图表时,Flot charts会按照第一个值(从低到高)对数据重新排序,这会产生各种问题。该系列中没有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' }
    }
);

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;
var-arr=[[511700]、[521750]、[11600]、[21675];

for(var i=0;iFlot正是它应该为折线图(或任何类型的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]];

Flot将x值作为数字,并相应地显示/排序。如果您不想这样做,可以使用类别模式(在数据中查看此项和此项)

PS:12个刻度不可能与您的数据一起使用,因为只定义了4个数据点


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

创建一个演示。很难看到
51
52
如何转换为
month
。默认情况下,刻度将根据这些值进行调整,而不是月份,而是周。我将编辑我的问题。我认为假设x轴使用了某些东西ng应该排序是一个坏主意。Flot强制使用数字,但大多数其他图表工具不这么做。在第二年的数据中添加52似乎不是一个好主意……一年中的第54周意味着什么?我更希望工具只相信我能够按照我想要的顺序提供数据。谢谢。4个数据是缩写我想保持问题的可读性,但我刚刚复制了12个刻度,忘记了调整。我以前从未见过这个类别示例,虽然它完美地解决了我的问题。非常感谢你的回答。如果可以的话,我会对它投更多的票。给那些不知道的人一个提示,你需要jquery.flot.categories.min.js库
 xaxis: {
     //ticks: 12,
     tickColor: '#ffffff',
     mode: 'categories'
 }