如何在charts.js 的条内画线？

【问题标题】：How can I draw lines inside the bars in charts.js?如何在charts.js 的条内画线？
【发布时间】：2020-03-24 09:35:30
【问题描述】：

例如，
我在第一个小节上有最高分 - 16.
100% / 16 = 6,25 % 1 分。
因此，在第一个柱中，每 6.25% 我需要画一条线。

第二个柱的最大值为 6，第三个最大值为 3。

【问题讨论】：

添加数据示例-甚至代码-sn-p。乍一看听起来很复杂（这个想法没有 API - 可以选择将模式放在条内）。 Chart.js 将此想法用于组（不适用于酒吧本身的“步骤”）。 chartjs.org/samples/latest/charts/bar/stacked-group.html另外，显示数据的方式看起来不太友好

标签： chart.js line bar-chart

【解决方案1】：

Chart.pluginService.register({
    afterDraw: function(chart) {
        var ctx = chart.ctx;

        chart.config.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id];
                ctx.strokeStyle = "red";
                ctx.beginPath();
                ctx.setLineDash([10, 10]);
                //value
                lineAt = yAxe.getPixelForValue(200);

                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;

                ctx.moveTo(model.x - (model.width / 2), lineAt);
                ctx.lineTo(model.x + (model.width / 2), lineAt);
                ctx.stroke();
            }
        });
    }
});

【讨论】：

虽然这可能会回答问题，但请考虑添加一些解释。