簡單好用的HTML5 Chart

各位是不是經常都要使用圖表呢?

Likeboy今天就來介紹一個穩定的HTML5 OpenSource...

Likeboy的發展中一直很強調開發效率,因為我們一直都使用非常有限的資源來做最大的效益,而針對報表圖的部分.最早Likeboy使用了非常簡單的Google Chart,老實說Google 這個API還真的非常簡單好用呢!!

簡單來說只要參考Google一個範例與各式統計圖樣式就可以上手,因此開發者只要想辦法把你要的呈現的數據轉化成Google一樣的格式就好...

不過當你的網站流量成長的時候,Google Chart可能就不會是你最好的選擇,因為Google這幾年在API收費上下了不少功夫啊,很多時候雖然網站真正的流量不到那麼高!但是也是很多喜歡研究你網站的開發者會一直用程式讀取你的網站,因此往往你會因為超過Google的免費額度而花上了一些成本,也因為這樣的原因Likeboy踏上了尋找新的取代方案...

為什麼選擇Chart.js呢?

首先就是這個OpenSource已經非常穩定的版本了,就表示已經很少Bug了,另外網路上評價也不錯!除此之外手機上的呈現效能也是挺好的,這樣針對我們跨平台的服務來說,可以省去不少開發與測試時間....

它主要強打6種Chart,基本上這六種其實挺夠用了,就以Likeboy現在來說只用了Line Chart與Pie Chart兩種,當然大家好奇的是上手度對吧!其實跟Google Chart一樣,只要把範例下載下來後,根據Chart.js他所要的資料格式轉換,就可以用了...

使用步驟:

1.下載檔案且引用到你的網頁內

<script src="Chart.js"</script>

2.新增一個chart吧

html加上

<canvas id="myChart" width="400" height="400"></canvas>

javascript加上

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}
new Chart(document.getElementById("myChart").getContext("2d")).Line(lineChartData);

根據上面的範例,其實你只要調整data:[]的數據就可以了,你可以自己動手條條看,你就會立刻發現圖改變了!

如果你不想要把把畫出圖的動畫關掉,你可以直接設定animation這個參數..

new Chart(document.getElementById("myChart").getContext("2d")).Line(lineChartData,{animation:false});

3.完成...

各位是不是非常簡單呢?所以Likeboy就這樣簡單的產生了這些圖呢~~~

3.補充...

有時候大家可能需要在Pie上顯示文字,這時候官方沒有支援怎麼辦,沒關係Likeboy已經幫你找到解決方案了,因為有網友加上了label,所以可以參考下面參考連結喔...

既然這麼簡單,創業家或開發者,還不快去試試喔....

參考連結:
Chart.js官方網址:http://www.chartjs.org/
Likeboy 使用的Pie Chart是網友改良過的下載網址如下:
https://github.com/nnnick/Chart.js/pull/35
Google Chart官方網址https://developers.google.com/chart/