angular - 動的に更新された ng2-charts

Question

動的に更新することは可能chartですか? ng2-chartsのような他のライブラリがあることは知っていますがangular2-highcharts、 を使用して処理したいと思いng2-chartsます。chart主な質問は、ボタンをクリックした後、どうすれば再描画できますか? ウィンドウのサイズを変更するとデータが更新されるため、手動で行うオプションが必要です。

https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

Answer 1

良い方法は、API を使用してチャートを再描画するために、チャート自体を把握することです。

export class MyClass {
 @ViewChild( BaseChartDirective ) chart: BaseChartDirective;

  private updateChart(){
   this.chart.ngOnChanges({});
  }

}

Answer 2

おそらく、既存の最良のオプションではないかもしれませんが、機能します。既存の を更新することはできませんchartが、既存のものを使用して新しいポイントを作成し、chart新しいポイントを追加することはできます。チャートのアニメーションをオフにすることで、より良い効果を得ることができます。

問題を解決した機能:

updateChart(){
   let _dataSets:Array<any> = new Array(this.datasets.length);
   for (let i = 0; i < this.datasets.length; i++) {
      _dataSets[i] = {data: new Array(this.datasets[i].data.length), label: this.datasets[i].label};
      for (let j = 0; j < this.datasets[i].data.length; j++) {
        _dataSets[i].data[j] = this.datasets[i].data[j];
      }
   }
   this.datasets = _dataSets;
}

ライブデモ: https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

@UPDATE: 以下のコメントで @Raydelto Hernandez が言及したように、より良い解決策は次のとおりです。

updateChart(){
    this.datasets = this.dataset.slice()
}

Answer 3

これは、ng2-chartsの回路図が存在する 2020 年です。

npm i ng2-charts
ng generate ng2-charts-schematics:<type> <chart-name>

これにより、コンポーネントが生成されます (例: times-bought という名前の棒グラフ)。

times-bought.component.html

<div style="display: block; width: 40vw; height:80vh">
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [colors]="barChartColors"
    [legend]="barChartLegend"
    [chartType]="barChartType"
    [plugins]="barChartPlugins">
  </canvas>
</div>

コンポーネント ts では、データのオブザーバブルを返すサービスにサブスクライブします。この場合、数値と購入したコース/製品のタイトルに解析する firestore フィールド値をカウントします

times-bought.component.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Color, Label } from 'ng2-charts';
import { AdminService } from 'src/app/services/admin.service';
import { _COURSES, _BAR_CHART_COLORS } from  "../../../../settings/courses.config";//

@Component({
 selector: 'times-bought-chart', // Name this however you want
 templateUrl: './times-bought.component.html', 
 styleUrls: ['./times-bought.component.scss']
})
export class TimesBoughtComponent implements OnInit {

public barChartData: ChartDataSets[] = [
 { data: [0, 0, 0, 0], label: 'Times Bought', barThickness: 60, barPercentage: 0.1 }];
public barChartLabels: Label[] = _COURSES  // Array of strings
public barChartOptions: ChartOptions = {
  responsive: true,
  scales: { yAxes: [{ ticks: { beginAtZero: true } }] }
};
public barChartColors: Color[] = _BAR_CHART_COLORS // 
public barChartLegend = true;
public barChartType: ChartType = 'bar';
public barChartPlugins = [];

constructor(private adminService: AdminService) { }

ngOnInit() {
  this.adminService.getAllCourses().subscribe(
    data =>{
      this.barChartData[0].data = data.map(v=> parseInt((v.times_bought).toString())) // parse FieldValue to Int
      this.barChartLabels = data.map(v => v.title)
  })
}}

firestore への実際のクエリを実行し、オブザーバブルを返すサービス ts ファイル

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Course } from '../interfaces/course.interface';

@Injectable({
  providedIn: 'root'
})
export class AdminService {

constructor(private db: AngularFirestore) { }

public  getAllCourses(){
  return this.db.collection<Course>('courses', ref =>
    ref.orderBy('times_bought', 'desc')).valueChanges()
}}

および settings/courses.config.ts

export const _COURSES = [
 'Title1',
 'Title2',
 'Title3',
 'Title4']

 export const _BAR_CHART_COLORS = [
 {
   borderColor: [
     'rgba(255,0,0,0.5)',
     'rgba(54, 75, 181, 0.5)',
     'rgba(114, 155, 59, 0.5)',
     'rgba(102, 59, 155, 0.5)'
   ],
   backgroundColor: [
     'rgba(255,0,0,0.3)',
     'rgba(54, 75, 181, 0.3)',
     'rgba(114, 155, 59, 0.3)',
     'rgba(102, 59, 155, 0.3)'
   ]
 }]

また、必ず ngOnDestroy でサブスクリプションを閉じてください。コース コレクションのオブザーバブルは、times_bought フィールドが更新されるたびに新しい値を発行し、これによりチャートの更新がトリガーされます。これの唯一の欠点は、色が特定の列/バーにバインドされているため、1 つのタイトルが他のタイトルを上回った場合、タイトルのみが場所を変更し、それに応じて y 軸が更新されますが、色は更新されないことです。 Chart.min.js を Web マニフェスト (pwa Service Worker の場合) に、または index.html のスクリプトとして

Answer 4

任意のチャートをng2-charts動的に更新できます。例: http://plnkr.co/edit/m3fBiHpKuDgYG6GVdJQD?p=preview

その Angular 更新チャート、変数、または参照は変更する必要があります。配列要素の値を変更しただけでは、変数と参照は変更されません。 Github も参照してください。