使用HighCharts制作图表
使用HighCharts制作图表一、什么是Highcharts
1、Highcharts是一个非常流行，界面美观的纯Javascript图表库。它主要包括两个部分：Highcharts和Highstock。
2、Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。
3、Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。
二、HighCharts的主要特性
1、兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；
2、图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。
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"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
当我们使用MooTool等其他JS框架时，需要单独引用适配器(adapter)脚本文件
例如
<script src="/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>
2、在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的li元素
例如
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]
}]
});
});
chart1 上述代码适用于使用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、在页面中添加一个li元素，作为放置Highcharts图表的容器。需要为其设置ID值，与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。
<li id="container" style="width: 100%; height: 400px"></li>
4、你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题（可选的）。下载包含有四个预定义的主题，如果你需要使用从这些主题，只需在 highcharts.js 后引用这些文件。比如：
<script type="text/javascript" src="/js/themes/gray.js"></script>