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

Posted 2023-02-16

【中文标题】在图表中显示分组数据（不同颜色）的图例

【英文标题】：Display legend of grouped data (different colors) in chart

【发布时间】：2021-11-12 22:48:48

【问题描述】：

我有一个不同颜色的水平图表来对数据进行分组。在下面的代码中，图表布局按预期显示，但图例仅显示单一颜色（黄色）。如何在保持图表布局的同时强制图表显示其他两个的图例？图例应该是黄色的“第 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"  ></canvas>

【问题讨论】：

你想显示什么？您的数据未分组。如果对数据进行分组，这样的图表看起来会有所不同。也许您需要不同的图表？

我正在尝试显示一个像上面那样的水平条形图，数据中的三个“组”具有不同的颜色（A-D as Group 1，E-I as Group 2，和J-M 为Group 3)，以便它们具有不同的颜色并显示3个“组”图例/颜色框。当我尝试添加其他数据集时，我没有对数据进行分组，但在每个黄色条旁边添加了一个橙色条。我不知道如何创建上面的图表但添加了颜色框/图例的任何解决方案。

【参考方案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"  ></canvas>

【参考方案2】：

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

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

【讨论】：

如果传递零或空值，则条形宽度将减小，因为它们是分组的

是的，你可以增加栏百分比来对抗它