Chart Js V2 在垂直条上绘制水平条（平均）

我想在垂直条上绘制一个条（绿色条）。我正在使用 Chart JS V2 和 Angular 4。

我找到了一些画线的代码，但它在 Angular 4 中不起作用。

我用过也尝试过使用annotation但它不起作用。 添加注释的命令：npm 安装 Chartjs-plugin-annotation --save

下面是我的代码，可以很好地仅绘制垂直条。谁能帮我在上面画一条水平线。

Answer:

Install npm install chartjs-plugin-annotation --save

Then import 'chartjs-plugin-annotation';

this.ctx = document.getElementById("myChart");
    this.myChart = new Chart(this.ctx, {
        type: 'bar',
        data: {
            labels: this.barData.getLabels(),
            datasets: [{
                label: this.barData.actualLegendLabel,
                data: this.barData.getLineData(),
                backgroundColor: this.backgroundColorBarOne,
                borderColor: [
                    'rgba(81,117, 194,1)',
                ]}]
        },
        options: {
            scales: {
                responsive: true,
                scaleBeginAtZero: false,
                barBeginAtOrigin: true,
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: false
                    }
                }],
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: false
                    }
                }]
            },
            legend: {
                cursor: "line",
                position: 'top',
                labels: {
                    fontSize: 10,                       
                }
            },
            layout: {
                padding: {
                    left: 3,
                    right: 3,
                    top: 5,
                    bottom: 5
                }
            }, annotation: {
                annotations: [{
                    drawTime: 'afterDraw', // overrides annotation.drawTime if set
                    id: 'a-line-1', // optional
                    type: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: '25',
                    borderColor: 'red',
                    borderWidth: 2,           
                    // Fires when the user clicks this annotation on the chart
                    // (be sure to enable the event in the events array below).
                    onClick: function(e) {
                        // `this` is bound to the annotation element
                    }
                }]
            }
        }
    });      

您可以向图表添加一个插件，该插件可以在图表上绘制您想要的任何内容，例如绿线。您可以阅读有关插件的信息ChartJS 的文档。由于您希望绿线出现在垂直条上方，因此您应该使用afterDraw方法。

设置插件后，完成此操作的步骤如下：

1. 计算图表中所有条形的平均值（将它们相加并除以条形数量）
2. 根据之前的计算：确定线的 Y 位置，并据此在画布上绘制绿线。

查看CanvasRenderingContext2D如果您不熟悉浏览器画布的工作原理。