javascript - 在 chart.js 中随时间正确缩放 xAxis

Question

使用 chart.js，我有一个条形图，其中包含多年分布的数据点：

如果您在 x 轴附近仔细观察，您会看到一些灰色条。这是一个具有相同数据的折线图供参考：

虽然在此示例中使用折线图可能有意义，但它会使数据较少的图表有点尴尬：

并用条代替线

当涉及大 x 轴时，是否可以在条形图上使用一个选项来提高可读性？我代表的是随着时间的推移发生的事件，另一种经过调整的图表也可以接受。

谢谢。

标签： javascriptchartschart.js

Answer 1

我不确定在chart.js 上会有一个选项。

处理它的一种方法是最初呈现折线图，然后在放大到某些日期范围时将类型切换为“条形图”。

根据数据类型，您还可以通过按天（或周或月）对数据求和（或平均）来对数据进行分组。然后将其传递到图表中，时间序列选项应该能够以更明智的方式显示 x 轴日期。

否则，您将不得不研究可以处理和操作更大数据集（如 amCharts）的更强大的图表库：https ://www.amcharts.com/demos/stock-chart-candlesticks/

或者考虑使用高度可定制的 D3，但使用起来有点复杂。