パーセント値に基づく値ドーナツchar.js

Question

私のアプリケーションでドーナツチャートを表示する場合は、数値を表示します。たとえば、飛行場での多数の飛行に基づいています。

次の4時間に800便あります。私は4つのドーナツチャートにデータを表示したい。次の5分で準備を次の30分で準備便の

数便の

番号を準備便の

• ナンバー今
遅れている便の
• 数

私はドーナツを作成するのにchart.jsを使用していますが、私が見る限り、私は静的な数値しか使用できません：

this.data = { 
    datasets: [ 
     { 
      data: [ 
       300, 
      ], 
      backgroundColor: [ 
       '#FF6384', 
      ], 
      hoverBackgroundColor: [ 
       '#FF6384', 
      ] 
     }] 
}; 

これはチャート全体を塗りつぶします。

1. Chart.jsは、ある種の最大値（800）をサポートしており、実際の数値（300）に基づいてその比率に基づいてグラフを塗りつぶしています。
2. データ配列に2つの値を使用できます。一便の実際の数（300）であり、他方は最大値（500）= 800

の差であるが、私は、配列内の変数の値を使用することはできません。

this.data = { 
    datasets: [ 
     { 
      data: [ 
       this.number1, 
       this.number2 
      ], 
      backgroundColor: [ 
       '#FF6384', 
       '#36A2EB' 
      ], 
     }] 
}; 

未定義です。

Answer 1

this.dataオブジェクトをコンストラクタから取り出し、それを関数に組み込むことによって、正しい値を計算できます。

constructor() { 
    this.calcArray(500); 
} 

calcArray(value: number) { 
    const difference = Math.abs(this.max - value); 

    this.data = { 
     datasets: [ 
      { 
       data: [ 
        difference, value 
       ], 
       backgroundColor: [ 
        '#FF6384', 
        '#36A2EB' 
       ], 
       hoverBackgroundColor: [ 
        '#FF6384', 
        '#36A2EB' 
       ] 
      }] 
    }; 
} 

これを複数の値に使用できるようにするには、このクラスを作成する必要があります。