【轉載】Highcharts使用指南

時間 2019-11-17

標籤轉載 highcharts 使用指南简体版

原文原文鏈接

另附幾個較好的圖形組件庫：javascript

基於HTML5的開源畫圖組件:http://www.ichartjs.com/gettingstarted/php

圖表Echarts: http://echarts.baidu.com/doc/example.html
highCharts: http://www.highcharts.com/html

【轉載】原文地址：http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.htmljava

摘要

Highcharts圖表控件是目前使用最爲普遍的圖表控件。本文將從零開始逐步爲你介紹Highcharts圖表控件。經過本文，你將學會如何配置Highcharts以及動態生成Highchart圖表。jquery

1、前言（Preface）

Highcharts是一個很是流行，界面美觀的純Javascript圖表庫。它主要包括兩個部分：Highcharts和Highstock。程序員

Highcharts能夠爲您的網站或Web應用程序提供直觀，互動式的圖表。目前支持線，樣條，面積，areaspline，柱形圖，條形圖，餅圖和散點圖類型。ajax

Highstock能夠爲您方便地創建股票或通常的時間軸圖表。它包括先進的導航選項，預設的日期範圍，日期選擇器，滾動和平移等等。編程

若是想要了解更多Highcharts的信息，能夠參考官網：http://www.highcharts.com。json

2、安裝（Installation）

1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架來處理基本的Javascript任務。所以,在使用Highcharts以前，須要在頁面頭部引用這些腳本文件。若是你使用jQuery做爲基本框架，那麼你須要在頁面頭部同時引用jQuery和Hightcharts兩個文件。以下：api

<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>

3、如何設置參數（How to set up the options）

Highcharts使用一個JavaScript對象結構來定義參數。選項的值能夠是字符串和數字，數組，其餘對象，甚至是函數。當您初始化使用新Highcharts.Chart的圖表，options對象將做爲第一個參數傳遞。

若是你想在同一個頁面上使用一組參數，能夠定義一個選項對象（options object）來設置選項。更多內容參考#4預處理選項（Preprocessing the options）。

4、預處理參數（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 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能夠解析出數據對象自己。

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。

5、活動圖(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 });