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方法。

一旦您设置了插件，完成此操作的步骤将是：

计算图表中所有条形的平均值（将它们相加并除以条形数）
从上一次计算中：确定线条的Y位置，并根据该位置在画布上绘制绿线。

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

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

1 个答案: