双Y轴柱状图对应数据集堆叠失败问题求助

需要将柱状图中的橙色项（Other、Other (CEV)）与绿色项（Won、Won (CEV)）分别堆叠，但设置x轴stacked会导致4个数据集全部堆叠在一起，当前坐标轴可正常工作，需求是让Won堆叠在Other上方，Won (CEV)堆叠在Other (CEV)上方。

当前效果参考：

当前配置 #

{
  "responsive": true,
  "legend": {
    "display": true,
    "position": "top"
  },
  "scales": {
    "requests": {
      "display": true,
      "position": "left",
      "type": "linear",
      "stacked": true
    },
    "CEV": {
      "display": true,
      "position": "right",
      "type": "linear",
      "stacked": true
    }
  }
}

当前数据 #

{
  "labels": [
    "Jun 23"
  ],
  "datasets": [
    {
      "label": "Other",
      "id": "Other",
      "yAxisID": "requests",
      "data": [10],
      "backgroundColor": ["rgba(255, 139, 32, 0.2)"],
      "borderColor": ["rgba(255, 139, 32, 1)"],
      "borderWidth": 1
    },
    {
      "label": "Won",
      "id": "Won",
      "yAxisID": "requests",
      "data": [1],
      "backgroundColor": ["rgba(120, 255, 132, 0.2)"],
      "borderColor": ["rgba(120, 255, 132, 1)"],
      "borderWidth": 1
    },
    {
      "label": "Other (CEV)",
      "id": "OtherCEV",
      "yAxisID": "CEV",
      "data": [6298315.57],
      "backgroundColor": ["rgba(255, 139, 32, 0.2)"],
      "borderColor": ["rgba(255, 139, 32, 1)"],
      "borderWidth": 1
    },
    {
      "label": "Won (CEV)",
      "id": "WonCEV",
      "yAxisID": "CEV",
      "data": [114351.12],
      "backgroundColor": ["rgba(120, 255, 132, 0.2)"],
      "borderColor": ["rgba(120, 255, 132, 1)"],
      "borderWidth": 1
    }
  ]
}

解决方案 #

要实现同色系分组堆叠，需要给每组数据集指定相同的stack标识，同时开启x轴的stacked属性：

1. 修改数据集配置 #

为每个数据集添加stack字段，橙色系（Other、Other (CEV)）使用同一个stack值，绿色系（Won、Won (CEV)）使用另一个：

{
  "labels": [
    "Jun 23"
  ],
  "datasets": [
    {
      "label": "Other",
      "id": "Other",
      "yAxisID": "requests",
      "stack": "orange-group",
      "data": [10],
      "backgroundColor": ["rgba(255, 139, 32, 0.2)"],
      "borderColor": ["rgba(255, 139, 32, 1)"],
      "borderWidth": 1
    },
    {
      "label": "Won",
      "id": "Won",
      "yAxisID": "requests",
      "stack": "green-group",
      "data": [1],
      "backgroundColor": ["rgba(120, 255, 132, 0.2)"],
      "borderColor": ["rgba(120, 255, 132, 1)"],
      "borderWidth": 1
    },
    {
      "label": "Other (CEV)",
      "id": "OtherCEV",
      "yAxisID": "CEV",
      "stack": "orange-group",
      "data": [6298315.57],
      "backgroundColor": ["rgba(255, 139, 32, 0.2)"],
      "borderColor": ["rgba(255, 139, 32, 1)"],
      "borderWidth": 1
    },
    {
      "label": "Won (CEV)",
      "id": "WonCEV",
      "yAxisID": "CEV",
      "stack": "green-group",
      "data": [114351.12],
      "backgroundColor": ["rgba(120, 255, 132, 0.2)"],
      "borderColor": ["rgba(120, 255, 132, 1)"],
      "borderWidth": 1
    }
  ]
}

2. 修改图表配置 #

在scales中添加x轴配置，设置stacked: true：

{
  "responsive": true,
  "legend": {
    "display": true,
    "position": "top"
  },
  "scales": {
    "x": {
      "stacked": true
    },
    "requests": {
      "display": true,
      "position": "left",
      "type": "linear",
      "stacked": true
    },
    "CEV": {
      "display": true,
      "position": "right",
      "type": "linear",
      "stacked": true
    }
  }
}

原理说明 #

• 同一stack分组的数据集会在x轴上占据同一位置，且在各自绑定的y轴上堆叠显示
• x轴stacked: true确保不同stack分组的数据集在x轴上并排展示，避免全部堆叠在一起

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