ChartJS 为什么我的ChartJ只对一个部分着色?

xkrw2x1b  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(205)

我创建了一个条形图。它显示按年份分组的数据。我为每个数据类型设置了颜色,但ChartJS只显示1年的数据类型
ChartJS only Coloring 1 Year
下面是代码:

const data = {
      labels: Syear,
            datasets: [{
                label: 'Jumlah Korban Meninggal 5 Tahun terakhir',
                data: Sdead_total,
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 1
            },
            {
                label: 'Jumlah Korban Hilang 5 Tahun terakhir',
                data: Smissing_total,
                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
                borderColor: ['rgba(54, 162, 235, 1)'],
                borderWidth: 1
            },
            {
                label: 'Jumlah Korban Luka Berat 5 Tahun terakhir',
                data: Sserious_woundTotal,
                backgroundColor: ['rgba(255, 206, 86, 0.2)'],
                borderColor: ['rgba(255, 206, 86, 1)'],
                borderWidth: 1
            },
            {
                label: 'Jumlah Korban Luka Ringan 5 Tahun terakhir',
                data: Sminor_injuriesTotal,
                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                borderColor: ['rgba(75, 192, 192, 1)'],
                borderWidth: 1
            }
          ]
    };
uubf1zoe

uubf1zoe1#

发生这种情况是因为您使用了库的V2,并将backgroundColor作为数组提供,这意味着获取数组中颜色的索引并将其分配给该条,如果没有颜色,则不使用任何颜色。
因此,将您的代码更改为以下代码将解决此问题:

const data = {
      labels: Syear,
            datasets: [{
                label: 'Jumlah Korban Meninggal 5 Tahun terakhir',
                data: Sdead_total,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            },
            {
                label: 'Jumlah Korban Hilang 5 Tahun terakhir',
                data: Smissing_total,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            },
            {
                label: 'Jumlah Korban Luka Berat 5 Tahun terakhir',
                data: Sserious_woundTotal,
                backgroundColor: 'rgba(255, 206, 86, 0.2)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1
            },
            {
                label: 'Jumlah Korban Luka Ringan 5 Tahun terakhir',
                data: Sminor_injuriesTotal,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }
          ]
    };

相关问题