Автоматический селектор цвета фона Chart.js в приложении Django

Я работаю над приложением Django с диаграммами chart.js и пытаюсь использовать функцию для автоматического изменения цвета всех меток. Но когда я запускаю приложение, она окрашивает только одну метку, а остальные делает прозрачными. Я попробовал изменить его с меток на данные и получил тот же результат.

Трудно поделиться кодом, так как он извлекает данные из приложения, поэтому я поделюсь тем, что могу.

Вот код генератора случайных цветов:

const labels = ['Category Types'];
const backgroundcolor = [];
const bordercolor = [];
for (i = 0; i < labels.length; i++) {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  backgroundcolor.push("rgba(" + r + ", " + g + ", " + b + ", 1)");
  bordercolor.push("rgba(" + r + ", " + g + ", " + b + ", 1)");
}

Вот код графика:

var categoryTypes = JSON.parse(document.getElementById('category_types').textContent)
var transactionAmountSum = JSON.parse(document.getElementById('transactionAmountSum').textContent)
console.log('categoryTypes', categoryTypes)
console.log('transactionAmountSum', transactionAmountSum)
$(document).ready(function() {
  var ctx = document.getElementById('myChart1').getContext('2d');
  var myCategory = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: categoryTypes,
      datasets: [{
        label: 'Category Types',
        data: transactionAmountSum,
        backgroundColor: [backgroundcolor],
        borderColor: [
          '#fff',
        ],
        borderWidth: 1
      }]
    },
    options: {
      legend: {},
      scales: {
        y: {
          beginAtZero: true
        }
      },
    }
  });
});

Изображение результата:

enter image description here

Основная проблема, которую я могу выделить, заключается в том, что backgroundColor уже является array, а вы заворачиваете его в другой

Просто измените эту строку (уберите квадратные скобки) 

 ...
 backgroundColor: [backgroundcolor],
 ...

в конфигурации данных к этому

...
backgroundColor: backgroundcolor, // <- No square brackets
...

и это должно исправить проблему с цветом.

Вернуться на верх