时间戳

首页 > 解决方案 > 如何让 chart.js 自动为动态标签添加颜色？

javascript - 如何让 chart.js 自动为动态标签添加颜色？

问题描述

我目前正在尝试让 chart.js 2.0 自动为动态标签生成新颜色。用例是我正在使用数据库中的数据制作饼图，其中每一行都是一个新标签，旁边的计数是数据，例如MOVIE | 每部电影的投票。但是，问题在于我不知道会有多少行，因此无法手动输入颜色。我想一个解决方案可能是自动生成颜色，然后使用 for 循环将它们插入。这是我的代码：

function getRandomColor() { //generates random colours and puts them in string
  var colors = "";
  for (var i = 0; i < 3; i++) {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var x = 0; x < 6; x++ ) {
       color += letters[Math.floor(Math.random() * 16)];
   }
   color = "'"+color+"'"+",";
   colors += color;
  }
  colors = colors.slice(0, -1);
  console.log(colors);
  return colors;
 }

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
        getRandomColor() // calls for 3 random colours 
        // e.g. returns '#DDA597','#A95647','#78366A'
    ],
    hoverOffset: 4
  }]
};

我注意到分隔它们的逗号是字符串的一部分，因此它们不能正确分隔颜色。但是，我想不出办法解决这个问题。有谁知道可能的解决方案。甚至是解决这个问题的更好方法。

提前致谢！

标签： javascriptchart.jschart.js2

解决方案

如果您将值立即推送到数组而不是字符串，它将正常工作。

例子：

function getRandomColor() { //generates random colours and puts them in string
  var colors = [];
  for (var i = 0; i < 3; i++) {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var x = 0; x < 6; x++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    colors.push(color);
  }
  return colors;
}

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: getRandomColor(),
    hoverOffset: 4
  }]
};

const options = {
  type: 'pie',
  data
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

推荐阅读