带有 chart.js 的时间散点图

Question

我正在尝试在 (x,y) 数据的 chart.js 中呈现散点图，其中 x 是日期字符串。我在网上看到了很多示例和教程，其中讲师使用函数为示例图表生成时间戳，但我还没有找到任何使用可能收集的真实数据的示例。

我有看起来像这样的数据（从 cron 收集）：

2017-07-08T06:15:02-0600,23.375
2017-07-08T06:20:02-0600,23.312
2017-07-08T06:25:02-0600,23.312
2017-07-08T06:30:02-0600,23.25

我在chart.js中尝试了这样的数据（数据字符串周围有和没有“引号”）：

data: [{
  x: 2017-07-08T06:15:02-0600,
  y: 23.375
},{
  x: 2017-07-08T06:20:02-0600,
  y: 23.312
},{
  x: 2017-07-08T06:25:02-0600,
  y: 23.312
},{
  x: 2017-07-08T06:30:02-0600,
  y: 23.25

}],

什么都不渲染。我究竟做错了什么？

Answer 1

根据散点图的文档：

与可以以两种不同格式提供数据的折线图不同，散点图仅接受点格式的数据。

所以你不能使用像2017-07-08T06:15:02-0600. 您可以将日期转换为数字并在您的数据中使用它们。

在你的情况下：

data: [{
        x: 1499516102000,
        y: 23.375
    }, {
        x: 1499516402000,
        y: 23.312
    }, {
        x: 1499516702000,
        y: 23.312
    }, {
        x: 1499517002000,
        y: 23.25
    }
]

现在您的 xAxes 将带有数字，因此您可以使用 acallback来修改 xAxes 标签。

Answer 2

这个建议不太对。javascript moment.js 可以使用日期作为 x 轴值来处理散点数据。由于某种原因，Chart.bundle.js 中的捆绑版本对我不起作用，所以我直接下载了 moment.js。我正在使用它来设置：

<script src="js/moment.js"></script>
<script src="js/Chart.min.js"></script>

这是我的 chart.js 数据详细信息：

data: [
  {x: moment("2017-07-08T06:15:02-0600"), y: 23.375},
  {x: moment("2017-07-08T06:20:02-0600"),y: 23.312},
  {x: moment("2017-07-08T06:25:02-0600"),y: 23.312},
  {x: moment("2017-07-08T06:30:02-0600"),y: 23.25}
],

它工作得很好！

Answer 3

另一个对我来说非常有用的解决方案是仅使用line图表的类型，将其配置为使用 x 轴的日期，并另外禁用线条，以便它看起来像散点图。

new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                x: 2017-07-08T06:15:02-0600,
                y: 23.375
              },{
                x: 2017-07-08T06:20:02-0600,
                y: 23.312
              },{
                x: 2017-07-08T06:25:02-0600,
                y: 23.312
              },{
                x: 2017-07-08T06:30:02-0600,
                y: 23.25
            }]
          },
          options: {
            showLine: false,
            scales: {
              x:{
                type: 'time',
                display: true,
                title: {
                  display: true,
                  text: 'Date'
                },
              },
            }
          }
       }
    );

我认为这是一个非常优雅的解决方案。该文档甚至指定：

散点图支持与折线图相同的所有属性。默认情况下，散点图会将折线图的 showLine 属性覆盖为 false。