时间戳

首页 > 解决方案 > 为什么这个 Chart.js 图表没有显示正确的颜色？

javascript - 为什么这个 Chart.js 图表没有显示正确的颜色？

问题描述

我正在使用 Chart.js 每月显示来自两个数据集的条形图，以显示某些数据的演变。现在的问题是 Chart.js 显示这些条的方式。

图形

var myChartIBM = new Chart(ctx1, {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
        datasets: [{
            label: "Número de entregas",
            data: entregas,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        },
        {
            label: "Número de reversas",
            data: reversas,
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }
    ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 500
                }
            }],
            xAxes: [{
                        type: 'time',
                        distribution: 'series',
                        offset: true,
                        ticks: {
                            source: 'data'
                        },
                        time: {
                            unit: 'month',
                            tooltipFormat: 'll'
                        }
                    }]
        },
        tooltips: {
            mode: 'x', // optional
            callbacks: {
              title: function(tooltipItems, data) {
                let tI = tooltipItems[0];
                return data.datasets[tI.datasetIndex].data[tI.index].x;
              }
            }
        },
        plugins: {
            datalabels: {
                formatter: function(value, context) {
                        return value['y'];
                }
            }
        },
        responsive: true,
        maintainAspectRatio: true
    }
});

我的疑问是为什么它在第一个数据集之后显示为灰色，我该怎么做才能解决这个问题。也许我应该总是加一个零？

这是生成数据的 PHP 端代码：

$col_entregas = Device::select(DB::raw("count(serial) as cantidad, year(fecha_recepcion) as year, month(fecha_recepcion) as month"))->whereNotNull('fecha_recepcion')->whereNotNull('guia_recepcion')->groupBy('year', 'month')->orderBy('year', 'asc')->orderBy('month', 'asc')->get();
    $col_reversas = Device::select(DB::raw("count(serial) as cantidad, year(fecha_reversa) as year, month(fecha_reversa) as month"))->whereNotNull('fecha_reversa')->whereNotNull('guia_reversa')->groupBy('year', 'month')->orderBy('year', 'asc')->orderBy('month', 'asc')->get();

    $ar_entregas = [];
    $ar_reversas = [];
    $meses_grafico =  [];
    foreach($col_entregas as $entrega)
    {
        $fecha = $entrega->year . '-' . $entrega->month;
        $meses_grafico[] = $fecha;
        $ar_entregas[] = ["x" => $fecha,
                          "y" => $entrega->cantidad];
    }
    foreach($col_reversas as $reversa)
    {
        $fecha = $reversa->year . '-' . $reversa->month;
        $ar_reversas[] = [
            "x" => $fecha,
            "y" => $reversa->cantidad];
    }

标签： javascriptchart.js

解决方案

所以我不得不添加一个 foreach 来为两个数组中的每个条目添加相同的颜色，从而解决了这个问题：

已修复问题

var colors_entregas = [];
var border_entregas = [];
entregas.forEach(function (el){
    colors_entregas.push('rgba(255, 99, 132, 0.2)');
    border_entregas.push('rgba(255, 99, 132, 1)');
});
var colors_reversas = [];
var border_reversas = [];

reversas.forEach(function (el){
    colors_reversas.push('rgba(54, 162, 235, 0.2)');
    border_reversas.push('rgba(54, 162, 235, 1)');
});

在每个数据集中：

data: entregas,
backgroundColor: colors_entregas,
borderColor: border_entregas,

推荐阅读