Создание диаграммы с накоплением групп из ChartsJs, которая не отображает то, как я хочу, чтобы она отображалась - PullRequest
Новая
       17

Создание диаграммы с накоплением групп из ChartsJs, которая не отображает то, как я хочу, чтобы она отображалась

1 голос
/ 14 октября 2019

Я учусь, как включить Chart.js Столбчатая диаграмма с накоплением (с группами) в мое приложение.

Я использую 3 набора данных, один из которых сложен поверх другого, а третий стоит один. Я просмотрел документацию и попытался ее построить, но все 3 набора данных сложены друг на друга, чего я не хочу.

Может кто-нибудь просмотреть мой файл сценария ниже и сообщить мне, что может быть не так? Вот ссылка на репо из Chart.js. Если вы хотите увидеть, что я пытаюсь построить, нажмите на ссылку диаграммы группирования. 

$(function () {
    new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
    new Chart(document.getElementById("stackedgroup_chart").getContext("2d"), getChartJs('stackedgroup'));
});


function getChartJs(type) {
    var config = null;

    if (type === 'line') {
        config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May"],
                datasets: [{
                    label: "Refund",
                    data: [65, 59, 80, 45, 56],
                    borderColor: 'rgba(0, 188, 212, 0.75)',
                    backgroundColor: 'rgba(0, 188, 212, 0.3)',
                    pointBorderColor: 'rgba(0, 188, 212, 0)',
                    pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
                    pointBorderWidth: 1
                }
                ]
            },
            options: {
                responsive: true,
                legend: false
            }

        }
    }
    else if (type === 'stackedgroup') {
        config = {
            type: 'bar',
            data: {
                labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
                datasets: [{
                    label: 'Dataset 1',
                    backgroundColor: 'rgba(0, 188, 212, 0.8)',
                    stack: 'Stack 0',
                    data: [0, 10, -20, 30, 40, 50, 60, 70],
                }, {
                    label: 'Dataset 2',
                    backgroundColor: 'rgba(233, 30, 99, 0.8)',
                    stack: 'Stack 1',
                    data: [70, 60, 50, 40, 30, -20, 10, 0],
                }, {
                    label: 'Dataset 3',
                    backgroundColor: 'rgba(255, 209, 0, 0.8)',
                    stack: 'Stack 1',
                    data: [-30, 30, 30, 30, 30, 30, -30]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Stacked Group Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }

            }
        }
    }

    return config;
}
...