如何为ChartJS堆叠柱状图添加数据维度

我需要创建一个堆叠柱状图，具体要求如下：

• X轴为小时分段（如9am、10am、11am等），Y轴为计数
• 数据需按**天（周一、周二……）和人员（Alice、Bob）**分组，预期效果如下：
  
• 需支持单独切换周一、周二、Bob、Alice的显示/隐藏状态，且柱状图上不需要显示数据标签（示例图中的标签仅用于说明数据）

理想的数据定义方式 #

版本1 #

const labels = ['9am','10am','11am','12pm'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Monday',
      data: [{x:'9am',person:'Bob',y:7},{x:'10am',person:'Bob',y:6},{x:'11am',person:'Bob',y:5},{x:'12pm',y:4},{x:'9am',person:'Alice',y:7},{x:'10am',person:'Alice',y:6},{x:'11am',person:'Alice',y:5},{x:'12pm',y:4}],
      stack: data.x,
    },
    {
      label: 'Tuesday',
      data: [{x:'9am',person:'Bob',y:7},{x:'10am',person:'Bob',y:6},{x:'11am',person:'Bob',y:5},{x:'12pm',y:4},{x:'9am',person:'Alice',y:7},{x:'10am',person:'Alice',y:6},{x:'11am',person:'Alice',y:5},{x:'12pm',y:4}],
    }
  ]
};

版本2（编辑1） #

const labels = ['9am','10am','11am','12pm'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Bob',
      data: [{x:'9am',day:'Monday',y:7},{x:'10am',day:'Monday',y:6},{x:'11am',day:'Monday',y:5},{x:'12pm', day:'Monday', y:4},{x:'9am',day:'Tuesday',y:7},{x:'10am',day:'Tuesday',y:6},{x:'11am',day:'Tuesday',y:5},{x:'12pm',day:'Tuesday',y:4}],
      backgroundColor: 'blue'
    },
    {
      label: 'Alice',
      data: [{x:'9am',day:'Monday',y:7},{x:'10am',day:'Monday',y:6},{x:'11am',day:'Monday',y:5},{x:'12pm',day:'Monday',y:4},{x:'9am',day:'Tuesday',y:7},{x:'10am',day:'Tuesday',y:6},{x:'11am',day:'Tuesday',y:5},{x:'12pm',day:'Tuesday',y:4}],
      backgroundColor:'amber';
    }
  ]
};

希望能通过数据项（如data.day）来指定堆叠分组。

已尝试的配置 #

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};

自行实现的示例代码 #

JavaScript 代码 #

const labels = ['9am','10am','11am','12pm'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Bob-Monday',
      data: [{x:'9am',y:7},{x:'10am',y:6},{x:'11am',y:5},{x:'12pm',y:4}],
      stack: 'Monday',
    },
    {
      label: 'Alice-Monday',
      data: [{x:'9am',y:7},{x:'10am',y:8},{x:'11am',y:10},{x:'12pm',y:9}],
      stack: 'Monday',
    },
    {
      label: 'Bob-Tue',
      data: [{x:'9am',y:7},{x:'10am',y:6},{x:'11am',y:4},{x:'12pm',y:3}],
      stack: 'Tue',
    },
    {
      label: 'Alice-Tue',
      data: [{x:'9am',y:7},{x:'10am',y:8},{x:'11am',y:10},{x:'12pm',y:9}],
      stack: 'Tue',
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};
const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, config);

HTML 代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

内容的提问来源于stack exchange，提问作者Edward