HighCharts学习笔记（一）HighCharts入门
一、HighCharts简介
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
二、ighCharts的主要特性包括：[1]
1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；
2.图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。
3.不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。
4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。
5.放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。
6.时间轴：可以精确到毫秒。
三、Highcharts 基本组成
四、HighCharts整体结构：
通过查看API文档我们知道HighCharts结构如下：（API文档在文章后面提供下载）
var chart = new Highcharts.Chart({
chart: {…} // 配置chart图表区
colors: [{…}] // 配置主体显示颜色（多个线条和柱体的颜色顺序的）
credits: {…} // 配置右下角版权链接
exporting: {…} // 配置导出及打印
global: {…} // Highcharts.SetOptions方法调用
labels: {…} // HTML标签，可以放置在绘图的任何位置
lang: {…} // 语言对象属性配置
legend: {…} // 配置图例选项
loading: {…} // 配置图表加载选项
navigation: {…} // 配置导出按钮属性
pane: {…} // 仅适用于极性图表和角仪表
plotOptions: {…} // 配置数据点选项
series: [{…}] // 配置数据列选项
subtitle: {…} // 配置副标题
title: {…} // 配置标题
tooltip: {…} // 配置数据点提示框
xAxis: {…} // 配置x轴选项
yAxis: {…} // 配置y轴选项
})
五、HighCharts 实例：
HtmlCode:
<!doctype html>
<html lang=”en”>
<head>
<script type=”text/javascript” src=”http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”http://cdn.hcharts.cn/highcharts/highcharts.js”></script>
<script type=”text/javascript” src=”http://cdn.hcharts.cn/highcharts/exporting.js”></script>
<script>
//左侧Javascript代码
</script>
</head>
<body>
<div id=”container” style=”min-width:700px;height:400px”></div>
</body>
</html>
JavaScript Code
$(function () {
$(\’#container\’).highcharts({
title: {
text: \’Monthly Average Temperature\’,
x: -20 //center
},
subtitle: {
text: \’Source: WorldClimate.com\’,
x: -20
},
xAxis: {
categories: [\’Jan\’, \’Feb\’, \’Mar\’, \’Apr\’, \’May\’, \’Jun\’,\’Jul\’, \’Aug\’, \’Sep\’, \’Oct\’, \’Nov\’, \’Dec\’]
},
yAxis: {
title: {
text: \’Temperature (°C)\’
},
plotLines: [{
value: 0,
width: 1,
color: \’#808080\’
}]
},
tooltip: {
valueSuffix: \’°C\’
},
legend: {
layout: \’vertical\’,
align: \’right\’,
verticalAlign: \’middle\’,
borderWidth: 0
},
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]
}, {
name: \’Berlin\’,
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: \’London\’,
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
六、HighCharts相关资料：
1.下载地址：http://www.hcharts.cn/product/download.php
2.API文档：http://www.hcharts.cn/api/index.php