分组条形图每组在chart.js中的不同级别答案

【问题标题】：Grouped bar charts each group different level in chart.js分组条形图每组在chart.js中的不同级别
【发布时间】：2017-03-03 06:43:11
【问题描述】：

使用字符。 JS条形图，第一组汽车数据（燃料，EMI，服务），每组有单独的标签如何拆分组单独的标签

let randomScalingFactor = function(){ return Math.round(Math.random()*5000)};
    return {
      labels: ["car","Recharge","Food","May","June","July"],
      datasets : [
            {
                fillColor : 'rgba(220,220,220,0.8)',
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],
        labels: ["fuel","Emi","service"],
            },
      {
                fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ],
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],
        labels: ["DTH","postpaid","prepaid"],
            },
            {
                fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ],
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],label: 'sadf'
            }

        ]         
    }

她的参考图片

【问题讨论】：

标签： javascript arrays json bar-chart chart.js

【解决方案1】：

您看不到工具提示标签的原因是您使用了不正确的标签配置选项。该选项称为 label 而不是 labels 并且只接受单个字符串（不是字符串数组）。如果您将字符串数组传递给label，那么chart.js 只需为数组中的每个索引组合一个逗号分隔的字符串作为标签。

话虽如此，我可以看到您正在尝试做什么，但不幸的是，使用 Chart.js 无法做到这一点。数据集始终代表每个类别标签的数据值。换句话说，数据集data 数组中的每个索引都映射到labels 数组（在数据集外部定义）中的相同索引。

这是一个codepen 来说明我的意思。

如您所见，每个数据集跨越所有类别（标签）。您不能有 3 个用于“汽车”的数据集、3 个用于“充电”的数据集等。您希望做的最好的事情是为数据集不属于的类别设置值 0，但这会使图形看起来很令人困惑。

这是一个example 表明这一点。

【讨论】：