当图表数据在同一时间更新时，ng-charts不更新标签 [英] ng-charts not updating labels when chart data is updated at same time
问题描述
当我在 ngOnChanges（）中同时更新图表数据时，我的ng2-charts组件没有更新其标签。
如果我注释掉 ngOnChanges（）中的数据var更新，UI中的标签更新成功。我怎么能得到我的数据和标签更新？
我会包括我的HTML和调用类，但看到没有明显的问题 - 如果你请求它，我会在这里发布。
为什么当我取消注释我的数据更新时，标签不会更新......数据更新很好（与其他图表变量一起）
从'@ angular / core'导入{Component，Input，OnInit，NgZone，OnChanges};
@Component（{
selector：'app-bar-chart-demo'，
templateUrl：'./bar-chart-demo.component.html'，
styleUrls： ['./bar-chart-demo.component.css']，
输入：['chartLabel'，'chartData']
}）
导出类BarChartDemoComponent {
public barChartOptions：any = {
scaleShowVerticalLines：false，
responsive：true
};
//标签
public barChartLabel：string [];
@Input（）chartLabel：string [];
// Data
public barChartData：any [];
@Input（）chartData：string [];
ngOnChanges（）{
// this.barChartData = this.chartData;
this.barChartLabel = this.chartLabel;
}
ngOnInit（）{
this.barChartLabel = this.chartLabel;
console.log（onInit+ this.chartData）;
this.barChartData = this.chartData;
$ / code $ / pre>
我的package.json显示以下图表库
chart.js：^ 2.4.0，
ng2-charts：^ 1.5.0 p>
解决方案我认为正确的方式来更新图表，特别是多行的折线图是要在组件中导入ViewChild和ElementRef ，那么您必须导入BaseChartDirective以创建图表实例，然后才能更新图表的数据和标签。
因此，首先您必须为html中的图表提供class =chart
< div class =chart>
< canvas baseChart [datasets] =barChartData[labels] =barChartLabel[options] =barChartOptions>
< / canvas>
< / div>
如果您注意到我正在使用datasets属性来绑定数据而不是数据属性;现在对于组件，您必须尊重所给数据的结构：
private datasets_lines：{label：string， data：Array< any>现在完整的代码应该是这样的：
$ b
从'@ angular / core'导入{Component，Input，OnInit，NgZone，OnChanges，ViewChild，ElementRef};
从'ng2-charts / ng2-charts'导入{BaseChartDirective};
@Component（{
selector：'app-bar-chart-demo'，
templateUrl：'./bar-chart-demo.component.html'，
styleUrls： ['./bar-chart-demo.component.css']，
inputs：['chartLabel'，'chartData']
}）
导出类BarChartDemoComponent {
@ ViewChild（BaseChartDirective）图：BaseChartDirective;
public barChartOptions：any = {
scaleShowVerticalLines：false，
responsive：true
};
//标签
public barChartLabel：string [];
// Data
public barChartData：{label：string，data：Array< any> } [] = [];
ngOnChanges（）{
//在这里做你的修改
setTimeout（（=）=> {
this.barChartData = this.chartData;
this.barChartLabel = this.chartLabel;
//console.log（this.barChartData）;
if（this.chart&& this.chart.chart&& this.chart.chart .config）{
this.chart.chart.config.data.labels = this.barChartLabel;
this.chart.chart.config.data.datasets = this.barChartData;
this。 chart.chart.config.data.options = this.barChartOptions;
this.chart.chart.update（）;
}
}）;
$ b $ ngOnInit（）{
this.barChartLabel = ['23 mei'，'24 mei'，'25 mei'，'26 mei'，'27 mei' ，'28梅'，'29梅'];
this.barChartData = [
{data：[15,29,24,21,26,15,10]，标签：'Opening / Time'}，
{数据：[11,20,27,26,22,17,11]，标签：'Closing / Time'}
];
}
}
}
注意：您必须检查数据的数量是否等于标签的数字
您可以检查我的其他示例链接 ng2-charts更新标签和数据
My ng2-charts component is not updating its labels when I update the charts data at the same time in ngOnChanges().
If i comment out the data var update in ngOnChanges()the labels update in the UI successfully. How can i get both my data and labels updated?
I would include my HTML and calling class but see no obvious issue - if you request it i will post it here.
Why does the labels not update when i un-comment my data update...the data updates just fine (along with other chart vars)
import { Component, Input, OnInit, NgZone, OnChanges } from '@angular/core';
@Component({
selector: 'app-bar-chart-demo',
templateUrl: './bar-chart-demo.component.html',
styleUrls: ['./bar-chart-demo.component.css'],
inputs:['chartLabel', 'chartData']
})
export class BarChartDemoComponent{
public barChartOptions:any = {
scaleShowVerticalLines:false,
responsive:true
};
//Labels
public barChartLabel:string[];
@Input() chartLabel:string[];
//Data
public barChartData:any[];
@Input() chartData:string[];
ngOnChanges(){
// this.barChartData=this.chartData;
this.barChartLabel=this.chartLabel;
}
ngOnInit(){
this.barChartLabel=this.chartLabel;
console.log("in onInit "+this.chartData);
this.barChartData=this.chartData;
}
}
}
My package.json shows the following charting libs
"chart.js": "^2.4.0",
"ng2-charts": "^1.5.0",
解决方案 i think that the right way to update the chart, specially the line chart with multiple lines is to import ViewChild and ElementRef in your component, then you must import the BaseChartDirective to create an instance of your chart, then you can update your data and labels of the chart.
so first you have to give the class = "chart" for the chart in the html
<div class="chart">
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabel" [options]="barChartOptions">
</canvas>
</div>
if you notice i am using the datasets attribute to bind the data not the data attribute; now for the component you have to respect the structure of the data you're giving:
private datasets_lines: { label: string, data: Array<any> }[]
now the full code should be something like this:
import { Component, Input, OnInit, NgZone, OnChanges, ViewChild, ElementRef } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
@Component({
selector: 'app-bar-chart-demo',
templateUrl: './bar-chart-demo.component.html',
styleUrls: ['./bar-chart-demo.component.css'],
inputs:['chartLabel', 'chartData']
})
export class BarChartDemoComponent{
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
public barChartOptions :any = {
scaleShowVerticalLines:false,
responsive:true
};
//Labels
public barChartLabel :string[];
//Data
public barChartData: { label: string, data: Array<any> }[]=[];
ngOnChanges(){
// do your changes here
setTimeout(() => {
this.barChartData=this.chartData;
this.barChartLabel=this.chartLabel;
//console.log(this.barChartData);
if (this.chart && this.chart.chart && this.chart.chart.config) {
this.chart.chart.config.data.labels = this.barChartLabel;
this.chart.chart.config.data.datasets = this.barChartData;
this.chart.chart.config.data.options = this.barChartOptions;
this.chart.chart.update();
}
});
}
ngOnInit(){
this.barChartLabel=['23 mei', '24 mei', '25 mei', '26 mei', '27 mei', '28 mei', '29 mei'];
this.barChartData=[
{ data: [15, 29, 24, 21, 26, 15, 10], label: 'Opening/Time' },
{ data: [11, 20, 27, 26, 22, 17, 11], label: 'Closing/Time' }
];
}
}
}
Note: you have to check that the number of the data equals the number
of the labels
you can check my other exemple on this link ng2-charts update labels and data
这篇关于当图表数据在同一时间更新时，ng-charts不更新标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
