Javascript 分组条形图，在chart.js中

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

是否可以在chart.js中创建此类分组条形图？容易吗？在他们的在线编辑器中有它的模板吗

---

是的，您可以使用

数据集

属性提供多个数据集，该属性是一个包含值分组的数组。每个数据集在

数据

中包含一系列与

标签

相对应的值

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

---

Chart.jsv1.x 看

---

Chart.js v2.x

---

请参阅。

最后一行中的语法抛出错误：Bar不是函数；我正在使用Chart.min.js 2.2.1。@TobiG。我添加了一个Chart.js v2.x示例。@Jacub Budin Chart.js v2.x示例无法正确呈现。对于香草，没有绿色条。@Shahid，这是因为Y轴最小值为

2

——这是Chart.js的默认行为，即采用最小值，而不是如您所期望的

0

。我已经更新了示例以使其更清晰，但渲染正确。我想知道您是如何找到这些信息的。我在文档中找不到。

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 });

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,
                }
            }]
        }
    }
});