Javascript 迭代rails中chartjs的背景色数组

我正在使用Rails显示一些数据的Chart.js图。我的rails控制器有一个名为

@colors

的数组，我将该数组传递给名为

graphs.js.erb

的JavaScript文件，该文件将显示在视图模板中。这里的一切都很好，我的问题是我的数据点比颜色多，我想继续循环使用相同的

颜色从服务器

数组来显示每个数据点需要多少颜色

所以目前我在一个数组中使用了6种颜色，但我有9个数据要绘制在图表上。我只想回到

colorsFromServer

数组中的第一个元素，并开始将这些颜色推送到

color

数组中

所以最终用9点的数据来绘制颜色应该是

  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)',
  'rgba(255, 206, 86, 0.2)',
  'rgba(75, 192, 192, 0.2)',
  'rgba(153, 102, 255, 0.2)',
  'rgba(255, 159, 64, 0.2)'
   // keeps looping to get the 3 additional colors 
  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)',
  'rgba(255, 206, 86, 0.2)'

在我的Rails控制器中

@colors = [
  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)',
  'rgba(255, 206, 86, 0.2)',
  'rgba(75, 192, 192, 0.2)',
  'rgba(153, 102, 255, 0.2)',
  'rgba(255, 159, 64, 0.2)'
]

Javascript

<% colors_json = @colors.to_json.html_safe %>
var colorsFromServer = <%= colors_json %>;
console.log("colorsFromServer");
console.log(colorsFromServer);

var colors = [];
var color;
for (var i = 0; i < article_data.length; i++) {
  color = colorsFromServer[i];
  colors.push(color);
}
console.log("COLORS");
console.log(colors);

var colorsFromServer=；
console.log（“colorsFromServer”）；
console.log（colorsFromServer）；
var颜色=[]；
颜色变异；
对于（var i=0；i

colors

变量是我在Chart.js中用来绘制具有特定背景颜色的图形的变量。使用Chrome中的开发者工具，您可以看到最后3种颜色是如何未定义的，因为这6种颜色已经被使用过，所以我需要一种方法返回到colorsFromServer阵列的开始，以推送更多颜色

---

您需要分别跟踪颜色索引和数据索引。
如果大于可用颜色数，则重置为零

var colorsFromServer = <%= colors_json %>;
var colors = [];
var color;
var colorIndex = 0;
for (var i = 0; i < article_data.length; i++) {
  if (colorIndex >= colorsFromServer.length) {
    colorIndex = 0;
  }
  color = colorsFromServer[colorIndex];
  colorIndex++;
  colors.push(color);
}

var colorsFromServer=；
var颜色=[]；
颜色变异；
var指数=0；
对于（var i=0；i=colorsFromServer.length）{
颜色指数=0；
}
color=colorsFromServer[colorIndex]；
彩色索引++；
颜色。推送（颜色）；
}

我会这样做，所以你从数组长度的整数除法中取剩余部分，它永远不会计算长度

for (var i = 0; i < article_data.length; i++) {
  color = colorsFromServer[i % colorsFromServer.length];
  colors.push(color);
}

for（var i=0；i