Highcharts使用指南

摘要

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()函数。

如果你想生成HighS