一、Highcharts概念
Highcharts 是一个用纯JavaScript编写的一个图表库，最大的好处就是开源免费。其特点是轻量级、时间轴可以精确到毫秒，使用使用 json 格式配置，表格可导出为 PDF/ PNG/ JPG / SVG 格式。图表类型有二维和3D图表。
二、Highcharts 环境配置
通过 Highcharts 与 jQuery 结合使用，所以在加载 Highcharts 前必须先加载 jQuery 库。
（一）安装 jQuery
第一种方式：访问 jquery.com 下载jQuery包。使用下载的方式，在 HTML 页面引入 jQuery 代码:<script src="/jquery/jquery.min.js"></script>。
第二种方式：使用百度静态资源库的jQuery资源：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js，在网页中的引用方式：<script src="http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>。
（二）安装Highcharts
第一种方式（推荐）：访问 highcharts.com 下载 Highcharts 包。使用下载的方式，在 HTML 页面引入 Highcharts 代码: <script src="/highcharts/highcharts.js"></script>。
第二种方式：使用官方提供的 CDN 地址：http://code.highcharts.com/highcharts.js，在网页中引用方式：<script src="http://code.highcharts.com/highcharts.js"></script>。
三、Highcharts 配置语法
（一）创建 HTML 页面
1、创建一个 HTML 页面，引入 jQuery 和 Highcharts 库：
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/try/demo_source/highcharts.js"></script>
</head>
2、在网页中创建一个div用于包含Highcharts绘制的图标。
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
（二）创建配置文件
1、Highcharts 库使用 json 格式来配置：$('#container').highcharts(json);
注意：这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。
2、为图表配置标题：
var title = {
text: '月平均气温'
};
3、为图表配置副标题：
var subtitle = {
text: 'Source: runoob.com'
};
4、配置要在 X 轴显示的项：
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};
5、配置要在 Y 轴显示的项：
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
6、配置提示信息：
var tooltip = {
valueSuffix: '\xB0C'
}
7、配置图例对齐方式：
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
8、配置图表要展示的数据。每个系列是个数组：
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
}
];
（三）创建 json 数据
1、创建一个json对象，使其属性接收各个配置信息来绘制图表：
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
四、Highcharts 配置选项详细说明
Highcharts 提供大量的配置选项参数，您可以轻松定制符合用户要求的图表。
（一）参数配置(属性+事件)
1、事件主要有：addSeries方法，click方法，load方法，selection方法等的回调函数。
2、属性参数设置。
（二）Chart：图表区选项
1、主图表区的相关参数设置，例如高度、宽度、颜色等。
（三）Color：颜色选项
1、Color颜色选项用于设置图表的颜色方案。
（四）Title：标题选项
1、Title标题选项用于设置图表的标题相关属性。内容、对齐方式、字体颜色大小等。
（五）Subtitle：副标题选项
1、副标题提供的属性选项与标题title大致相同。
（六）xAxis：X轴选项
1、X轴选项用于设置图表X轴相关属性。分类名称、x轴最大值等。
（七）yAxis：Y轴选项
Y轴选项与上述xAxis选项基本一致。
（八）Series：数据列选项
数据列选项用于设置图表中要展示的数据相关的属性。
注意：显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]。
（九）plotOptions：数据点选项
1、plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。
2、enabled 是否在数据点上直接显示数据；
3、allowPointSelect 是否允许使用鼠标选中数据点；
（十）Tooltip：数据点提示框
Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。提示框样式等。
（十一）Legend：图例选项
legend用于设置图例相关属性。图例对齐、颜色等样式。
1956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
