javascript - 分组条形图，在 chart.js 中

Question

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

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

Answer 1

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

请参阅下面两个略有不同的示例，具体取决于您的 Chart.js 版本。

---

图表.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 .

---

图表.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 .