Chart Js V2在垂直条上绘制水平条（平均值） [英] Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar

问题描述

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

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

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

下面是我的代码，工作正常仅垂直条。任何人都可以帮我画水平线。

回答：

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

然后 import'chartjs-plugin-annotation' ;

  this.ctx = document.getElementById（myChart）; 
 this.myChart =新图表（this.ctx，{
类型：'bar'，
数据：{
标签：this.barData.getLabels（），
数据集：[{
 label：this.barData.actualLegendLabel，
 data：this.barData.getLineData（），
 backgroundColor：this.backgroundColorBarOne，
 borderColor：[
'rgba（81,117,194,1）'，
]}] 
}，
期权：{
 scale：{
 responsive：true，
 scaleBeginAtZero：false，
 barBeginAtOrigin：true，
 yAxes：[{
 ticks：{
 beginAtZero：true 
}，
 gridLines：{
显示：false 
} 
}]，
 xAxes：[{
t icks：{
 beginAtZero：true 
}，
 gridLines：{
 display：false 
} 
}] 
}，
 legend：{
 cursor：line，
 position：'top'，
 labels：{
 fontSize：10，
} 
}， 
布局：{
填充：{
左：3，
右：3，
顶部：5，
底部：5 
} 
}，注释：{
 annotations：[{
 drawTime：'afterDraw'，//覆盖annotation.drawTime如果设置为
 id：'a-line-1'，/ /可选
类型：'line'，
 mode：'horizo ntal'，
 scaleID：'y-axis-0'，
值：'25'，
 borderColor：'red'，
 borderWidth：2，
 / /当用户在图表
 //上单击此批注时触发（确保在下面的events数组中启用该事件）。 
 onClick：function（e）{
 //`this`绑定到注释元素
} 
}] 
} 
} 
}）; 
  

解决方案

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

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

1. 计算图表中所有条形的平均值（将它们相加并除以条形数）


2. 从上一次计算：确定线的Y位置和基于此，在画布上绘制绿线。

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

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

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

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.

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

解决方案

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. Calculate the mean of all the bars in your chart (sum them up and divide by the number of bars)
2. From the previous calculation: Decide the Y position of the line and based on that, draw the green line on the canvas.

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

这篇关于Chart Js V2在垂直条上绘制水平条（平均值）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！