如何为svg-graph gem生成的图表各组件设置自定义颜色？

当数据系列数量超过gem默认的颜色池后，后续系列会默认显示黑色，你可以通过两种方式自定义颜色：

1. 单个数据系列单独指定颜色 #

调用add_data时，直接在参数哈希里加入:fill（柱体填充色）和:stroke（柱体边框色）参数，支持十六进制颜色值或标准颜色名称：

require 'SVG/Graph/Bar'

x_axis = ['1-10', '10-30', '30-50', '50-70', 'older']

options = {
  :width             => 640,
  :height            => 300,
  :stack             => :side,
  :fields            => x_axis,
  :graph_title       => "kg per head and year chocolate consumption",
  :show_graph_title  => true,
  :show_x_title      => true,
  :x_title           => 'Age in years',
  :show_y_title      => true,
  :y_title           => 'kg/year',
  :y_title_location  => :end,
  :no_css            => true
}

male_data   = [2, 4, 6, 4, 2]
female_data = [1, 5, 4, 5, 2.7]

g = SVG::Graph::Bar.new(options)

# 给Female系列设置粉色填充和深色边框
g.add_data( {
    :data => female_data,
    :title => "Female",
    :fill => "#ff6b6b",
    :stroke => "#e05555"
  })
# 给Male系列设置蓝绿色填充和深色边框
g.add_data( {
    :data => male_data,
    :title => "Male",
    :fill => "#4ecdc4",
    :stroke => "#3bb8ae"
  })

File.open('bar.svg', 'w') {|f| f.write(g.burn_svg_only)}

2. 全局预设颜色池 #

如果需要添加大量数据系列，逐个设置颜色太麻烦，可以在初始化图表时，通过:colors选项传入一组颜色，gem会按顺序自动为每个数据系列分配颜色：

options = {
  :width             => 640,
  :height            => 300,
  :stack             => :side,
  :fields            => x_axis,
  :graph_title       => "kg per head and year chocolate consumption",
  :show_graph_title  => true,
  :show_x_title      => true,
  :x_title           => 'Age in years',
  :show_y_title      => true,
  :y_title           => 'kg/year',
  :y_title_location  => :end,
  :no_css            => true,
  # 预设5种颜色，覆盖多个数据系列需求
  :colors => ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffcc5c"]
}

# 后续添加数据系列无需单独设置颜色，自动使用预设数组里的颜色
g.add_data( { :data => female_data, :title => "Female" })
g.add_data( { :data => male_data, :title => "Male" })
# 新增系列也会沿用预设颜色，不会变黑
g.add_data( { :data => [3,5,7,5,3], :title => "Child" })

补充说明 #

• 若是线条类图表（比如SVG::Graph::Line），主要通过:stroke设置线条颜色，若需要填充线条下方区域，也可设置:fill参数。
• 颜色值支持多种格式：十六进制（#ff0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）或标准颜色名称（red）。

内容的提问来源于stack exchange，提问作者Veron13