[英]How to use Chart.js in Angular4?
I'm stuck trying to use Chart.js in Angular4. 我被困试图在Angular4中使用Chart.js。 I'm using Visual Studio. 我正在使用Visual Studio。
I tried to use ViewChild but then I decided to try the official way: 我尝试使用ViewChild,但是后来我决定尝试使用官方方式:
https://www.chartjs.org/docs/latest/getting-started/usage.html https://www.chartjs.org/docs/latest/getting-started/usage.html
package.json: 的package.json:
"@angular/core": "4.2.5",
"@types/chart.js": "^2.7.40",
"chart.js": "^2.7.3",
my-chart.html: 我-chart.html:
<canvas id="myChart" width="400" height="400"></canvas>
or
<canvas #chartCanvas [style.width]="width" [style.height]="height"></canvas>
" my-chart.ts: “ 我的图表:
import { Chart } from "chart.js"
export class SalesChart implements OnInit {
@Input("chartWidth") width: string = "10%"
@Input("chartHeight") height: string = "20%"
@ViewChild("chartCanvas") private chartCanvas:any
// when click the button:
drawChart() {
// new Chart does not accep HTMLElement
// var ctx = document.getElementById("myChart")
var myChart = new Chart("myChart", {
type: 'bar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
}
The canvas is initially rendered with the assigned dimensions but when the drawChart() is executed the canvas is set with width and height = "0" and it become empty. 最初使用指定的尺寸渲染画布,但是当执行drawChart()时, 会将画布设置为width和height =“ 0”并变为空。
Initial HTML element: 初始HTML元素:
<canvas _ngcontent-c2="" height="400" id="myChart" width="400"></canvas>
Resulting HTML element: 结果HTML元素:
<canvas _ngcontent-c2="" height="0" id="myChart" width="0" class="chartjs-render-monitor" style="display: block; height: 0px; width: 0px;"></canvas>
I can change the with/height but the canvas is absolutely empty . 我可以更改高度/高度,但是画布绝对是空的 。
I also tried using the ViewChild solution but when I pass something valid to Chart() I have the same result: width and height set to "0" and empty canvas. 我也尝试使用ViewChild解决方案,但是当我将有效的东西传递给Chart()时,我得到相同的结果:宽度和高度设置为“ 0”,并且画布为空。
//var ctx = (<HTMLCanvasElement>this.chartCanvas.nativeElement).getContext("2d")
var ctx = document.getElementById("chartCanvas") as HTMLCanvasElement
I found some tutorials that use: 我发现一些使用的教程:
chart = []
// and this in the HTML template
<canvas ...>{{ chart }}</canvas>
With this approach when I have no errors the chart result to be [Object Object]. 使用这种方法,当我没有错误时,图表结果为[Object Object]。
Someone have any idea why the chart is not created? 有人知道为什么不创建图表?
I usually use chart.js through primeng, and even if I don't want to use primeng, I follow their example, because I find it clean. 我通常通过primeng使用chart.js,即使我不想使用primeng,也请按照他们的示例进行,因为我发现它很干净。 You can see how they implement it here: https://github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts 您可以在此处查看其实施方式: https : //github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.