Chart.jsでグループ化されスタックされたチャートを作成する

Question

Chart jsでグループ化され積み重ねられたチャートを作成できるかどうかを知りたいと思います。

私は2組のデータを持っており、それぞれのセットは正（収入）と負（税）成分を持っています。また、データの2つのケース、すなわちベースと感度のケースを提示しているため、それぞれのケースを互いに「グループ化」したいという要望があります。

x軸に沿ってデータが積み重ねられている場合は、バーが重なり、データが積み重ねられていない場合はプラス（所得）バーが対応するマイナス（税）バーからオフセットされます。このトグルは下のコード'積み重ね'オプションの下にあります。

私は、収入と税金のコンポーネントを一緒に積み重ねると同時に、2つのケースを一緒にまとめて、チャートをきれいに表示できるようにしたいと思います。これは可能ですか？助けや洞察力があれば大いに感謝します。

次のように私のチャートのコードは次のとおりです。あなたはx軸とy軸上trueにstackedオプションを設定することで、棒グラフをスタックしstackグループを定義することができ

new Chart(document.getElementById("MyChart"), { 
 
    type: 'bar', 
 
    data: { 
 
     labels: [2017, 2018, 2019, 2020, 2021, 2022, 2023], 
 
     datasets: [{ 
 
      label: "Income - Base", 
 
      type: "bar", 
 
\t \t backgroundColor: "#eece01", 
 
\t \t data: [30, 31, 32, 33, 34, 35, 36], 
 
     }, { 
 
      label: "Income - Sensitivity", 
 
      type: "bar", 
 
\t \t backgroundColor: "#f8981f", 
 
\t \t data: [20, 21, 22, 23, 24, 25, 26], 
 
     }, { 
 
      label: "Tax - Base", 
 
      type: "bar", 
 
      backgroundColor: "#87d84d", 
 
      data: [-15, -16, -17, -18, -19, -20, -21], 
 
     }, { 
 
      label: "Tax - Sensitivity", 
 
      type: "bar", 
 
      backgroundColor: "#00b300", 
 
      backgroundColorHover: "#3e95cd", 
 
      data: [-10, -11, -12, -13, -14, -15, -16] 
 
     } 
 
     ] 
 
    }, 
 
\t \t options: { 
 
\t \t \t scales: { \t \t 
 
\t \t \t \t xAxes: [{ 
 
\t \t \t \t  //stacked: true, 
 
\t \t \t \t \t stacked: false, 
 
\t \t \t \t \t ticks: { 
 
\t \t \t \t \t \t beginAtZero:true, 
 
\t \t \t \t \t \t maxRotation: 0, 
 
\t \t \t \t \t \t minRotation: 0 \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t }], \t \t \t \t \t 
 
\t \t \t \t yAxes: [{ 
 
\t \t \t \t  stacked: false, 
 
\t \t \t \t }] 
 
\t \t \t }, 
 
\t \t } 
 
});

<canvas id="MyChart" width="400" height="200"></canvas>

Answer 1

あなたのデータセットのプロパティ。

以下スニペットは、提案された変更である：

new Chart(document.getElementById("MyChart"), { 
 
    type: 'bar', 
 
    data: { 
 
    labels: [2017, 2018, 2019, 2020, 2021, 2022, 2023], 
 
    datasets: [{ 
 
     label: "Income - Base", 
 
     type: "bar", 
 
     stack: "Base", 
 
     backgroundColor: "#eece01", 
 
     data: [30, 31, 32, 33, 34, 35, 36], 
 
    }, { 
 
     label: "Tax - Base", 
 
     type: "bar", 
 
     stack: "Base", 
 
     backgroundColor: "#87d84d", 
 
     data: [-15, -16, -17, -18, -19, -20, -21], 
 
    }, { 
 
     label: "Income - Sensitivity", 
 
     type: "bar", 
 
     stack: "Sensitivity", 
 
     backgroundColor: "#f8981f",  
 
     data: [20, 21, 22, 23, 24, 25, 26], 
 
    }, { 
 
     label: "Tax - Sensitivity", 
 
     type: "bar", 
 
     stack: "Sensitivity", 
 
     backgroundColor: "#00b300", 
 
     backgroundColorHover: "#3e95cd", 
 
     data: [-10, -11, -12, -13, -14, -15, -16] 
 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     xAxes: [{ 
 
     //stacked: true, 
 
     stacked: true, 
 
     ticks: { 
 
      beginAtZero: true, 
 
      maxRotation: 0, 
 
      minRotation: 0 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     stacked: true, 
 
     }] 
 
    }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
 
<canvas id="MyChart" width="400" height="200"></canvas>