为什么我的 ChartJs 只为一个部分着色？

Question

我创建了一个条形图。它显示按年份分组的数据。我已经为每种数据类型设置了颜色，但 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
            }
          ]
    };

Answer 1

发生这种情况是因为您正在使用 lib 的 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
            }
          ]
    };

为什么我的 ChartJs 只为一个部分着色？

Why my ChartJs only Coloring one section?

javascript

chart.js