6

我在我的 RoR 项目中使用chartckick来生成图表，效果很好。（连同谷歌图表）。

我创建了一个只有2 个条形图（男性和女性）的柱形图。

在此处输入图像描述

现在客户希望每个条有不同的颜色？那可能吗？

我看过这篇文章 -如何更改使用 Chartkick 创建的柱形图的颜色？但它已经有半年多了，我希望现在有一种方法可以为条形指定更多颜色。

更新

我的代码如下所示：

控制器

@followers_gender_count = Project.find(params[:id]).followers.group(:gender).count

看法

<%= column_chart parse_gender_data(@followers_gender_count) %>

帮手

def parse_gender_data(data)
  gender_data = Hash.new
  gender_data[:male] = data[1]
  gender_data[:female] = data[2]
  ({ 'Male' => gender_data[:male], 'Female' => gender_data[:female] })
end

更新 2 - GitHub 上的问题

4

3 回答 3

8

以下也有效。我不需要初始化程序中的任何新文件（没有 chartkick.rb 文件），只需将以下代码添加到我的帮助文件中即可：

  def networth_data
    [
      {name: "Assets", data: {"NetWorth": 6979.53}}, 
      {name: "Liabilities", data: {"NetWorth": 10532.32}}
    ]
  end

然后在我的 html.erb 中，我指定了我想要的颜色和其他选项：

<%= column_chart networth_data, 
  colors: ["green", "#FF0000"], 
  library: {backgroundColor: "#FFF", height: 265} %>

...呈现此图表：

在此处输入图像描述

于 2015-07-02T05:40:05.063 回答
5

从@buren 在 GitHub 上的评论看来，使用不同的 JSON 结构会在column_cart.

我更改了Helper中的输出：

def parse_gender_data(data)
  gender_data = Hash.new
  gender_data[:male] = data[1]
  gender_data[:female] = data[2]
  [{"name" => "Male","data" => {"Gender" => gender_data[:male]}},{"name" => "Female","data" => {"Gender" => gender_data[:female]}}]
end

并创建了chartkick.rb 配置文件 ( config/initializers/chartkick.rb)，添加了一些颜色：

Chartkick.options = {
  colors: ["#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8"]
}

输出期望的结果：

在此处输入图像描述

于 2015-01-20T08:57:04.643 回答
1

你见过ColumnStyles

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2010', 14, 'color: #76A7FA'],
        ['2020', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

但看看链接那里有一些非常酷的东西

于 2014-12-27T05:43:31.187 回答