#ドーナツグラフと円グラフ

円グラフとドーナツ グラフは、おそらく最もよく使用されるグラフです。これらはセグメントに分割されており、各セグメントの円弧は各データの比例値を示します。

データ間の関係の比率を示すことに優れています。

円グラフとドーナツ グラフは、Chart.js では事実上同じクラスですが、デフォルト値が 1 つ異なります。cutout。これはインナーのどの部分を切り取るかに相当します。これはデフォルトで0円グラフの場合、および'50%'ドーナツ用に。

これらは、次の 2 つのエイリアスでも登録されています。Chart芯。デフォルト値と別名が異なることを除けば、それらはまったく同じです。

const config = {
  type: 'doughnut',
  data: data,
};

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = {
  type: 'pie',
  data: data,
};

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

#データセットのプロパティ

名前空間:

• data.datasets[index]- このデータセットのみのオプション
• options.datasets.doughnut- すべてのドーナツ データセットのオプション
• options.datasets.pie- すべての円グラフ データセットのオプション
• options.elements.arc- すべてのオプション円弧要素
• options- チャート全体のオプション

ドーナツ/円グラフを使用すると、データセットごとに多数のプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、データセットの円弧の色は通常、このように設定されます。

これらすべての値がundefined、で説明されているスコープにフォールバックします。オプションの解決策

#全般的

#スタイリング

各円弧のスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

#境界線の配置

次の値がサポートされていますborderAlign。

• 'center'（デフォルト）
• 'inner'

いつ'center'を設定すると、隣り合う円弧の境界線が重なり合います。いつ'inner'が設定されている場合、すべての境界線が重ならないことが保証されます。

#境界半径

この値が数値の場合、円弧のすべてのコーナー (outerStart、outerEnd、innerStart、innerRight) に適用されます。この値がオブジェクトの場合、outerStartプロパティは、外側の開始コーナーの境界半径を定義します。同様に、outerEnd、innerStart、 とinnerEndプロパティも指定できます。

#インタラクション

各アークとの相互作用は、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

#設定オプション

これらは、円グラフとドーナツ グラフに固有のカスタマイズ オプションです。これらのオプションはアクセス時に検索され、グローバル チャート設定とともにチャートのオプションを形成します。

#デフォルトのオプション

作成されるドーナツ タイプごとにこれらのデフォルト値を変更することもできます。このオブジェクトは次の場所で入手できます。Chart.overrides.doughnut。円グラフには、これらのデフォルトのクローンもあり、変更できます。Chart.overrides.pie唯一の違いは、cutout0に設定されています。

#データ構造

円グラフの場合、データセットにはデータ ポイントの配列が含まれている必要があります。データ ポイントは数値である必要があり、Chart.js はすべての数値を合計し、それぞれの相対的な割合を計算します。

ツールヒントが正しく表示されるように、ラベルの配列を指定する必要もあります。

data = {
    datasets: [{
        data: [10, 20, 30]
    }],
    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};