Chart.js水平柱状图多颜色分组数据如何显示全部对应图例

解决方法 #

你当前只配置了1个dataset，Chart.js默认1个dataset仅生成1个图例项，因此只会显示Group1的黄色图例。要完全保留现有图表布局不需要拆分dataset，直接通过自定义图例生成逻辑即可实现需求，修改后的完整代码如下：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" width="350" height="175"></canvas>

JS代码 #

var ctx = document.getElementById("myChart").getContext("2d");

var dataArr = [21, 34, 21, 90, 88, 88, 22, 11, 10, 62, 55, 96, 62];
var dataLabelsArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"];
var dataColorsArr = ["yellow", "yellow", "yellow", "yellow", "orange", "orange", "orange", "orange", "orange", "hotpink", "hotpink", "hotpink", "hotpink"];

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dataLabelsArr,
    datasets: [{
      data: dataArr,
      backgroundColor: dataColorsArr,
      label: "Group 1"
    }]
  },
  options: {
    indexAxis: 'y',
    plugins: {
      legend: {
        // 自定义生成三个图例项
        labels: {
          generateLabels: function(chart) {
            return [
              {
                text: 'Group 1',
                fillStyle: 'yellow',
                strokeStyle: 'yellow',
                hidden: chart.getDatasetMeta(0).data.some((bar, idx) => dataColorsArr[idx] === 'yellow' && !bar.visible),
                datasetIndex: 0
              },
              {
                text: 'Group 2',
                fillStyle: 'orange',
                strokeStyle: 'orange',
                hidden: chart.getDatasetMeta(0).data.some((bar, idx) => dataColorsArr[idx] === 'orange' && !bar.visible),
                datasetIndex: 0
              },
              {
                text: 'Group 3',
                fillStyle: 'hotpink',
                strokeStyle: 'hotpink',
                hidden: chart.getDatasetMeta(0).data.some((bar, idx) => dataColorsArr[idx] === 'hotpink' && !bar.visible),
                datasetIndex: 0
              }
            ]
          }
        },
        // 自定义图例点击交互，点击时切换对应分组柱子的显示状态
        onClick: function(e, legendItem, legend) {
          const chart = legend.chart;
          const meta = chart.getDatasetMeta(0);
          const targetColor = legendItem.fillStyle;
          const isNowHidden = legendItem.hidden;
          meta.data.forEach((bar, idx) => {
            if (dataColorsArr[idx] === targetColor) {
              bar.visible = isNowHidden;
            }
          });
          chart.update();
        }
      }
    }
  }
});

这个方案完全保留了你原有图表的柱子布局、颜色和顺序，同时实现了三个分组的图例显示，点击图例还可以正常切换对应分组柱子的显隐状态。

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