2016-07-25 48 views
-1

我有3個部分section1,section2,section3,每個部分有3個部分正確,不正確和錯誤,然後每個部分在軌道中都有3個子部分H,M,L。查看軌道圖中的數據

{"section1"=>{"correct"=>{"h"=>"2", "m"=>"4", "l"=>"6"}, 
"wrong"=>{"h"=>"7", "m"=>"6", "l"=>"7"}, "blank"=>{"h"=>"5", 
"m"=>"7", "l"=>"9"}}, "section2"=>{"correct"=> 
{"h"=>"3", "m"=>"1", "l"=>"2"}, "wrong"=>{"h"=>"2", "m"=>"2", 
"l"=>"2"}, "blank"=>{"h"=>"4", "m"=>"2", "l"=>"4"}}, "section3"=> 
{"correct"=>{"h"=>"3", "m"=>"2", "l"=>"4"}, "wrong"=>{"h"=>"4", 
"m"=>"4", "l"=>"6"}, "blank"=>{"h"=>"6", "m"=>"7", "l"=>"5"}}} 

我想表明大約在表示圖形或者使用d3.js或谷歌圖表和我不知道怎麼給,可有人請建議這樣做的方式。 在此先感謝。

+0

不確定d3.js但融合的圖表具有軌包裝在它https://github.com/ fusioncharts/rails-wrapper –

+0

而且它很容易實現 –

回答

0

Chartkick提供一個整潔的方式,採取哈希和使用谷歌要麼圖表或Highcharts顯示它們:

https://github.com/ankane/chartkick

有上述GitHub的頁中的實例和文檔。

1

有融合圖表上有一個鐵軌包裝。它是易於使用的 只是初始化一個新的對象

控制器

class DashboardController < ApplicationController 

    def index 

    @chart = Fusioncharts::Chart.new({ 
     width: "600", 
     height: "400", 
     type: "mscolumn2d", 
     renderAt: "chartContainer", 
     dataSource: { 
      chart: { 
      caption: "Comparison of Quarterly Revenue", 
      subCaption: "Harry's SuperMart", 
      xAxisname: "Quarter", 
      yAxisName: "Amount ($)", 
      numberPrefix: "$", 
      theme: "fint", 
      exportEnabled: "1", 
      }, 
      categories: [{ 
        category: [ 
         { label: "Q1" }, 
         { label: "Q2" } 
        ] 
       }], 
       dataset: [ 
        { 
         seriesname: "Previous Year", 
         data: [ 
          { value: "10000" }, 
          { value: "11500" } 
         ] 
        }, 
        { 
         seriesname: "Current Year", 
         data: [ 
          { value: "25400" }, 
          { value: "29800" } 
         ] 
        } 
       ] 
     } 
    }) 

    end 

end 

查看

<h3>My Chart</h3> 
<div id="chartContainer"><%= @chart.render() %></div> 

就是這樣

輸出

enter image description here

小提琴

http://jsfiddle.net/fusioncharts/zKL3F/

GitHub的

https://github.com/fusioncharts/rails-wrapper