Erstellen eines gruppierten und gestapelten Diagramms in Chart.js

Question

Ich würde gerne wissen, ob es möglich ist, ein gruppiertes und gestapeltes Diagramm in Diagramm js zu erstellen.

Ich habe zwei Sätze von Daten und jeder Satz hat eine positive (Einkommen) und negative (Steuer) Komponente, daher der Wunsch, diese zusammen zu "stapeln". Ich präsentiere auch zwei Fälle von Daten - einen Basis- und einen Sensitivitätsfall, daher der Wunsch, jeden Fall nebeneinander zu "gruppieren".

Wenn die Daten entlang der x-Achse gestapelt sind, überschneiden sich die Balken, wenn die Daten nicht gestapelt werden, dann werden die positiven (Einkommens-) Balken von ihren entsprechenden negativen (Steuer) Balken versetzt - dieser Schalter ist im folgenden Code zu sehen unter der Option "gestapelt".

Ich möchte die Einkommens- und Steuerkomponenten zusammenlegen, sowie die beiden Fälle zusammen für jedes Jahr zusammenfassen, so dass die Tabelle übersichtlich angezeigt werden kann. Ist das möglich? Jede Hilfe oder Einsicht würde sehr geschätzt werden.

Der Code für mein Diagramm ist wie folgt:

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

Sie Balkendiagramme, indem der stacked Option auf true auf der x- und y-Achse und definieren stack Gruppe stapeln Eigenschaft Ihrer Datensätze.

Im Folgenden finden Sie Ihre Schnipsel mit den vorgeschlagenen Änderungen:

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>