Highcharts使用指南

[javascript]   
 Highcharts圖表控制項是目前使用最為廣泛的圖表控制項。本文將從零開始逐步為你介紹Highcharts圖表控制項。通過本文，你將學會如何配置Highcharts以及動態產生Highchart圖表。

一、前言（Preface）
Highcharts是一個非常流行，介面美觀的純Javascript圖表庫。它主要包括兩個部分：Highcharts和Highstock。
Highcharts可以為您的網站或Web應用程式提供直觀，互動式的圖表。目前支援線，樣條，面積，areaspline，直條圖，橫條圖，餅圖和散佈圖類型。
Highstock可以為您方便地建立股票或一般的時間軸圖表。它包括先進的導航選項，預設的日期範圍，日期選取器，滾動和平移等等。
 二、安裝（Installation）
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript架構來處理基本的Javascript任務。因此,在使用Highcharts之前，需要在頁面頭部引用這些指令檔。如果你使用jQuery作為基本架構，那麼你需要在頁面頭部同時引用jQuery和Hightcharts兩個檔案。如下：
[javascript]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script src="/js/highcharts.js" type="text/javascript"></script> 
Highcharts(Highstock)已經內建了jQuery適配器(adapter)（註：可能是jQuery架構最流行的緣故），但是並沒有內建MooTool等其他javascript架構的適配器(adapter)。因此，當我們使用MooTool等其他JS架構時，需要單獨引用適配器(adapter)指令檔。如下：
[javascript] 
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script> 
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script> 
<script src="/js/highcharts.js" type="text/javascript"></script> 
2.在您的網頁頭部的指令碼標籤，或在一個單獨的js檔案，添加JavaScript代碼來初始化圖表。renderTo參數用來設定圖表渲染的位置，一般來說是一個具有ID的DIV元素（參考第3步）。
[css]
var chart1; // 全域變數 
$(document).ready(function() { 
      chart1 = new Highcharts.Chart({ 
         chart: { 
            renderTo: 'container', 
            type: 'bar' 
         }, 
         title: { 
            text: 'Fruit Consumption' 
         }, 
         xAxis: { 
            categories: ['Apples', 'Bananas', 'Oranges'] 
         }, 
         yAxis: { 
            title: { 
               text: 'Fruit eaten' 
            } 
         }, 
         series: [{ 
            name: 'Jane', 
            data: [1, 0, 4] 
         }, { 
            name: 'John', 
            data: [5, 7, 3] 
         }] 
      }); 
   }); 
上述代碼適用於使用jQuery作為基本架構的情況，$(document).ready()函數，表示在文檔載入完成後進行相應處理。如果你使用MooTool等其他JS架構，需要使用相對應的代碼來替代$(document).ready()函數。
如果你想產生HighStock圖表，有一個單獨的構造方法調用Highcharts.StockChart。在這些圖表中，資料來源是一個典型的JavaScript數組資料。其來源可以是一個單獨的JavaScript檔案，或者是通過Ajax調用遠程伺服器提供的資料。
[javascript] 
var chart1; // 全域變數 
$(document).ready(function() { 
      chart1 = new Highcharts.StockChart({ 
         chart: { 
            renderTo: 'container' 
         }, 
         rangeSelector: { 
            selected: 1 
         }, 
         series: [{ 
            name: 'USD to EUR', 
            data: usdtoeur // 陣列變數 
         }] 
      }); 
   }); 
3.在頁面中添加一個DIV元素，作為放置Highcharts圖表的容器。需要為其設定ID值，與第2步rendTo參數綁定。設定的寬度和高度將作為Highcharts圖表的寬度和高度。
[html] view plaincopyprint?
<div id="container" style="width: 100%; height: 400px"></div> 
4.你可以通過Highcharts.setOptions方法為Highcharts圖表設定一個全域的主題（可選的）。下載包含有四個預定義的主題，如果你需要使用從這些主題，只需在 highcharts.js 後引用這些檔案。比如：
[html] view plaincopyprint?
<script type="text/javascript" src="/js/themes/gray.js"></script> 
三、如何設定參數（How to set up the options）
Highcharts使用一個JavaScript對象結構來定義參數。選項的值可以是字串和數字，數組，其他對象，甚至是函數。當您初始化使用新Highcharts.Chart的圖表，options對象將作為第一個參數傳遞。

