web-dev-qa-db-fra.com

Diagrammes à barres groupées, dans chart.js

J'ai vu d'autres bibliothèques de création de diagrammes javascript prenant en charge les diagrammes à barres groupés, du type présenté dans l'image ci-dessous. Je n'ai pas vu cela comme une option explicite dans l'éditeur en ligne de chart.js.

Est-il possible de faire des diagrammes à barres groupés de ce type dans chart.js? Est-ce facile? Y at-il un modèle pour cela dans leur éditeur en ligne?

javascriptchart.js
49
Jeff Dege

Oui, vous pouvez fournir plusieurs ensembles de données en utilisant la propriété datasets, qui est un tableau contenant des groupes de valeurs. Chaque ensemble de données contient une série de valeurs dans data qui correspondent à labels.

Voir deux exemples légèrement différents ci-dessous en fonction de votre version de 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 });

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

Voir ce JSFiddle .

84
Jacob Budin