时间散点图w/chart.js

我试图在（x，y）数据的chart.js中渲染散点图，其中x是日期字符串。我在网上看到很多示例和教程，其中教师使用函数为示例图表生成时间戳，但是我没有发现任何使用真实数据的示例，例如可能会收集的示例。时间散点图w/chart.js

我有一个看起来像这样的数据（在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

}]，

没有呈现。我究竟做错了什么？

来源

2017-07-13 user2711286

根据散点图的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标签。

来源

2017-07-13 10:09:05 katagorri

该建议并不完全正确。 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} 
],

它的工作太棒了！

来源

2017-07-13 14:43:16 user2711286

时间散点图w/chart.js

回答

相关问题