FlotChart - 无论时间戳如何，按小时显示分布

Question

我想要一个 flotchart 来描述所有数据的分布（x 轴表示从 0 到 10 的值，y 轴表示仅从早上 7 点到晚上 7 点开始的小时).

我想不出在这方面我应该如何设置 flotchart 的配置。

这是我的数据集的 json 示例：

[1409558400000, 7.45],[1409562000000, 5.71], [1409565600000, 7.50], [1409569200000, 7.63], [1409576400000, 3.14],

[1409644800000, 7.45],[1409648400000, 5.71], [1409652000000, 7.50], [1409655600000, 7.63], [1409662800000, 3.14],

[1409731200000, 7.45],[1409734800000, 5.71], [1409738400000, 7.50], [1409742000000, 7.63], [1409749200000, 3.14]]
;

这是flotchart的代码；这个问题是它根据时间戳对所有系列进行排序。我不想那样。
我希望他们仅根据 "hour" 参数来适应。

有人知道 flotchart 是否可以只在 x 轴上显示小时而不对数据系列进行排序吗？

 $("#a-dag").click(function() {
 console.log("a dag filtering will be applied...");

  $.plot("#placeholder", [d], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    markings: [{
                        yaxis: {
                            from: 0,
                            to: 4
                        },
                        color: "#F2CDEA"
                    }, {
                        yaxis: {
                            from: 4,
                            to: 7
                        },
                        color: "#D7EEE1"
                    }, {
                        yaxis: {
                            from: 7,
                            to: 12
                        },
                        color: "#F2CDEA"
                    }]
                },
                xaxis: {
                    mode: "time",                       
                    twelveHourClock: true,                  
                },
                yaxis: {
                    min: 0,
                    max: 12
                }
            });


  });

Answer 1

只需将您的时间戳转换为小时，例如：

$.each(d, function (index, datapoint) {
    datapoint[0] = (new Date(datapoint[0])).getHours();
});

（如果您希望 AM / PM 的值相应更改。）
当然，请从您的选项中删除 mode: "time"。

请参阅此 fiddle 以了解更改后的代码。

FlotChart - 无论时间戳如何，按小时显示分布

FlotChart - Showing the distribution on hourly basis regardless of timestamp

charts

flot

distribution

graphic

hour