呼摸的家

初探 HighCharts  畫報表圖的好幫手 教學

1.簡介
HighCharts是一個基於JavaScript的圖表元件，目前也是十分流行的，它的優點很多，包括免費(非商業使用)、輕巧、快速等等。目前在它的首頁中包含兩個產品，HighCharts和HighStock。

HighCharts提供了幾乎所有常用的圖型：長條圖、圓餅圖、折線圖、散佈圖等等，每種圖表還提供多種變型和額外的自定項目，可以輕鬆的打造出專屬的圖表。

想要瞭解HighCharts，可以前往官方網站：http://www.highcharts.com。

2.下載及安裝
HighCharts是基於JQuery的，所以要使用HighCharts之前必需要先安裝JQuery。參考JQuery的官方網站：http://jquery.com/。

在HighCharts的官網中下載HighCharts元件，並在HTML中引用。如下：

<script src="/js/highcharts.js" type="text/javascript"></script>

3.建立圖表

首先必需的是在網頁中建立一個目標div，作為放置圖表的地方，您可以先指定它的大小，HighCharts預設會自動調整大小來適應目標的div設定。


在您的js檔中加入javascript程式碼來增加圖表，以下是官網範例：
var chart1; // 這是一個全域變數
$(document).ready(function() {//頁面載入後立刻執行，可以替換成需要的條件
      chart1 = new Highcharts.Chart({//chart1就是這個圖表本身，可以在建立完成後操作
         chart: {
            renderTo: 'container',//目標的div
            type: 'bar'//圖表的種類
         },
         title: {
            text: 'Fruit Consumption'//標題
         },
         xAxis: {//x軸
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {//y軸
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{//這裡是圖表的資料
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

上面的程式因為是範例的關係...是在網頁載入後立刻畫圖，當然你可以在任何需要的時候畫，比方說按了某個按紐 $("#button").click()。

4.參數、選項和函式
HighCharts裡有非常多的選項，這裡沒有辦法一個一個說明，可以參考官網的api資料，非常詳細：http://api.highcharts.com/highcharts。

在建立完成圖表後，也可以對圖表進行操作，比方說chart1.title="new title"，以變更圖表的標題，必需注意的是物件chart1宣告的層級，如果物件己經消滅，就沒辦法再進行操作了(嚴格的說也不是不行，但是比較麻煩，必需再去抓畫面上的圖表元件)。