Highcharts使用指南

时间 2019-11-25

标签 highcharts 使用指南繁體版

原文原文链接

原文 http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.htmljavascript

摘要

Highcharts图表控件是目前使用最为普遍的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。经过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。php

1、前言（Preface）

Highcharts是一个很是流行，界面美观的纯Javascript图表库。它主要包括两个部分：Highcharts和Highstock。html

Highcharts能够为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。java

Highstock能够为您方便地创建股票或通常的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。jquery

若是想要了解更多Highcharts的信息，能够参考官网：http://www.highcharts.com。程序员

2、安装（Installation）

1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。所以,在使用Highcharts以前，须要在页面头部引用这些脚本文件。若是你使用jQuery做为基本框架，那么你须要在页面头部同时引用jQuery和Hightcharts两个文件。以下：ajax

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

2.在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置，通常来讲是一个具备ID的DIV元素（参考第3步）。api

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 });