[英]Angular-chart.js blank div
I am trying to display a chart where the options, labels and other data is initialized in the TypeScript controller and then using it on the HTML page. 我试图显示一个图表,其中在TypeScript控制器中初始化选项,标签和其他数据,然后在HTML页面上使用它。 However I get blank div and no output. 但是我得到空白的div并且没有输出。 Please Help. 请帮忙。
I installed the angular-chart.js
using the nuget
package manager. 我使用nuget
软件包管理器安装了angular-chart.js
。
TypeScript controller: TypeScript控制器:
$onInit() {
this.Init();
this.labels = ["January", "February", "March", "April", "May", "June", "July"];
this.series = ['Series A', 'Series B'];
this.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
this.onClick = function(points, evt) {
console.log(points, evt);
};
this.datasetOverride = [{
yAxisID: 'y-axis-1'
}, {
yAxisID: 'y-axis-2'
}];
this.options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
}
HTML: HTML:
<canvas id="line" class="chart chart-line" chart-data="{{$ctrl.data}}"
chart-labels="{{$ctrl.labels}}" chart-series="{{$ctrl.series}}"
chart-options="{{$ctrl.options}}" chart-dataset-override="{{$ctrl.datasetOverride}}">
</canvas>
Do not use interpolation while binding data , change it as, 绑定数据时请勿使用插值,将其更改为
<canvas id="line" class="chart chart-line" chart-data="$ctrl.data"
chart-labels="$ctrl.labels" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-dataset-override="$ctrl.datasetOverride"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.