如果你想在同一個頁面上使用一組參數，可以定義一個選項對象（options object）來設定選項。更多內容參考#4預先處理選項（Preprocessing the options）。
四、預先處理參數（Preprocess the options）
瞭解設定物件（configuration object）的工作原理，以及如何用程式來實現，對於實現高效的Highcharts圖表顯得十分重要。下面將介紹JavaScript對象的基本知識點：
在上面的例子中,Highcharts options被定義為對象字面值（object literals）。通過這種方法來標記配置，我們可以的到一個清晰的，可讀性強的，佔用空間低的設定物件。下面這種複雜的代碼對於C程式員來說可能比較熟悉：
[javascript] 
// 不良的風格 
var options = new Object(); 
 
options.chart = new Object(); 
options.chart.renderTo = 'container'; 
options.chart.type = 'bar'; 
 
options.series = new Array(); 
options.series[0] = new Object(); 
options.series[0].name = 'Jane'; 
options.series[0].data = new Array(1, 0, 4); 
對於JavaScript程式員來說，我們更喜歡使用下面的風格。需要注意的是，兩種實現方式的結果是完全相同的。
[javascript] view plaincopyprint?
// 良好的風格 
var options = { 
    chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'bar' 
    }, 
    series: [{ 
        name: 'Jane', 
        data: [1, 0, 4] 
    }] 
}; 
在建立命名的對象後，我們可以通過.操作符來擴充其成員。假設我們已經定義一個對象（見良好的風格代碼）。下面代碼代碼將添加另一個series。請記住options.series是一個數組，因此我們可以使用push方法。
[javascript] 
options.series.push({ 
    name: 'John', 
    data: [3, 4, 2] 
}) 

另外一個可以排上用場的事實是，對於JavsScript對象來說，點符號（.）和方括弧[]是等價的。所以，你可以通過名稱來訪問成員。這意味著：

options.renderTo

等價於

options['renderTo']

