javascript - 流程图 x 轴显示时间

Question

我正在尝试使用流程图在 xaxis 上显示时间

这是我的数据数组(时间、值)

var time = [["13:33","0.04668"],["13:23","0.04856"],["13:12","0.05997"],["13:01","0.04679"]];

这是流程图设置

 $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
            time
        ],
        {
            series: {
                lines: {
                    show: false,
                    fill: true
                },
                splines: {
                    show: true,
                    tension: 0.4,
                    lineWidth: 1,
                    fill: 0.4
                },
                points: {
                    radius: 0,
                    show: true
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#d5d5d5",
                borderWidth: 1,
                color: '#d5d5d5'
            },
            colors: ["#1ab394", "#464f88"],
            xaxis:{
                mode: "time",
                timeformat: "%H:%M"
            },
            yaxis: {
                ticks: 4
            },
            tooltip: false
        }
    );

它不断出现以下错误:

未捕获的类型错误:无法在“CanvasRenderingContext2D”上执行“quadraticCurveTo”:需要 4 个参数，但仅存在 0 个。

如果我及时将 : 替换为 . (点)我不再收到错误，但是 xaxis 根本不显示

var time = [["13.33","0.04668"],["13.23","0.04856"],["13.12","0.05997"],["13.01","0.04679"]];

Answer 1

flot 时间序列插件以自纪元 (1/1/1970) 以来的毫秒为单位工作，这与 UNIX 时间非常相似，只不过它以毫秒为单位，而不是秒。您需要提供该格式的时间戳。 flot website提供了用各种语言实现这一点的很好的例子。另请注意，Flot 设计为在 UTC 时间上工作，因此如果将时间戳转换为 UTC 时间，事情会变得更加顺利。在您的示例中，您似乎只想显示时间，而不是日期/时间，因此您始终可以格式化轴字符串以按照您的意愿显示。您可以只选择一个日期并将所有时间设置为特定日期，然后只显示时间部分。

请注意，当您使用 Flot 时，您会发现它有点古怪。有时一起使用多个插件需要按特定顺序加载它们等。我已经使用它大约一年了，我总是能够让它做我需要的事情，有时它只是比看起来应该的要棘手一些!