Подтвердить что ты не робот

Сгруппированные гистограммы, в chart.js

Я видел другие графические библиотеки javascript, которые поддерживали сгруппированные штрих-диаграммы, сорта на изображении ниже. Я не видел это как явный вариант в онлайн-редакторе chart.js.

Можно ли группировать гистограммы этого типа в chart.js? Это легко? Есть ли шаблон для него в своем онлайн-редакторе?

Ответ 1

Да, вы можете предоставить несколько наборов данных, используя свойство datasets, которое представляет собой массив, содержащий группы значений. Каждый набор данных содержит ряд значений в data которые соответствуют labels.

Смотрите два немного разных примера ниже в зависимости от вашей версии 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 });

Смотрите это 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,
                }
            }]
        }
    }
});

Смотрите это JSFiddle.