javascript - flot - 轴标签 - monthNames 排序错误？

Question

在 Flot 中，当数据跨越年末时，xaxis.monthNames 的行为有什么奇怪的地方吗？

我有 12 个月的数据，从 2012 年 6 月开始，我准备了一个包含 12 个字符串的数组来反射(reflect)月份。

呈现图形时，数据正确显示，但日期标签不正确 - 它们可能按日期顺序排列，而不是它们在数组中的顺序(或者这可能是巧合)。

值和标签图如下所示:

结果图如下所示:

最后...使用该数据的 js* 如下所示:

var data1 = [
    {label: "Incidents", data: arrFakeData, points: {symbol: "circle", fillColor: "#058DC7"}, color: '#058DC7'},
];

p = $.plot($("#placeholder"), data1, {
    xaxis: {
        min: (new Date(2012, 6, 1)).getTime(),
        max: (new Date(2013, 5, 1)).getTime(),
        mode: "time",
        tickSize: [1, "month"],
        monthNames: arrMonthLabels,
        tickLength: 0,
        axisLabel: 'Month',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    yaxis: {
        axisLabel: 'Number of Incidents',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    series: {
        lines: {show: true},
        points: {
            radius: 3,
            show: true,
            fill: true
        },
    },
    grid: {
        hoverable: true,
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "right"
    }
});

当日期跨越一个日历年时，我还应该做些什么来正确排序 x 轴标签？

---

• js 是从有用的博客文章中借用并稍微改编的:http://www.pikemere.co.uk/blog/flot-how-to-create-line-graphs

Answer 1

monthNames 数组不应该在大小或顺序上与您的数据对应；它应该包含从 1 月到 12 月排序的 12 个月份名称。然后，时间插件会为特定日期选择正确的日期。

您的绘图不正确，因为 1341057600000(实际上是 7 月，而不是 6 月)导致它选择 monthNames 数组中的第 7 个项目，在您提供的数组中是“Jan”而不是“Jul”。

您只需要重新排序您的 monthNames 从一月到十二月。