带有chart.js的时间散点图答案

【问题标题】：time scatter plot w/ chart.js带有chart.js的时间散点图
【发布时间】：2017-12-17 17:10:54
【问题描述】：

我正在尝试在 chart.js 中呈现 (x,y) 数据的散点图，其中 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

}],

没有渲染。我做错了什么？

【问题讨论】：

标签： javascript time chart.js scatter-plot

【解决方案1】：

根据散点图的documentation：

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

所以你不能使用像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 将带有数字，因此您可以使用 callback 修改 xAxes 标签。

【讨论】：

【解决方案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}
],

效果很好！

【讨论】：

效果很好！感谢您的解决方案。然后我将以下内容添加到options.scales：xAxes: [{ticks: {callback: (value) => {return new Date(value).toLocaleDateString("fa-IR", {month: "short",year: "numeric"});}}}],
为我使用 Chart.bundle.min.js 添加了类型 time 以获取时间值：options: {"scales": {"xAxes": [{"type": "time"}]}}

【解决方案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'
                },
              },
            }
          }
       }
    );

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

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

【讨论】：