4.1 案例學習： preprocessing the data from CSV
通過這個簡單的例子，我們將學會如何配置基本的參數(options)，然後通過一個Ajax調用遠端資料以及解析資料，最後通過合適的格式展現出來。在這個例子中，我們使用jQuery來處理Ajax請求。當然，你也可以使用MooTool或者Prototype來實作類別似的功能。所有的代碼在$(document).ready()函數中處理。你可以在data-from-csv.htm看到這個例子的效果。
(1)建立一個外部的僅包含資料的CSV檔案（資料來源）。從下面資料檔案中，我們可以看到第一行列出了類別的名稱（類似於欄位名）。後繼的行的第一個位置列出了series name(比如：第二行的'John')，隨後的位置列出相關的值(value)。在實際開發過程中，我們經常使用PHP或者其他伺服器端程式設計語言（C#，java等)來建立這個檔案的內容。或者你會選擇其他的標記格式，比較的常見的如XML或者JSON（JSON相對XML更加輕巧）。在這些情況下，jQuery可以解析出資料對象本身。
[css] 
Categories,Apples,Pears,Oranges,Bananas 
John,8,4,6,5 
Jane,3,4,2,3 
Joe,86,76,79,77 
Janet,3,16,13,15 
(2)定義基本的初始的參數。注意到，我們為categorys和series對象建立了空數組（empty arrays），稍後我們可以為其添加資料。
[javascript] 
var options = { 
    chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'column' 
    }, 
    title: { 
        text: 'Fruit Consumption' 
    }, 
    xAxis: { 
        categories: [] 
    }, 
    yAxis: { 
        title: { 
            text: 'Units' 
        } 
    }, 
    series: [] 
}; 
（3）載入資料。我們通過jQuery的.get方法來擷取資料檔案.csv的內容。在success回呼函數中，我們解析請求返回的字串，並將結果添加到參數對象（options object)的categories和series成員對象中，最後建立圖表。請注意，我們不能在Ajax callback外建立圖表，因為我們要等待伺服器返回的資料（當請求成功後，返回資料，該過程是非同步）。
[javascript] 
$.get('data.csv', function(data) { 
    // Split the lines 
    var lines = data.split('\n'); 
     
    // Iterate over the lines and add categories or series 
    $.each(lines, function(lineNo, line) { 
        var items = line.split(','); 
         
        // header line containes categories 
        if (lineNo == 0) { 
            $.each(items, function(itemNo, item) { 
                if (itemNo > 0) options.xAxis.categories.push(item); 
            }); 
        } 
         
        // the rest of the lines contain data with their name in the first position 
        else { 
            var series = { 
                data: [] 
            }; 
            $.each(items, function(itemNo, item) { 
                if (itemNo == 0) { 
                    series.name = item; 
                } else { 
                    series.data.push(parseFloat(item)); 
                } 
            }); 
             
            options.series.push(series); 
     
        } 
         
    }); 
     
    // Create the chart 
    var chart = new Highcharts.Chart(options); 
}); 
4.2 載入XML資料
從XML檔案載入資料與載入CSV檔案類似。Highcharts不能處理預定義的XML資料（只能處理數組）。因此，整個過程由你來編寫XML資料，並為它定義一個解析函數。相對於CSV檔案來說，XML的最大缺點是，它增加了一些標記資料（這也是選擇JSON的緣故）。使用XML的好處在於，至少對於小量的資料來說，你不必要手動解析返回的資料。你可以使用jQuery現有的DOM解析能力來訪問XML數。你可以在data-from-xml.htm看到執行個體，資料包含在data.xml。
五、活動圖表(Live Charts)
儘管我們已經通過設定物件（configuration object）定義圖表，然後選擇性地預先處理（optionally preprocessed），最後通過new Highcharts.Chart()初始化和渲染圖表，我們仍然有機會通過API來改變圖表。chart,axis,series以及point對象有許多方法，比如update,remove,addSeries,addPoints等等。完整的列表可以查看API參考（the API Reference）下方法和屬性。
5.1 案例學習：a live connection to the server
下面的例子將展示怎樣構建一個活動的圖表（live chart）通過每一秒種從伺服器檢索的資料。首先，我們要建立自訂函數requestData，它開始在圖表載入事件（load event）中調用，隨後在Ajax回呼函數success中調用。你可以在live-server.htm中看到結果。
1.建立伺服器。在這個例子中，我們選擇PHP作為伺服器指令碼語言返回包含時間（time）以及y值（y value）的javascript數組。下列為live-server-data.php檔案的代碼：
[php]
<?php 
 // Set the JSON header 
 header("Content-type: text/json"); 
  
 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000. 
 $x = time() * 1000; 
 // The y value is a random number 
 $y = rand(0, 100); 
  
 // Create a PHP array and echo it as JSON 
 $ret = array($x, $y); 
 echo json_encode($ret); 
 ?> 
2.定義全域變數。需要強調的是，這裡必須定義chart全域變數，因為在document ready函數以及requestData函數均要訪問。

1 var chart; // global

3.實現requestData函數。在這個例子中使用jQuery中$.ajax函數來處理ajax事務（你也可以用其他ajax架構來替代）。當資料從伺服器成功返回後，通過addPoint方法添加點。
[javascript] 
/**
  * Request data from the server, add it to the graph and set a timeout to request again
  */ 
 function requestData() { 
     $.ajax({ 
         url: 'live-server-data.php', 
         success: function(point) { 
             var series = chart.series[0], 
                 shift = series.data.length > 20; // shift if the series is longer than 20 
  
             // add the point 
             chart.series[0].addPoint(point, true, shift); 
              
             // call it again after one second 
             setTimeout(requestData, 1000);     
         }, 
         cache: false 
     }); 
 } 
4.建立圖表。
[javascript] 
$(document).ready(function() { 
     chart = new Highcharts.Chart({ 
         chart: { 
             renderTo: 'container', 
             defaultSeriesType: 'spline', 
             events: { 
                 load: requestData 
             } 
         }, 
         title: { 
             text: 'Live random data' 
         }, 
         xAxis: { 
             type: 'datetime', 
             tickPixelInterval: 150, 
             maxZoom: 20 * 1000 
         }, 
         yAxis: { 
             minPadding: 0.2, 
             maxPadding: 0.2, 
             title: { 
                 text: 'Value', 
                 margin: 80 
             } 
         }, 
         series: [{ 
             name: 'Random data', 
             data: [] 
         }] 
     });         
 }); 
作者：qinpeng100423