"Chart.js 水平条可以处理时间序列数据吗？"
[英]Can Chart.js Horizontal bar work with time series data?
问题描述
I am trying to develop a stacked bar graph based on time series data.
我正在尝试开发基于时间序列数据的堆叠条形图。 The data is representing the running of a machine logged to Influx.数据表示记录到 Influx 的机器的运行情况。
Looking about I have not seen this done and cannot seem to get my data to line up correctly to make the stacked bar chart.环顾四周，我还没有看到这样做，并且似乎无法让我的数据正确排列以制作堆叠条形图。 Essentially I want to show one color for running and one for not running.本质上，我想显示一种颜色用于运行，另一种颜色用于不运行。 This isn't an issue as this can be changed programmatically.这不是问题，因为这可以通过编程方式进行更改。
However, the issue I seem to be facing is possible more of a configuration issue.但是，我似乎面临的问题可能更多是配置问题。 I would expect the time series adaptor to automatically align my data up with how it would correspond in my dataset.我希望时间序列适配器能够自动将我的数据与它在我的数据集中的对应方式对齐。
See my example so far.到目前为止，请参阅我的示例。 To clarify, I am using the latest Chart.js at time of writing 3.7澄清一下，我在编写 3.7 时使用的是最新的 Chart.js
const data = { labels: ["Label 1"], datasets: [{ label: "Testing", data: [{ x: moment().valueOf(), y: moment().valueOf() }], backgroundColor: "red" }, { label: "Testing", data: [{ x: moment().add(1, 'day').valueOf(), y: moment().add(1, 'day').valueOf() }], backgroundColor: "blue" }] }; const config = { type: 'bar', data, options: { indexAxis: 'y', scales: { x: { ticks: { beginAtZero: true }, stacked: true, type: 'time', time: { unit: 'day', unitStepSize: 6 } }, y: { stacked: true } } } }; new Chart("myChart", config)<\/code><\/pre><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.7.0\/chart.min.js"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/moment@^2"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-adapter-moment@^1"><\/script> <canvas id="myChart"><\/canvas><\/code><\/pre>
Any point in the correct direction would be most beneficial.正确方向上的任何一点都是最有益的。 I will also answer any queries to clarify my though process on the config also.我还将回答任何疑问，以澄清我在配置上的过程。
"1 个解决方案
解决方案1
0 已采纳 2022-02-06 14:03:45
The problem is that Date<\/code><\/a> represents milliseconds since 1 January 1970 UTC.问题是Date<\/code><\/a>表示自 1970 年 1 月 1 日 UTC 以来的毫秒数。 Therefore you need to define the start date to see only the period of interest.因此，您需要定义开始日期以仅查看感兴趣的期间。 This can be done by adding the min<\/code> option to the x-axis as follows:这可以通过将min<\/code>选项添加到 x 轴来完成，如下所示：
min: moment().startOf('day').subtract(1, 'day')
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.