Chart Js V2在垂直条上绘制水平条(平均)

2022-01-22 00:00:00 bar-chart javascript chart.js ionic-framework angular

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

I want to draw a single bar over vertical bars(Green Bar). I am using Chart JS V2 with Angular 4.

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

I found some code to draw lines but its not working in Angular 4.

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

I used also tried using annotation but its not working. Command to add annotation: npm install chartjs-plugin-annotation --save

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

Below is my code, works fine to draw vertical bars only. Can anyone help me to draw horizontal line over it.

回答:

安装 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
                    }
                }]
            }
        }
    });

推荐答案

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

You can add a plugin to your chart which can draw anything you'd like on the chart, for example a green line. You can read about plugins in the documentation for ChartJS. Since you want the green line to appear above the vertical bars, you should use the afterDraw method.

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

Once you've set the plugin up, the steps to accomplish this would be:

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

如果您不熟悉如何操作，请查看 CanvasRenderingContext2D浏览器画布工作.

Check out CanvasRenderingContext2D if you are new to how the browser canvas works.

相关文章