Highcharts中文使用指南.docx

 HYPERLINK /liuhaorain/archive/2012/01/24/2311352.html Highcharts使用指南 摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。 ? 目录  HYPERLINK /liuhaorain/archive/2012/01/24/2311352.html \l title_1 \t _blank 前言（Preface）  HYPERLINK /liuhaorain/archive/2012/01/24/2311352.html \l title_2 \t _blank 安装（Installation）  HYPERLINK /liuhaorain/archive/2012/01/24/2311352.html \l title_3 \t _blank 如何设置参数（How to set up the options）  HYPERLINK /liuhaorain/archive/2012/01/24/2311352.html \l title_4 \t _blank 预处理参数（Preprocess the options）  HYPERLINK /liuhaorain/archive/2012/01/24/2311352.html \l title_5 \t _blank 活动图（Live charts） ? 一、前言（Preface） Highcharts是一个非常流行，界面美观的纯Javascript图表库。它主要包括两个部分：Highcharts和Highstock。 Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。 Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。 如果想要了解更多Highcharts的信息，可以参考官网： HYPERLINK \t _blank 。 ? 二、安装（Installation） 1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。因此,在使用Highcharts之前，需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架，那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。如下： script src=/ajax/libs/jquery/1.6.1/jquery.min.js type=text/javascript/scriptscript src=/js/highcharts.js type=text/javascript/script Highcharts(Highstock)已经内置了jQuery适配器(adapter)（注：可能??jQuery框架最流行的缘故），但是并没有内置MooTool等其他javascript框架的适配器(adapter)。因此，当我们使用MooTool等其他JS框架时，需要单独引用适配器(adapter)脚本文件。如下： script src=/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js type=text/javascript/scriptscript src=/js/adapters/mootools-adapter.js type=text/javascript/scriptscript 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