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在后台循环使用代码循环来分配新颜色。我面临的问题是当代码金额＆gt; 颜色数量我希望颜色数组从顶部重置。因此，我不会在图表中为新对象添加空白颜色。

Answer 1

您可以使用双向链接列表切换colors数组。

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

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

在Javascript中循环使用有限的颜色集以获得无限的数据集

1 个答案: