擇要

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可認為您便利地建樹股票或一般的時候軸圖表。它包含進步前輩的導航選項，預設的日期侷限，日期選擇器，遷移轉變和平移等等。

二、安裝(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: {
ed: 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應用一個JavaScript物件佈局來定義引數。選項的值可以是字串和數字，陣列，其他物件，甚至是函式。當您初始化應用新Highcharts.Chart的圖表，options物件將作為第一個引數傳遞。

若是你想在同一個頁面上應用一組引數，可以定義一個選項物件(options object)來設定選項。更多內容參考＃4預處理懲罰選項(Preprocessing the options)。

四、預處理懲罰引數(Preprocess the options)

懂得裝置物件(configuration object)的工作道理，以及如何用法度來實現，對於實現高效的Highcharts圖表顯得十分首要。下面將介紹JavaScript物件的根蒂根基常識點：

· 在上方的例子中，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);

對於JavaScript法度員來說，我們更喜好應用下面的風格。須要重視的是，兩種實現體式格式的成果是完全雷同的。

// 傑出的風格
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 CSV

經由過程這個簡單的例子，我們將學會如何裝置根蒂根基的引數(options)，然後經由過程一個Ajax呼叫長途資料以及解析資料，最後經由過程合適的格局顯現出來。在這個例子中，我們應用jQuery來處理懲罰Ajax懇求。當然，你也可以應用MooTool或者Prototype來實現類似的功能。所有的程式碼在$(document).ready()函式中處理懲罰。你可以在data--csv.htm看到這個例子的結果。

(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--xml.htm看到例項，資料包含在data.xml。

五、活動圖(Live Charts)

儘管我們已經經由過程裝置物件(configuration object)定義圖表，然後選擇性地預處理懲罰(optionally preprocessed)，最後經由過程new Highcharts.Chart()初始化和襯著圖表，我們仍然有機會經由過程API來改變圖表。chart，axis，series以及point物件有很多辦法，比如，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
3header("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);
12echo json_encode($ret);
13 ？>

2.定義全域性變數。須要誇大的是，這裡必須定義chart全域性變數，因為在document ready函式以及requestData函式均要接見。

1var chart; // global

3.實現requestData函式。在這個例子中應用jQuery中$.ajax函式來處理懲罰ajax事務(你也可以用其他ajax框架來調換)。當資料從辦事器成功返回後，經由過程addPoint辦法新增點。

1/**
2 * Request data the server， add it to the graph and set a timeout to request again
3*/
4function requestData() {
5 $.ajax({
6 url: “live-server-data.php”，
7 success: function(point) {
8var 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 });

作者：可米小子
出處：http://liuhaorain.cnblogs.com
本文版權歸作者和部落格園共有，迎接轉載，但未經作者贊成必須儲存此段宣告，且在文章頁面明顯地位給出原文連線，不然儲存究查法令義務的權力