Chart.js 折线图末尾的范围

是否可以在折线图的右侧放置一个范围，以比较两条线的最后两个点之间的距离

---

这可以通过定制插件制作来实现，我在下面给出了一个例子。请注意，该代码基于您的屏幕截图做出了许多假设，应该将其视为一个起点，而不是一个完美的解决方案

让myChart=新图表（document.getElementById（'Chart'）{
键入：“行”，
数据：{
标签：['a'，'b'，'c'，'d'，'e'，'f'，'g']，
数据集：[{
标签：'Group1'，
数据：[-1000，-2000，-2000，-3000，-4000，-3000，-5000]，
背景颜色：“#F48496”
}, {
标签：'Group2'，
数据：[-4000，-4000，-3000，-6000，-6000，-5000，-9000]，
背景颜色：“#61B2E9”
}]
},
选项：{
MaintaintAspectRatio:false，
布局：{
填充：{
右：100
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
},
插件：{
afterRender:函数（c）{
让
//计算第一个和第二个数据集中最后两个点的值之间的差值。
d=c.config.data.datasets[0]。数据[c.config.data.datasets[0]。data.length-1]-c.config.data.datasets[1]。数据[c.config.data.datasets[1]。data.length-1]，
//第一个数据集中最后一个点的位置。
xy0=c.getDatasetMeta（0）.data[c.getDatasetMeta（0）.data.length-1]。\u模型，
//第二个数据集中最后一个点的位置。
xy1=c.getDatasetMeta（1）.data[c.getDatasetMeta（1）.data.length-1]。\u模型；
c、 ctx.save（）；
//划清界限。
c、 ctx.strokeStyle=‘黑色’；
c、 ctx.beginPath（）；
c、 ctx.moveTo（xy0.x+10，xy0.y）；
c、 ctx.lineTo（xy0.x+15，xy0.y）；//绘制上水平线。
c、 ctx.lineTo（xy0.x+15，xy1.y）；//绘制垂直线。
c、 ctx.lineTo（xy1.x+10，xy1.y）；//画下水平线。
c、 ctx.stroke（）；
//画课文。
c、 ctx.font='20px无衬线'；
c、 ctx.fillStyle='黑色'；
c、 ctx.fillText(
d、 //文本
c、 chartArea.right+25，//文本x位置
xy0.y+（（xy1.y-xy0.y）/2）//文本y位置
);
c、 ctx.restore（）；
}
}
});
本机不可能，也没有任何chart.js插件可用。。就我所知。不过，如果您有HTML5画布方面的经验，您可以自己绘制。