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

Question

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

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

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

以下是我的代码，仅适用于绘制竖线。谁能帮我在上面画水平线。

回答：

安装npm install chartjs-plugin-annotation --save

然后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
                    }
                }]
            }
        }
    });      

Answer 1

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

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

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

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