时间戳

首页 > 解决方案 > 动态设置chart.js堆积条形图数据

javascript - 动态设置chart.js堆积条形图数据

问题描述

我的堆积条形图如下所示

  <canvas baseChart
                        [datasets]="barChartData"
                        [labels]="barChartLabels"
                        [options]="barChartOptions"
                        [legend]="barChartLegend"
                        [chartType]="barChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)"></canvas>
              </div>

我已经看到了替换特定数据数组的示例。这也适用于我。但是，就我而言，我想替换整个数据集。它在我的代码中的外观是：

  this.barChartData = [{"data":[3,0,0,0],"label":"dialog"},{"data":[16199,0,0,0],"label":"AtkBBBFuseFeedsFrontPage"},{"data":[52799,0,0,0],"label":"SandboxHover"},{"data":[11343,0,0,0],"label":"ManageSandboxes"}]
        this.chart.chart.data.datasets = this.barChartData
         this.chart.chart.data.labels = ["session1","session2","session3", "session4"]
          this.chart.chart.update()

但是，这不起作用。而且chart根本不渲染上面的数据。

此外，如果我将相同的数据放在下面的初始化中，那么它工作正常。所以这不是数据的问题。

import { BaseChartDirective } from 'ng2-charts'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(BaseChartDirective)
  public chart: BaseChartDirective;
public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  };
     public barChartLabels:string[] = ["session1", "session2", "session3", "session4"];
      public barChartType:string = 'bar';
      public barChartLegend:boolean = true;

      public barChartData:any[] = [{"data":[3,0,0,0],"label":"dialog"},{"data":[16199,0,0,0],"label":"AtkBBBFuseFeedsFrontPage"},{"data":[52799,0,0,0],"label":"SandboxHover"},{"data":[11343,0,0,0],"label":"ManageSandboxes"}]

旧数据：

public barChartData:any[] = [{data:[0,0,0,0],label:"dialog"},
                              {data:[0,0,0,0],label:"AtkBBBFuseFeedsFrontPage"},
                              {data:[0,0,0,0],label:"SandboxHover"},
                              {data:[0,0,0,0],label:"ManageSandboxes"}]

新数据

 this.barChartData =  [{"data":[3,0,0,0],"label":"dialog"},{"data":[16199,0,0,0],"label":"AtkBBBFuseFeedsFrontPage"},{"data":[52799,0,0,0],"label":"SandboxHover"},{"data":[11343,0,0,0],"label":"ManageSandboxes"}]

标签： javascriptangularchart.jschart.js2

解决方案

我认为它正在工作，但您看不到更改，因为您以前的数据和更改的数据完全相同。所以，它没有更新。我运行了你的代码，它正在工作。

html：我创建了一个额外的按钮来更改数据。

<canvas baseChart
                        [datasets]="barChartData"
                        [labels]="barChartLabels"
                        [options]="barChartOptions"
                        [legend]="barChartLegend"
                        [chartType]="barChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)">
    </canvas>

     <button (click)="changeData()">CLICK</button>

ts文件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  };
  public barChartLabels: string[] = ["session1", "session2", "session3", "session4"];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
      {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
      {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}];

  public changeData(): any{
    this.barChartData = [
      {data: [10, 2, 80, 81, 36, 55, 40], label: 'Series D'},
      {data: [28, 87, 40, 19, 67, 27, 9], label: 'Series E'},
      {data: [18, 48, 66, 9, 58, 27, 40], label: 'Series F'}
    ];
  }
}

我的代码运行良好。

推荐阅读