时间戳

首页 > 解决方案 > 迭代rails中chartjs的一组背景颜色

javascript - 迭代rails中chartjs的一组背景颜色

问题描述

我正在使用 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 数组的开头以推送更多颜色。

在此处输入图像描述

标签： javascriptruby-on-railsgoogle-visualization

解决方案

您需要与数据索引分开跟踪颜色索引。
如果它大于可用颜色的数量，则重置为零。 

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

推荐阅读