Question

我有以下绘制条形图的脚本，我想在特定的y点上添加水平线。我正在尝试关注示例link，我只是将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 plugins来执行此操作。插件可让您处理beforeUpdate或afterDraw等特定事件，并且也易于实施：

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

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

<小时/> 以下是一个小例子（ and its related code ），它的外观如下：

Answer 2

根据@tektiv的回答，您的yAxis始终以0开头。

这是一个不使用yAxe.min的工作示例，所以您可以使用它（例如，使用beginAtZero:false），yAxe会自动对您的数据进行缩放。

线插件：

var canvas = document.getElementById("barCanvas");
var ctx = canvas.getContext('2d');

Chart.pluginService.register({
    afterDraw: function(chart) {
        if (typeof chart.config.options.lineAt != 'undefined') {
            var lineAt = chart.config.options.lineAt;
            var ctxPlugin = chart.chart.ctx;
            var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
            var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id];
            ctxPlugin.strokeStyle = "red";
            ctxPlugin.beginPath();
            lineAt = yAxe.getPixelForValue(lineAt);
            ctxPlugin.moveTo(xAxe.left, lineAt);
            ctxPlugin.lineTo(xAxe.right, lineAt);
            ctxPlugin.stroke();
        }
    }
});

图表：

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: {
       lineAt: 14,
       scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false
                }
            }]
        },
    }
});

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

2 个答案: