在ChartJS中,是否可以更改不同点之间的线条样式?

zpjtge22  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(159)

使用ChartJs(v2.2.2),您是否可以更改图表上最后2个点之间的线条样式。例如,始终使用实线,然后在末尾使用虚线?请参见下图

eqfvzcg8

eqfvzcg81#

borderDash属性(* 滚动到线路配置 *)是解决问题的关键。
问题是,完整的图表是用边框破折号绘制的,你不能选择它在哪里开始和结束。
一个简单的解决方法是创建两个相同的数据集。一个是点线数据集,另一个是实线数据集。然后删除纯线数据集的最后一个数据,这两个数据集都将按您希望的方式显示。
您可以在this jsFiddle中看到完整的代码,下面是它的结果:

  • 备注:*
  • 由于现在有两个数据集,图例将同时显示这两个数据集。将display设置为false可修复此问题(* 或多或少 *)。
  • 声明的顺序并不重要,因为实线总是覆盖虚线。
  • 使用贝塞尔曲线(tension属性〉0)可能会产生显示问题,因为两个数据集中的数据不相同。
t1rydlwq

t1rydlwq2#

您可以创建一个scatter图表,并使用插件核心API直接在画布上绘制线条。该API提供了一系列可用于执行自定义代码的挂钩。这种方法的优点是您可以自定义每条连接线的样式(宽度、颜色、虚线图案等)。
第一个

相关问题