如何在条形图Chartjs上绘制水平线

Question

我有以下绘制条形图的脚本，我想在特定的 y 点上添加水平线。我正在尝试以下示例链接，我只是替换了 Chart.types.Line.extend，Chart.types.Bar.extend 但结果我得到了can not read property extend of undefined 所以有人可以帮助正确地在链接中实施上述示例或建议另一个决定

我的源代码没有水平线

  var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },


                    }]
                },

            }
        });

Answer 1

您可以使用Chart.js 插件来做到这一点。插件可让您处理特定事件，例如beforeUpdate或afterDraw并且也易于实现：

Chart.pluginService.register({
    afterDraw: function(chart) {
        // Code here will be triggered ... after the drawing
    }
});

一个简单的方法是在图表中绘制所有内容之后，使用lineTo方法简单地像在简单的画布元素上一样绘制一条线。

这是一个关于它的外观的小示例（及其相关代码）：