Chartjs v2.0：堆积条形图

Question

我需要得到一个这样的图表：

我找到了this example，但它使用旧版ChartJs。我尝试使用v2.0，但我没有得到它。

有人可以发贴一个例子吗？

Answer 1

使用v2.1.x，您可以使用stacked选项

来实现此目的

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

Stack Snippet

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在永远摆弄之后，我终于开始工作，这是一个样本。有人请更新文档！

＆＃13;

＆＃13;

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

    }
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需确保提供一个（多个）对象数组，而不仅仅是xAxis和yAxis的一个对象即可。

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