chart.js中堆積的條形圖，堆棧中具有不同的值

Question

我想創建一個像這樣的堆棧圖：

注意：每個堆棧具有不同的值

圖表js是否可能？ 如果是，我的數據應該是什么樣？

我已經試過了：

var data = {
    labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
    datasets: [
        {
            label: "Harpo",
            fillColor: "blue",
            data: []  // What should i use here 
        },
        {
            label: "Chico",
            fillColor: "red",
            data: []  // What should i use here
        }
    ]
};

但這不是我想要的。

任何幫助，將不勝感激。

Answer 1

為了有3條桿的堆疊，
您將需要3個datasets 。

要具有不同的顏色，請為backgroundColor使用數組。

請參閱以下工作片段...

 $(document).ready(function() { new Chart(document.getElementById("myChart").getContext("2d"), { type: "bar", data: { labels: ["2018", "2019"], datasets: [ { backgroundColor: ["#673AB7", "#90A4AE"], fillColor: "#000000", data: [1, 4] }, { backgroundColor: ["#E1BEE7", "#0D47A1"], data: [2, 5] }, { backgroundColor: ["#BA68C8", "#455A64"], data: [3, 6] } ] }, options: { legend: { display: false }, scales: { xAxes:[{ stacked: true }], yAxes:[{ stacked: true }], } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myChart"></canvas>