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的代码;这个问题是它根据时间戳对所有系列进行排序。我不希望这样我希望他们只能根据他们的“小时”参数来适应。

任何人都知道，如果没有对数据系列进行排序，x轴上只有一小时可以使用flotchart吗？

 $("#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 - 以小时为单位显示分布，而不考虑时间戳

1 个答案: