分组条形图在chart.js中的每个组都有不同的级别

Question

使用char。 JS条形图，First group Car数据（燃料，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'
            }

        ]         
    }

她的参考图片

Answer 1

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

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

这是一个显示我的意思的codepen。

如您所见，每个数据集跨越所有类别（标签）。您不能拥有3个数据集用于＆＃39; car＆＃39; 3个数据集用于＆＃39; Recharge＆＃39;等等。您可能希望做的最好的事情是为数据集不具有的类别设置值0属于，但它使图表看起来很混乱。

以下是显示该内容的example。