Angular 6:chartjs的值不随动态值更新而更新

vvppvyoh  于 2023-10-18  发布在  Chart.js
关注(0)|答案(4)|浏览(173)

我使用Angular 6
在我的component.ts文件中,我必须初始化graph,并在**ngOnIt()**方法中这样做

@Component({
  selector: 'app-contact-detail',
  templateUrl: './contact-detail.component.html',
  styleUrls: ['./contact-detail.component.css']
})
export class ContactDetailComponent implements OnInit {

  contact_id: string;
  public graph_data_year;

  constructor(
    private activatedRoute: ActivatedRoute,
    private graphDataService: GraphDataService
  ) { }

  ngOnInit() {
    this.activatedRoute.params.subscribe(
      param => {
        this.contact_id = param['id'];
      }
    );

    /**
     * Get Amount Given Graph Data
     */
    this.graphDataService.get_data(this.contact_id).subscribe(
      res => {
        const data = [];
        res.forEach(e => {
          data.push(e.total);
        });
        this.graph_data_year = data;
        this._setGraphData();
      }
    );

    this.initializeGraph();
  }

  _setGraphData() {
    this.lineBigDashboardChartData[0]['data'] = this.graph_data_year;

    // this console here gives updated value in the console window, but no update on chart
    console.log(this.lineBigDashboardChartData);
  }

  /**
   * Graph
   */
  initializeGraph() {
    ...

    this.lineBigDashboardChartData = [
      {
        label: 'Data',
        ...
        ...
        data: this.graph_data_year
      }
    ];
    this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

    this.lineBigDashboardChartType = 'line';
  }

}

component.html就像

<canvas baseChart id="bigDashboardChart"
   [datasets]="lineBigDashboardChartData"
   [labels]="lineBigDashboardChartLabels"
   [chartType]="lineBigDashboardChartType"></canvas>

但它不会使用this.graphDataService更新的graph_data_year的更新值更新图表。并显示空白图表。
console.log(this.lineBigDashboardChartData);更新数据后,在控制台窗口中打印更新的值,但图表数据未更新。
我怎样才能在组件中有一个basec变量,在更新时,在组件中使用它的每个地方都更新值?或者我如何在更新数据后刷新购物车?

ppcbkaq5

ppcbkaq51#

请尝试像这样添加ChartType; [chartType]="'line'"和你不应该改变标签原始数组引用。尝试使用此方法创建动态标签;

this.lineBigDashboardChartLabels.length = 0;
this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
cyej8jka

cyej8jka2#

扩展@Mehmet回答,这解决了我的问题。

this.lineBigDashboardChartLabels.length = 0;
this.lineBigDashboardChartLabels.push(...label_data);
qv7cva1a

qv7cva1a3#

如果将this.initializeGraph()移动到ngOnInit中的console.log语句的正下方,会发生什么情况

this.graphDataService.get_data(this.contact_id).subscribe(
  res => {
    const data = [];
    res.forEach(e => {
      data.push(e.total);
    });
    this.graph_data_year = data;
    console.log(this.graph_data_year);
    this.initializeGraph();
  }
);
33qvvth1

33qvvth14#

Canvas在初始化数据之前首先加载图表。将 *ngIf(数据有值)添加到父div。
这可确保在加载图表之前更新数据。

相关问题