javascript - ng2 charts - refresh pie chart - Stack Overflow

admin管理员组

文章数量:1395026

Am using ng2-charts -

I have a pie chart, if I hard code the data when I declare the variable at the top of my ponent.ts file like in the example my pie chart displays.

But I obviously want to make the pie char data dynamic. I can call the data through a service (which is a number), add the number to the data array, and the pie chart does not work. But if I do console log, the array prints out with the new data/number I have added to it.

I need to redraw the table somehow. Can't figure out how.

 public pieChartLabels:string[] = ['Red Flags','Green Flags'];
 public pieChartData: number[] = [200, 400];
 public chartType:string = 'pie';
 public redFlagsTotal: any;
 public greenFlagsTotal: any;

constructor(private dataService:flagService) {
    let ponent = this;
    this.redFlagsTotal =    this.dataService.getRedFlags().then(function(result){
        ponent.redFlagsTotal = result.length;
        console.log(ponent.redFlagsTotal);
        ponent.pieChartData.push(ponent.redFlagsTotal);
        console.log(ponent.pieChartData);
    });

    this.greenFlagsTotal =     this.dataService.getGreenFlags().then(function(result){
        ponent.greenFlagsTotal = result.length;
        console.log(ponent.greenFlagsTotal);
        ponent.pieChartData.push(ponent.greenFlagsTotal);
        console.log(ponent.pieChartData);
    });
}

Am using ng2-charts - https://github./valor-software/ng2-charts

I have a pie chart, if I hard code the data when I declare the variable at the top of my ponent.ts file like in the example my pie chart displays.

But I obviously want to make the pie char data dynamic. I can call the data through a service (which is a number), add the number to the data array, and the pie chart does not work. But if I do console log, the array prints out with the new data/number I have added to it.

I need to redraw the table somehow. Can't figure out how.

 public pieChartLabels:string[] = ['Red Flags','Green Flags'];
 public pieChartData: number[] = [200, 400];
 public chartType:string = 'pie';
 public redFlagsTotal: any;
 public greenFlagsTotal: any;

constructor(private dataService:flagService) {
    let ponent = this;
    this.redFlagsTotal =    this.dataService.getRedFlags().then(function(result){
        ponent.redFlagsTotal = result.length;
        console.log(ponent.redFlagsTotal);
        ponent.pieChartData.push(ponent.redFlagsTotal);
        console.log(ponent.pieChartData);
    });

    this.greenFlagsTotal =     this.dataService.getGreenFlags().then(function(result){
        ponent.greenFlagsTotal = result.length;
        console.log(ponent.greenFlagsTotal);
        ponent.pieChartData.push(ponent.greenFlagsTotal);
        console.log(ponent.pieChartData);
    });
}

• javascript
• angular
• ng2-charts

Share Improve this question Follow edited Aug 24, 2017 at 20:02 Kim Kern 60.7k2020 gold badges218218 silver badges214214 bronze badges asked Feb 23, 2017 at 11:17 PepperPepper 71911 gold badge77 silver badges1515 bronze badges 1

• 1 According to the documentation there's an .update(duration, lazy) function, have you read it? – Jax Commented Feb 23, 2017 at 11:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can hide and show the chart for a millisecond like this:

refreshChart(){
    this.mychart.show = false;
    setTimeout(()=>{
        this.mychart.show = true;
    },1);
}

in the template use than mychart.show with *ngIf like this:

<div style="display: block">
  <canvas baseChart
          *ngIf="mychart.show"
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>

in your function than you can use the refreshChart() function when you want to refresh the chart.

EDIT:

If you reinitialize the array than the char should update automatically, instead of this:

ponent.pieChartData.push(ponent.greenFlagsTotal);

do this:

let temp = [...ponent.pieChartData, ...ponent.greenFlagsTotal];
ponent.pieChartData = [...temp];

Solved! Hide the canvas until the data has loaded.

    <div *ngIf="pieChartData.length > 1" style="display: block">
    <canvas baseChart
            [data]="pieChartData"
            [labels]="flagPieChartLabels"
            [chartType]="chartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
</div>

Another way to make your chart data dynamic is to bind the chart directive via ViewChild like so:

...
export class HomeComponent {
    @ViewChild(BaseChartDirective)
    public chart: BaseChartDirective;


void updateChart() {
    this.chart.chart.update(); // This re-renders the canvas element.
}

Now you can call updateChart everytime your dataset has changed to keep your chart up to date!

Hiding the canvas with *ngIf reload the whole ponent.

It seems that if you push data and label then remove them after 1 ms, it will reload the correct chart data.

  reloadChart(){
    this.pieChartLabels.push('reload');
    this.pieChartData.push(1);
    setTimeout(() => {
      this.pieChartData.pop();
      this.pieChartLabels.pop();
    },1);
  }

本文标签： javascriptng2 chartsrefresh pie chartStack Overflow