chartjs v2.0：堆叠条形图

Question

我需要一张这样的图表：

我找到了这个示例，但它使用了旧版本的ChartJs。我尝试使用v2.0，但我不明白。

有人能贴个例子吗？

Answer 1

只需确保为xAxis和yAxis提供一个对象数组，而不仅仅是一个对象。

"options": {
    "scales": {
        "xAxes": [
            {
                "stacked": true
            }
        ],
        "yAxes": [
            {
                "stacked": true
            }
        ]
    }
}

Answer 2

在不断地摆弄之后，我终于让它工作了，这是一个样本。有人请更新文档！

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes 1',
        data: [10, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)'
        ],
        borderWidth: 2
      },
      {
        label: '# of Votes 2',
        data: [15, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 2
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

Answer 3

对于v2.1.x，您可以使用stacked选项来实现这一点

...
options: {
    scales:{
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
        stacked: true
        }]
    }
}
...

堆栈片段

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'line',
      label: 'Dataset 2',
      data: [-65, -10, -80, -81, -56, -85, 40],
      borderColor: 'black',
      fill: false
    }, {
      type: 'bar',
      label: 'Dataset 1',
      backgroundColor: "red",
      data: [65, 0, 80, 81, 56, 85, 40],
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: "blue",
      data: [-65, 0, -80, -81, -56, -85, -40]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

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