Chart.js 是否可以使用chat.js；“阶梯线图”；渲染不带下一个数据点的阶梯线的步骤

阶梯线当前的工作方式如上所示

下图旨在模拟“steppedLine:”在“”之前”选项

如果数据点4丢失，将绘制线图，如下所示

o----
    |
    |   o
    |   |   
    o----

1   2   3   4   5   6

有没有可能改成这样画呢

o----
    |   
    |   o----
    |   |
    o----

1   2   3   4   5   6

---

对于我的应用程序（我在其中使用此表示来指示x个用户每y时间使用特定服务），视觉上，将线画成（但不包括）x=4对我来说更有意义

通过测量之间的一步，我们假设值保持不变，或者它们只能以整数形式递增。

---

但是（对我来说）这张图并没有真正清楚地显示这一点。

您可以使用“连同”在画布上直接画出自己的线。它提供了可用于执行自定义代码的不同挂钩。在下面的代码片段中，我使用

afterDraw

hook从最后一个数据点到下一个记号的位置绘制一条水平虚线

新图表（document.getElementById（“myChart”）{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
var dataset=chart.config.data.datasets[0]；
var data=dataset.data；
var xFrom=xAxis.getPixelForTick（data.length-1）；
var xTo=xAxis.getPixelForTick（data.length）；
var y=yAxis.getPixelForValue（data[data.length-1]）；
ctx.save（）；
ctx.strokeStyle=dataset.borderColor；
ctx.lineWidth=dataset.lineWidth；
ctx.setLineDash（[8,4]）；
ctx.beginPath（）；
ctx.moveTo（xFrom，y）；
ctx.lineTo（xTo，y）；
ctx.stroke（）；
ctx.restore（）；
}
}],
数据：{
标签：[“1”、“2”、“3”、“4”、“5”、“6”]，
数据集：[{
标签：“我的数据集”，
数据：[5,1,3]，
边框颜色：“红色”，
线宽：3，
steppedLine:'之前'，
填充：假
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：1
}
}],
}
}
});
您可以使用与一起在画布上直接绘制自己的线条。它提供了可用于执行自定义代码的不同挂钩。在下面的代码片段中，我使用
afterDraw
hook从最后一个数据点到下一个记号的位置绘制一条水平虚线


新图表（document.getElementById（“myChart”）{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
var dataset=chart.config.data.datasets[0]；
var data=dataset.data；
var xFrom=xAxis.getPixelForTick（data.length-1）；
var xTo=xAxis.getPixelForTick（data.length）；
var y=yAxis.getPixelForValue（data[data.length-1]）；
ctx.save（）；
ctx.strokeStyle=dataset.borderColor；
ctx.lineWidth=dataset.lineWidth；
ctx.setLineDash（[8,4]）；
ctx.beginPath（）；
ctx.moveTo（xFrom，y）；
ctx.lineTo（xTo，y）；
ctx.stroke（）；
ctx.restore（）；
}
}],
数据：{
标签：[“1”、“2”、“3”、“4”、“5”、“6”]，
数据集：[{
标签：“我的数据集”，
数据：[5,1,3]，
边框颜色：“红色”，
线宽：3，
steppedLine:'之前'，
填充：假
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：1
}
}],
}
}
});

太棒了！Thx这是有效的！您是否可以修改awnser，使其也包括正在渲染的条的背景色？我忘了在问题中添加它：（@Dex:如果你指的是图例标签，我只是更新了代码，现在就显示出来。不抱歉，如果你删除“fill:false”选项线条下的背景是填充的，我也希望为额外的线条添加这种颜色。我可以添加一个ctx.fillRect，但矩形的高度仍然无效。y太高了，因为它也溢出了x-as。我想我得到了：```ctx.save（）ctx.fillStyle=“rgba（111，170，77，0.3）”ctx.fillRect（xFrom，y，xTo xFrom，xAxis.bottom-xAxis.height-y）ctx.restore（）``好极了！这很有效！您是否可以修改awnser以同时包含正在渲染的条的背景色？我忘了在问题中添加它：（@Dex:如果你指的是图例标签，我刚刚更新了代码，现在就显示出来了。如果你删除“fill:false”选项，我不会感到抱歉线条下的背景是填充的，我也希望为额外的线条添加这种颜色。我可以添加一个ctx.fillRect，但矩形的高度仍然无效。y太高了，因为它也溢出了x-as。我想我得到了：```ctx.save（）ctx.fillStyle=“rgba（111，170，77，0.3）”ctx.fillRect（xFrom，y，xTo xFrom，xAxis.bottom-xAxis.height-y）ctx.restore（）```
o----
    |   
    |   o----
    |   |
    o----

1   2   3   4   5   6