Chart.js에서 그룹화 된 누적 형 차트 만들기

Question

Chart js에서 그룹화되고 누적 된 차트를 만들 수 있는지 알고 싶습니다.

두 세트의 데이터가 있으며 각 세트에는 포지티브 (소득) 및 마이너스 (세금) 구성 요소가 있으므로이를 함께 쌓기를 원합니다. 또한 데이터의 두 가지 사례를 제시합니다. 기본 및 감도 사례이므로 각 사례를 서로 '그룹화'하고자합니다.

데이터가 x 축을 따라 누적되면 막대가 겹치고 데이터가 누적되지 않으면 양수 (소득) 막대가 해당하는 음수 (세금) 막대에서 상쇄됩니다.이 토글은 아래 코드에서 볼 수 있습니다 'stacked'옵션 아래에.

소득 및 세금 구성 요소를 함께 쌓을뿐만 아니라 차트를 깔끔하게 표시 할 수 있도록 매년 두 가지 경우를 함께 정리하고 싶습니다. 이것이 가능한가? 어떤 도움이나 통찰력이라도 대단히 감사하겠습니다.

다음과 같이 내 차트의 코드는 다음과 같습니다 당신은 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>