Chart.js 在ChartJS中，是否可以更改不同点之间的线样式？

使用ChartJs（v2.2.2）可以更改图形上最后两个点之间的线样式。e、 g.一路画一条实线，然后在最后画一条虚线？见下图

属性（滚动到行配置）是解决问题的关键

问题是，整个图表是用边框划线绘制的，您无法选择它的起点和终点。
一个简单的解决方法是创建两个相同的数据集。一个是虚线，一个是素线。然后，您将删除普通数据的最后一个数据，它们都将按您所需的方式显示

您可以在中看到完整的代码，其结果如下：

注:

• 由于现在有两个数据集，图例将同时显示这两个数据集。将

  显示设置为false将修复它（或多或少）

• 声明顺序并不重要，因为普通线将始终覆盖虚线
• 使用贝塞尔曲线（

  张力

  属性>0）可能会产生显示问题，因为两个数据集中的数据不同

---

您可以创建一个

散点图，并使用。API提供了一系列钩子，可用于执行自定义代码。这种方法的优点是，您可以自定义每个连接线的样式（宽度、颜色、虚线图案等）


const标签=[1,2,3,4,5,6]；
常量值=[12,19,3,5,2,3]；
const data=labels.map（（label，index）=>（{x:label，y:values[index]}））；
var lineChart=新图表（document.getElementById（“图表”）{
键入：“散布”，
插件：[{
后绘图：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-1']；
var yAxis=图表刻度['y轴-1']；
chart.config.data.datasets[0]。data.forEach（（值，索引）=>{
如果（索引>0）{
var valueFrom=数据[指数-1]；
var xFrom=xAxis.getPixelForValue（valueFrom.x）；
var yFrom=yAxis.getPixelForValue（valueFrom.y）；
var xTo=xAxis.getPixelForValue（value.x）；
var yTo=yAxis.getPixelForValue（value.y）；
ctx.save（）；
ctx.strokeStyle='#922893'；
ctx.lineWidth=2；
if（索引+1==data.length）{
ctx.setLineDash（[5,10]）；
}
ctx.beginPath（）；
ctx.moveTo（xFrom，yFrom）；
ctx.lineTo（xTo，yTo）；
ctx.stroke（）；
ctx.restore（）；
}
});      
}
}],
数据：{
数据集：[{
标签：“我的数据集”，
数据：数据，
边框颜色：“#922893”，
pointBackgroundColor:“透明”
}]
},
选项：{
图例：{
显示：假
},
比例：{
xAxes：[{
滴答声：{
步长：1
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});

谢谢-我有一个与您类似的想法（事实上唯一的区别是，我的虚线数据集只有最后2个点！）我只是想检查一下，是否没有现成的方法来执行此操作，我可能会错过。不幸的是，没有内置属性来执行此操作。。然而，我希望在过去的几个小时里能够深入了解v2.1，并得出与@Tektiv相同的结论。据我所知，这是最好的解决办法。