分组条形图，在 chart.js 中

2022-01-22 00:00:00 javascript chart.js

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

I've seen other javascript charting libraries that supported grouped barcharts, of the sort in the image below. I've not seen this as an explicit option in chart.js's online editor.

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

Is it possible to do grouped bar charts of this sort in chart.js? Is it easy? Is there a template for it in their online editor?

推荐答案

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

Yes, you can provide multiple data sets using the datasets property, which is an array of containing groupings of values. Each data set contains a series of values in data that correspond to the labels.

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

See two slightly different examples below depending on your version of Chart.js.

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

请参阅此 JSFiddle.

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

请参阅此 JSFiddle.

相关文章