перебрать массив цветов фона для графиков в рельсах - PullRequest
Новая
       9

перебрать массив цветов фона для графиков в рельсах

0 голосов
/ 05 ноября 2018

Я использую Rails для отображения графика Chart.js с некоторыми данными. У моего контроллера rails есть массив с именем @colors, который я передаю в файл JavaScript с именем graphs.js.erb, который отображается в шаблоне представления. Там все работает нормально, моя проблема в том, что у меня больше точек данных, чем у цветов, и я хочу продолжать цикл по одному и тому же массиву colorsFromServer, чтобы отображать столько цветов, сколько мне нужно для каждой точки данных.

Так что в настоящее время я использую 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);

переменная colors - это то, что я использую в Chart.js для рисования графика с определенными цветами фона. Используя инструменты разработчика в Chrome, вы можете увидеть, как последние 3 не определены, потому что 6 цветов уже использованы, поэтому мне нужен способ вернуться к началу массива colorsFromServer, чтобы добавить больше цветов.

enter image description here

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Я бы сделал это, поэтому вы берете остаток от целочисленного деления на длину вашего массива, он никогда не заменит длину. 

for (var i = 0; i < article_data.length; i++) {
  color = colorsFromServer[i % colorsFromServer.length];
  colors.push(color);
}
0 голосов
/ 05 ноября 2018

вам нужно идти в ногу с индексом цвета отдельно от индекса данных.
затем сбросьте на ноль, если он превышает количество доступных цветов. 

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