在图表中显示分组数据（不同颜色）的图例

Question

我有一个不同颜色的水平图表来对数据进行分组。在下面的代码中，图表布局按预期显示，但图例仅显示单一颜色（黄色）。如何在保持图表布局的同时强制图表显示其他两个的图例？图例应该是黄色的“第 1 组”、橙色的“第 2 组”和粉红色的“第 3 组”。

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 data = {
  datasets: [{
    label: dataLabelsArr,
    backgroundColor: dataColorsArr,
    data: dataArr
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dataLabelsArr,
    datasets: [{
      data: dataArr,
      backgroundColor: dataColorsArr,
      label: "Group 1"
    }]
  },
  options: {
    indexAxis: 'y',
  }
});

<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>

Answer 1

基于LeeLenaleeanswer的解决方案

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

const labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"];

const group1Data = [21, 34, 21, 90];
const group2Data = [88, 88, 22, 11, 10];
const group3Data = [62, 55, 96, 62];

const getResultData = (mainIndex, ...data) => data.reduce((acc, data, index) => {
  if (mainIndex === index) return acc.concat(data);
  return acc.concat(data.map(() => null));
}, []);

const groups = [
  {
    label: 'Group 1',
    data: getResultData(0, group1Data, group2Data, group3Data),
    backgroundColor: 'yellow'
  },
  {
    label: 'Group 2',
    data: getResultData(1, group1Data, group2Data, group3Data),
    backgroundColor: 'orange'
  },
  {
    label: 'Group 3',
    data: getResultData(2, group1Data, group2Data, group3Data),
    backgroundColor: 'hotpink'
  }
];

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels,
    datasets: groups.map((group) => ({
      ...group,
      barPercentage: groups.length
    }))
  },
  options: {
    indexAxis: 'y',
  }
});

<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>

Answer 2

您只提供一个数据集，因此您只会获得 1 个图例项。此图例项使用它看到的第一个背景颜色作为图例的颜色。

要达到您想要的效果，您需要使用 3 个不同的数据集，每个数据集都有一个静态背景颜色。 然后您可以使用对象表示法将点与正确的 X 标签匹配，或者您可以传递 X 数量的空值来填充空间