javascript - 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
        }
    ]
};

但这不是我想要的。

任何帮助，将不胜感激。

标签： javascriptchartsng2-charts

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>