在Chart.js中绘制无间隙的线性图表

Question

我想绘制货币汇率的线性图表。有些日子没有市场价格（节假日）。我想从图表中删除这些日子，但在费率日之间没有难看的间隙或直线。

您可以在此图表上看到一个示例：

5月3日没有数据，图表已关联，缺少的日期将从图例中删除。

如何使用Chart.js获得此效果？

Answer 1

我想出了一个解决方法。它需要一些黑客攻击，但它有效：

1）首先，修改数据集。迭代所有点并改变x值，使它们对应于图表上的新位置。将原始x值保存在某个属性中以备将来使用（在工具提示中）

2）现在您可以在图表上绘制数据并且它们看起来正确。问题在于工具提示和刻度。

如何处理滴答声：

刻度线是变异数字的列表（它们与原始值不对应）。你利用了一个黑客。暂时覆盖chartController.ticks方法中的afterBuildTicks，其中包含具有原始对应x值的对象数组（而不是普通数字）。您必须为每个刻度线近似原始x值。 有了这个，您可以在ticks回调中使用此信息返回正确的刻度标签。 有了这样的变异数据，图表就不会绘制。你必须将它恢复到变异之前的状态。在方法afterTickToLabelConversion中恢复刻度。请记住，现在它们存储在属性ticksAsNumbers

中

应该使用工具提示回调来完成类似的黑客攻击。您可以访问数据集和utated x值。变异x的近似原始x值，就是它。

Answer 2

您可以使用spanGap属性。来自documentation：

  

如果[spanGaps设置为] true，则将在点之间绘制线   没有或为空的数据。如果为假，具有NaN数据的点将创建一个   换行