在 rails 中迭代 chartjs 的背景颜色数组

Question

I'm using Rails to display a Chart.js graph of some data. My rails controller has an array called @colors that I pass to a JavaScript file called graphs.js.erb which gets displayed in a view template. Everything is working fine there, my issue is that I have more data points than I do colors and I want to keep looping over the same colorsFromServer array to display however many colors I need for each datapoint.

So currently I'm using 6 colors in an array but I have 9 pieces of data to plot on a chart. I would like to just loop back to the first element in the colorsFromServer array and start pushing those colors into the color array.

So ultimately with 9 points of data to plot the colors should be

  '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)'

In my Rails controller

@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);

the colors variable is what I'm using in Chart.js to draw the graph with certain background colors. using the developer tools in Chrome you can see how the last 3 are undefined because the 6 colors have been already used, so I need a way to get back to the start of the colorsFromServer array to push more colors.

Answer 1

you'll need to keep up with the color index separately from the data index.
then reset to zero if it is greater than the number of colors available.

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);
}

Answer 2

I would do this, so you take the rest from integer division on the length of your array, it will never ecxeed the length.

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