如何将数组中的相同背景颜色用于 chartjs 中的未知数据？

Question

我正在通过 chartjs 生成条形图。我有一个预定义的 backgroundcolor 数组，有 5 种颜色。我不知道我从 sql 查询中获得了多少数据。但我想使用预定义的背景色。一旦我有超过 5 个数据记录，其他条形图就无法正确显示。小节 1 到 5 正确显示。 5 之后的所有柱状图都显示为 grey/black。我怎么能意识到，#6 栏获得#1 的背景颜色，#7 获得#2 的背景颜色，依此类推...？

var chartdata = {
labels: name,
datasets: [{
    label: 'My Label here',
    //backgroundColor: ['#3066be', '#2de1c2','#87bcde','#907ad6','#845a6d'],
    backgroundColor:[
        "rgba(255, 159, 64, 0.2)", //orange
        "rgba(255, 205, 86, 0.2)", //yellow
        "rgba(75, 192, 192, 0.2)", // green
        "rgba(54, 162, 235, 0.2)", // blue
        "rgba(153, 102, 255, 0.2)"], //purple
    borderColor:[
        "rgb(255, 159, 64)", //orange
        "rgb(255, 205, 86)", //yellow
        "rgb(75, 192, 192)", //green
        "rgb(54, 162, 235)", //blue
        "rgb(153, 102, 255)"], //purple
    borderWidth: 2,
    hoverBackgroundColor: [
        "rgba(255, 159, 64, 0.4)", //orange
        "rgba(255, 205, 86, 0.4)", //yellow
        "rgba(75, 192, 192, 0.4)", // green
        "rgba(54, 162, 235, 0.4)", // blue
        "rgba(153, 102, 255, 0.4)"], //purple
    data: marks
    }]};

Answer 1

首先，您在图表配置之外定义 data 和 color 数组。然后您可以使用以下函数生成具有重复颜色的新数组：

function repeatColors(data, colors) {
  var result = [];
  for (var i = 0; i < data.length; i++) {
    result.push(colors[i % colors.length]);
  }
  return result;
}

请看下面的代码示例：

var labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'];
var data = [8, 7, 5, 4, 3, 6, 2, 5, 7, 3, 8, 4, 6];
var bgColors = [
  "rgba(255, 159, 64, 0.2)", //orange
  "rgba(255, 205, 86, 0.2)", //yellow
  "rgba(75, 192, 192, 0.2)", // green
  "rgba(54, 162, 235, 0.2)", // blue
  "rgba(153, 102, 255, 0.2)" //purple
];
var borderColors = [
  "rgb(255, 159, 64)", //orange
  "rgb(255, 205, 86)", //yellow
  "rgb(75, 192, 192)", //green
  "rgb(54, 162, 235)", //blue
  "rgb(153, 102, 255)" //purple
];
var hoverBgColors = [
  "rgba(255, 159, 64, 0.4)", //orange
  "rgba(255, 205, 86, 0.4)", //yellow
  "rgba(75, 192, 192, 0.4)", // green
  "rgba(54, 162, 235, 0.4)", // blue
  "rgba(153, 102, 255, 0.4)" //purple    
];

function repeatColors(data, colors) {
  var result = [];
  for (var i = 0; i < data.length; i++) {
    result.push(colors[i % colors.length]);
  }
  return result;
}

new Chart(document.getElementById('canvas'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: repeatColors(data, bgColors),
      borderColor: repeatColors(data, borderColors),
      borderWidth: 2,
      hoverBackgroundColor: repeatColors(data, hoverBgColors)
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>

Answer 2

我错误地使用了 ajax 请求。所以我无法确定来自请求的数据的长度。我是这样解决的：

$.post("some_file.php", '', function(data) {
    iDependOnMyParameter(data);
});

function iDependOnMyParameter(param) {
    // You should do your work here that depends on the result of the request!
    alert(param)
}

如何将数组中的相同背景颜色用于 chartjs 中的未知数据？

How to use same backgroundcolors out of an array to unknown data in chartjs?

javascript

chart.js

chartjs-2.6.0