Question

我正在尝试在 ChartJS 中创建一个分组的堆叠条形图。对于下面的代码，除了分组方面，一切都很好，它只是将所有数据集堆叠在一起。

stackedBarChartData = {
        barPercentage: 1.0,
        //labels: stackedBarData['skills'],
        labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
        datasets:[
            {
              label: 'Dataset 1',
              data: [0, 1, 3, 4, 2, 4, 5, 9],
              backgroundColor: '#D6E9C6',
              stack: 'Stack 0',
            },
            {
              label: 'Dataset 2',
              data: [0, 12, 3, 6, 2, 4, 8, 9],
              backgroundColor: '#FAEBCC',
              stack: 'Stack 0',
            },
            {
              label: 'Dataset 3',
              data: [0, 1, 3, 4, 2, 4, 5, 9],
              backgroundColor: '#EBCCD1',
              stack: 'Stack 1',
            },
        ]
    }
groupedChartOptions = {
    type: 'bar',
    data: stackedBarChartData,
    options: {
        scales: {
            scaleShowValues: true,
            xAxes: [{
                stacked: true,
                scaleLabel: {
                    display: true,
                    labelString: options.xLabel
                },
                ticks: {
                    autoSkip: false
                },
                gridLines: { display: false }
            }],
            yAxes: [{
                stacked: true,
                scaleLabel: {
                    display: true,
                    labelString: options.yLabel
                },
                gridLines: { display: false }
            }]
        },
        title:{
            display: true,
            text: options.title
        }
    }
}
return new Chart(chartObject, chartOptions);

结果如下：

任何帮助将不胜感激。

Answer 1

您的定义使用 Chart.js v2 语法，如果您使用最新版本的 Chart.js v2 (2.9.4)，它似乎可以正常工作，如下所示。

const stackedBarChartData = {
  barPercentage: 1.0,
  //labels: stackedBarData['skills'],
  labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
  datasets: [{
      label: 'Dataset 1',
      data: [0, 1, 3, 4, 2, 4, 5, 9],
      backgroundColor: '#D6E9C6',
      stack: 'Stack 0',
    },
    {
      label: 'Dataset 2',
      data: [0, 12, 3, 6, 2, 4, 8, 9],
      backgroundColor: '#FAEBCC',
      stack: 'Stack 0',
    },
    {
      label: 'Dataset 3',
      data: [0, 1, 3, 4, 2, 4, 5, 9],
      backgroundColor: '#EBCCD1',
      stack: 'Stack 1',
    },
  ]
};
const groupedChartOptions = {
  type: 'bar',
  data: stackedBarChartData,
  options: {
    scales: {
      scaleShowValues: true,
      xAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'A'
        },
        ticks: {
          autoSkip: false
        },
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'B'
        },
        gridLines: {
          display: false
        }
      }]
    },
    title: {
      display: true,
      text: 'XYZ'
    }
  }
};
new Chart('myChart', groupedChartOptions);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="120"></canvas>

Answer 2

您使用的配置应该可以工作，它不工作的原因可能是您的 Chart.js 版本已经过时了。我怀疑您仍在使用版本 2.4.0。如果你升级到 2.9.4 就可以了

https://jsfiddle.net/Leelenaleee/6h2ey8mu/8/

ChartJS：分组堆积条形图不分组

2 个答案: