摘要
Highcharts圖表控件是目前使用最爲廣泛的圖表控件。本文將從零開始逐步爲你介紹Highcharts圖表控件。通過本文,你將學會如何配置Highcharts以及動態生成Highchart圖表。
目錄
- 前言(Preface)
- 安裝(Installation)
- 如何設置參數(How to set up the options)
- 預處理參數(Preprocess the options)
- 活動圖(Live charts)
一、前言(Preface)
Highcharts是一個非常流行,界面美觀的純Javascript圖表庫。它主要包括兩個部分:Highcharts和Highstock。
Highcharts可以爲您的網站或Web應用程序提供直觀,互動式的圖表。目前支持線,樣條,面積,areaspline,柱形圖,條形圖,餅圖和散點圖類型。
Highstock可以爲您方便地建立股票或一般的時間軸圖表。它包括先進的導航選項,預設的日期範圍,日期選擇器,滾動和平移等等。
如果想要了解更多Highcharts的信息,可以參考官網:http://www.highcharts.com。
二、安裝(Installation)
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架來處理基本的Javascript任務。因此,在使用Highcharts之前,需要在頁面頭部引用這些腳本文件。如果你使用jQuery作爲基本框架,那麼你需要在頁面頭部同時引用jQuery和Hightcharts兩個文件。如下:
<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)腳本文件。如下:
<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>
提示: 安裝Highstock過程與上述相同,除了JavaScript文件名稱是highstock.js而不是highcharts.js。
2.在您的網頁頭部的腳本標籤,或在一個單獨的js文件,添加JavaScript代碼來初始化圖表。renderTo參數用來設置圖表渲染的位置,一般來說是一個具有ID的DIV元素(參考第3步)。
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調用遠程服務器提供的數據。
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圖表的寬度和高度。
<div id="container" style="width: 100%; height: 400px"></div>
4.你可以通過Highcharts.setOptions方法爲Highcharts圖表設置一個全局的主題(可選的)。下載包含有四個預定義的主題,如果你需要使用從這些主題,只需在 highcharts.js 後引用這些文件。比如:
<script type="text/javascript" src="/js/themes/gray.js"></script>
三、如何設置參數(How to set up the options)
- 在上面的例子中,Highcharts options被定義爲對象字面值(object literals)。通過這種方法來標記配置,我們可以的到一個清晰的,可讀性強的,佔用空間低的配置對象。下面這種複雜的代碼對於C程序員來說可能比較熟悉:
// 不良的風格 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);
// 良好的風格 var options = { chart: { renderTo: 'container', defaultSeriesType: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] };
- 在創建命名的對象後,我們可以通過.操作符來擴展其成員。假設我們已經定義一個對象(見良好的風格代碼)。下面代碼代碼將添加另一個series。請記住options.series是一個數組,因此我們可以使用push方法。
options.series.push({ name: 'John', data: [3, 4, 2] })
- 另外一個可以排上用場的事實是,對於JavsScript對象來說,點符號(.)和方括號[]是等價的。所以,你可以通過名稱來訪問成員。這意味着:
options.renderTo
options['renderTo']
4.1 案例學習: preprocessing the data from CSV
(1)創建一個外部的僅包含數據的CSV文件(數據源)。從下面數據文件中,我們可以看到第一行列出了類別的名稱(類似於字段名)。後繼的行的第一個位置列出了series name(比如:第二行的'John'),隨後的位置列出相關的值(value)。在實際開發過程中,我們經常使用PHP或者其他服務器端編程語言(C#,java等)來創建這個文件的內容。或者你會選擇其他的標記格式,比較的常見的如XML或者JSON(JSON相對XML更加輕巧)。在這些情況下,jQuery可以解析出數據對象本身。
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),稍後我們可以爲其添加數據。
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外創建圖表,因爲我們要等待服務器返回的數據(當請求成功後,返回數據,該過程是異步的)。
$.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文件的代碼:
1 <?php 2 // Set the JSON header 3 header("Content-type: text/json"); 4 5 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000. 6 $x = time() * 1000; 7 // The y value is a random number 8 $y = rand(0, 100); 9 10 // Create a PHP array and echo it as JSON 11 $ret = array($x, $y); 12 echo json_encode($ret); 13 ?>
2.定義全局變量。需要強調的是,這裏必須定義chart全局變量,因爲在document ready函數以及requestData函數均要訪問。
1 var chart; // global
3.實現requestData函數。在這個例子中使用jQuery中$.ajax函數來處理ajax事務(你也可以用其他ajax框架來替代)。當數據從服務器成功返回後,通過addPoint方法添加點。
1 /** 2 * Request data from the server, add it to the graph and set a timeout to request again 3 */ 4 function requestData() { 5 $.ajax({ 6 url: 'live-server-data.php', 7 success: function(point) { 8 var series = chart.series[0], 9 shift = series.data.length > 20; // shift if the series is longer than 20 10 11 // add the point 12 chart.series[0].addPoint(point, true, shift); 13 14 // call it again after one second 15 setTimeout(requestData, 1000); 16 }, 17 cache: false 18 }); 19 }
4.創建圖表。
1 $(document).ready(function() { 2 chart = new Highcharts.Chart({ 3 chart: { 4 renderTo: 'container', 5 defaultSeriesType: 'spline', 6 events: { 7 load: requestData 8 } 9 }, 10 title: { 11 text: 'Live random data' 12 }, 13 xAxis: { 14 type: 'datetime', 15 tickPixelInterval: 150, 16 maxZoom: 20 * 1000 17 }, 18 yAxis: { 19 minPadding: 0.2, 20 maxPadding: 0.2, 21 title: { 22 text: 'Value', 23 margin: 80 24 } 25 }, 26 series: [{ 27 name: 'Random data', 28 data: [] 29 }] 30 }); 31 });