Chartkick列图表多种颜色-Java 学习之路

我在我的RoR项目中使用chartckick来生成图表，这非常好用 . （以及Google Charts） .

我用 only 2 bars （男性和女性）创建了一个column chart .

enter image description here

现在客户想要每个酒吧都有不同的颜色？那可能吗？

我已经看过这篇文章 - How to change the color of a Column-chart created with Chartkick?但它希望现在有一种方法可以为条形图指定更多颜色 .

Update

我的代码看起来像：

调节器

@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

Update 2 - Issue on GitHub

3 回答

1
以下也有效 . 我在初始化器中没有任何新文件（没有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} %>
```
...呈现此图表：
回复于 2024-04-28T19:53:14+08:00

从@buren's comment on 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 文件（ config/initializers/chartkick.rb ），添加了一些颜色：

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

哪个输出所需的结果：

enter image description here

回复于 2024-04-28T19:53:14+08:00

你见过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']
      ]);

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

回复于 2024-04-28T19:53:14+08:00

Chartkick列图表多种颜色

3 回答

相关问题