一、簡介

制作圖表有很多的可以選擇，如果想要實現的圖表擁有的是比較直白的關系比較時，可以考慮使用chart.js，如果是制作復雜的圖表建議使用D3進行繪制。它只有六種圖表模式，包括：雷達圖（radar）、極地區(qū)域圖（Polar area）、餅圖（Pie）、環(huán)形圖（Doughnut）、柱狀圖（Bar）和曲線圖（Line）。用起來簡單，做出來的效果也很亮麗。記錄一下rails中使用他的基本過程。
下面上圖看看效果：

雷達圖：

Paste_Image.png

極地區(qū)域圖：

Paste_Image.png

更多請見chart.js 官網

二、安裝

很方便，直接有gem可以安裝。
# 在Gemfile中添加

gem 'chart-js-rails'

# 運行安裝命令

bundle

注： 查看bundle是否成功安裝gem的命令，正常在跑完bundle之后都有以下命令提示。

bundle show [gemname]

三、使用

1、引用

# 在需要制作圖表的頁面對應的.js/.coffee文件
//= require Chart

2、基本參數
chart.js的主要參數其實只有以下四個：
type:'radar(line/bar/others)' => 設置顯示的圖表的類型（以上六種之一）
labels:'['python','ruby','java','c']' => 設置數據分類標簽（如柱狀圖的橫坐標）
label:'中國（/美國/其他）'=> 設置圖例（如餅圖圖例：紅色表示中國）
data:[10,20,30,40,50] => 設置數據值個數與labels對應
除了這四個參數之外，還有設這各種顏色的參數，具體根據每個人的審美進行設置的啦。包括線條的大小、顏色，背景顏色等。
3、結合ajax的實戰(zhàn)案例
當一個頁面需要顯示多個圖表，同時每個圖表需要運算的數據有一定量的時候，采用ajax進行異步加載是個比較常用的解決方案。

# controller
def average_coast
  labels = ["微信紅包", "微信運動", "微信公眾號", "微信小應用"]
  data = [65,59,80,81]
  bg_color = ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)']
  options = {
        type: "bar",
        data: {
            labels: labels,
            datasets: [
                {
                    label: '成本',
                    data: data,
                    backgroundColor: bg_color,
                    borderWidth: 1
                }
            ]
        }
    }

# show.coffee
window.onload = ->
  $.ajax
    type: "GET"
    url: "average_coast"
    success: (options)->
      new Chart($('#average_coast_chart'), {
        type: options.type,
        data: options.data
      });