chart.js - 如何使用 react-chartjs-2 创建堆积条形图？

Question

我必须使用 react-chartjs-2 创建堆积条形图。

options : {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'x-axis'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true
      }]
    }
  }

Bar中的堆叠似乎不起作用。

我正在使用 chartjs@2.4.0

Answer 1

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

    let data ={ 
      datasets:[{
        label: 'test1',
          data :[1]
        },
        {
          label: 'test2',
          data:  [2]   
        }],
      labels:['label']
    }
    
    render(){
      return  <Bar  data={data} options={options} />
    }

Answer 2

将stack选项添加到您的数据集。

相同的堆栈值堆叠在一起。

const arbitraryStackKey = "stack1";
const data = {
  labels: ['a', 'b', 'c', 'd', 'e'],
  datasets: [
    // These two will be in the same stack.
    {
      stack: arbitraryStackKey,
      label: 'data1',
      data: [1, 2, 3, 4, 5]
    },
    {
      stack: arbitraryStackKey,
      label: 'data2',
      data: [5, 4, 3, 2, 1]   
    }
  ]
}