在Javascript中循环使用有限的一组颜色,以获得不确定的数据集

在Javascript中循环使用有限的一组颜色,以获得不确定的数据集,javascript,chart.js,Javascript,Chart.js,我正在使用ChartJS显示股票数据。我有七种颜色,我想对这些对象进行迭代。当我添加第八个对象时,我希望它在图表上的颜色是颜色数组中的第一种颜色 $(document).ready(function () { var context = document.getElementById('positions_chart'); var ctx = context.getContext("2d"); var quantities = []; $("#positions_chart

我正在使用ChartJS显示股票数据。我有七种颜色,我想对这些对象进行迭代。当我添加第八个对象时,我希望它在图表上的颜色是颜色数组中的第一种颜色

$(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在背景中做的就是在股票中循环分配新的颜色。我面临的问题是,当股票数量颜色数量我希望颜色数组从顶部重置。因此,图表中的新对象没有空白颜色。

您可以使用双链接列表切换颜色数组

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

datasets: [{backgroundColor: (() => {
  let bgcolors = [];
  for (let i=0; i < tickers.length; ++i) bgcolors.push(colors[i % colors.length]);
  return bgcolors;
  })()
}]
数据集:[{backgroundColor:(()=>{
设bgcolors=[];
对于(i=0;i
就是这样。非常感谢。