ChartJS条形图

时间:2019-11-05 12:13:09

标签: javascript charts

我有一个由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'
                        }
                    }
                }]
            }
        }
    });
}

0 个答案:

没有答案