chart.js中的分组条形图 [英] Grouped bar charts, in 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?

推荐答案

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

Yes, you can provide multiple datasets using the datasets property, which is an array of containing groupings of values. Each dataset 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: "Harpo",
            fillColor: "blue",
            data: [3,7,4]
        },
        {
            label: "Chico",
            fillColor: "red",
            data: [4,3,5]
        },
        {
            label: "Groucho",
            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: "Harpo",
            backgroundColor: "blue",
            data: [3,7,4]
        },
        {
            label: "Chico",
            backgroundColor: "red",
            data: [4,3,5]
        },
        {
            label: "Groucho",
            backgroundColor: "green",
            data: [7,2,6]
        }
    ]
};

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

参见这个JSFiddle 。

这篇关于chart.js中的分组条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！