Гистограмма ChartJS - PullRequest
1 голос
/ 05 ноября 2019

У меня есть гистограмма, сгенерированная библиотекой chartJs. Где в этой таблице у меня есть три набора значений. Однако последняя строка справа не отображается. Что я могу сделать не так?

<div class="col-12">
            <div class="card">
                <canvas id="chartAvgDailyConsumReport" width="100" height="40"></canvas>
            </div>
        </div>

enter image description here

Уже пытались отключить опцию отзывчивости, отрегулируйте размер графика. Тем не менее, ни один из этих вариантов не удалось.

function setChartReportAvgDailyConsum(data){
    var ctx = document.getElementById("chartAvgDailyConsumReport");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data[0].date,
            datasets: [{
                data: data[0].value,
                label: "Ambiente 1",
                backgroundColor: 'rgba(148, 151, 247, 0.6)',
                borderColor: 'rgba(148, 151, 247, 1)'
            },{
                data: data[1].value,
                label: "Ambiente 2",
                backgroundColor: 'rgba(89, 179, 102, 0.6)',
                borderColor: 'rgba(89, 179, 102, 1)'
            },{
                data: data[2].value,
                label: "Ambiente 3",
                backgroundColor: 'rgba(230, 137, 83, 0.6)',
                borderColor: 'rgba(230, 137, 83, 1)'
            },{
                data: data[3].value,
                label: "Ambiente 4",
                backgroundColor: 'rgba(243, 119, 171, 0.6)',
                borderColor: 'rgba(243, 119, 171, 1)'
            }]
        },
        options: {
            responsive: true,
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display:     true,
                        labelString: 'Consumo (watts)'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display:     true,
                        labelString: 'Histórico do consumo médio diário dos últimos 30 dias'
                    },
                    type: 'time',
                    time: {
                        unit: 'day',
                        round: 'day',
                        displayFormats: {
                          day: 'D MMM'
                        }
                    }
                }]
            }
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...