He creado un gráfico de barras. Muestra los datos agrupados por Año. He configurado el color para cada tipo de datos, pero ChartJS solo lo muestra en 1 año
ChartJS solo para colorear 1 año
Aquí está el código:
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 } ] };Esto sucede porque está utilizando V2 de la biblioteca y proporciona el color de backgroundColor como una matriz, lo que significa tomar el índice del color en la matriz y asignarlo a esa barra, si no hay color, no use ninguno.
Entonces, cambiar su código a esto resolverá el problema:
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 } ] };