分组条形图，在 chart.js 中

Posted 2023-02-16

【中文标题】分组条形图，在 chart.js 中

【英文标题】：Grouped bar charts, in chart.js

【发布时间】：2015-03-26 16:20:50

【问题描述】：

我见过其他支持分组条形图的 javascript 图表库，如下图所示。在 chart.js 的在线编辑器中，我没有将其视为明确的选项。

是否可以在 chart.js 中进行这种分组条形图？这简单吗？他们的在线编辑器中有模板吗？

【参考方案1】：

是的，您可以使用datasets 属性提供多个数据集，该属性是一个包含值分组的数组。每个数据集都包含data 中与labels 对应的一系列值。

根据您的 Chart.js 版本，请参阅下面两个略有不同的示例。

---

Chart.js v1.x

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

var data = 
    labels: ["Chocolate", "Vanilla", "Strawberry"],
    datasets: [
        
            label: "Blue",
            fillColor: "blue",
            data: [3,7,4]
        ,
        
            label: "Red",
            fillColor: "red",
            data: [4,3,5]
        ,
        
            label: "Green",
            fillColor: "green",
            data: [7,2,6]
        
    ]
;

var myBarChart = new Chart(ctx).Bar(data,  barValueSpacing: 20 );

见this JSFiddle。

---

Chart.js v2.x

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

var data = 
    labels: ["Chocolate", "Vanilla", "Strawberry"],
    datasets: [
        
            label: "Blue",
            backgroundColor: "blue",
            data: [3,7,4]
        ,
        
            label: "Red",
            backgroundColor: "red",
            data: [4,3,5]
        ,
        
            label: "Green",
            backgroundColor: "green",
            data: [7,2,6]
        
    ]
;

var myBarChart = new Chart(ctx, 
    type: 'bar',
    data: data,
    options: 
        barValueSpacing: 20,
        scales: 
            yAxes: [
                ticks: 
                    min: 0,
                
            ]
        
    
);

见this JSFiddle。

【讨论】：

最后一行的语法抛出错误：Bar is not a function；我正在使用 Chart.min.js 2.2.1。

@TobiG。我添加了一个 Chart.js v2.x 示例。

@Jacub Budin Chart.js v2.x 示例无法正确呈现。对于香草，没有绿条。

@Shahid 那是因为 Y 轴的最小值是 2——这是 Chart.js 采用最小值的默认行为——而不是你所期望的 0。我更新了示例以使其更清晰，但它呈现正确。

我想知道您是如何找到这些信息的。我在文档上找不到。