javascript - 在 Javascript 中循环遍历有限的颜色集以获取不确定的数据集

Question

我正在使用 ChartJS 来显示股票数据。我有七种颜色要遍历对象。当我添加第 8 个对象时，我希望它在图表上的颜色是颜色数组中的第一个颜色。

$(document).ready(function () {
  var context = document.getElementById('positions_chart');
  var ctx = context.getContext("2d");

  var quantities = [];
    $("#positions_chart").data('positions').forEach(function(element){
      quantities.push(element['quantity']);
  });

  var colors =[ "#FFCE56",
            "#FFA75D",
            "#46BFBF",
            "#5975CB",
            "#FF5D5D",
            "#FFCC5D",
            "#52DF52",
            'black'
];

  var tickers = [];
  $("#positions_chart").data('positions').forEach(function(element){
    tickers.push(element['ticker']);
  });



  var pieData = {
    labels: tickers,
    datasets: [
    {
      backgroundColor: [
            "#FFCE56",
            "#FFA75D",
            "#46BFBF",
            "#5975CB",
            "#FF5D5D",
            "#FFCC5D",
            "#52DF52",
            'black'

          ],
      borderColor: "rgba(220,220,220,1)",
      data: quantities
  }  
]
}

var chartInstance = new Chart(ctx, {
    type: 'doughnut',
    data: pieData,
    options: {
        responsive: true
    }
});

代码的数量表明有多少对象需要图表上的颜色。 ChartJS 在后台循环通过代码分配新的颜色。我面临的问题是当 tickers amount> colours amount 我希望颜色数组从顶部重置。所以我没有为图表中的新对象设置空白颜色。

Answer 1

您可以使用双向链表切换颜色数组。

或者只是在对象创建时使用匿名函数，

datasets: [{backgroundColor: (() => {
  let bgcolors = [];
  for (let i=0; i < tickers.length; ++i) bgcolors.push(colors[i % colors.length]);
  return bgcolors;
  })()
}]