网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成
Highcharts第一个实例
下面咱们来实现本书的第一个Highcharts实例。javascript
【实例1-1】下面来制做北京连续一周最高温度折线图。操做过程以下：php
（1）新建一个网页文件，命名为Hello.html。同时，将title设置为Hello Highcharts。代码以下：css
<html xmlns="http://www.w3.org/1999/xhtml">html
<head>java
<meta charset="utf-8" />jquery
<title>Hello Highcharts</title>浏览器
</head>网站
<body>spa
</body>插件
</html>
（2）在网页中添加一个div，设置id为container。
<div id="container"></div>
（3）设置该div的样式，代码以下：
<style type="text/css">
#container {
width:500px;
height:300px;
border:1px solid #000;
padding :20px;
margin:10px;
}
</style>
（4）引入jQuery脚本和Highcharts脚本，代码以下：
<script src="jquery.js"></script>
<script src="highcharts.js"></script>
注意：这里须要将这两个脚本文件放到Hello.html所在的目录。
（5）添加图表绘制代码。代码以下：
<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
type: 'line'
},
title: {
text: '北京一周最高温度'
},
subtitle: {
text: '2015.02.08--2015.02.14'
},
series: [{
name: '最高温度',
data: [7, 11, 8, 7, 9, 9, 9]
}]
};
$('#container').highcharts(options);
});
</script>
保存以上文件，运行结果如图1.18所示。
图1.18 第一个实例
Highcharts图表构成
为了方便你们更好了解Highcharts图表，这里从界面和代码两个角度讲解Highcharts图表的实现方式。
Highcharts界面构成
在第一个实例中，咱们实现了一个图表。做为一个图表，一般是由图表区、标题、绘图区、坐标轴、图例/数据列等几个部分构成，如图1.19所示。在Highcharts中，每一个部分都由一个或者多个组件构成。其中，黑色方框括住的部分就是图表区。而由坐标轴围起来的部分就是绘图区。后面将依次讲解这几个部分的实现方式。这里，你们只要知道每一个部分的名称便可。
图1.19 图表构成
Highcharts代码构成
虽然咱们在第一个实例中并无编写多少代码，但图1.19却展示丰富的内容。这充分的体现了Highcharts使用的便捷性。实现Highcharts图表实际分为两个步骤，依次讲解。
1.图表配置项对象
Highcharts核心主体就是图表配置项对象。该对象包含了图表的各种数据和配置信息。每一个部分每每都是由更小的配置项对象组成。用户只要按照规范的格式，填写对应的数据和配置值，就能够。整个过程就像搭建积木同样。下面对第一个实例的配置项对象作简要介绍。
var options = {
chart: { //图表基本信息
type: 'line' //指定图表类型
},
title: { //设置图表标题
text: '北京一周最高温度' //指定标题内容
},
subtitle: { //设置图表副标题
text: '2015.02.08--2015.02.14' //设置副标题内容
},
series: [{ //定义数据列
name: '最高温度', //指定数据列的标题
data: [7, 11, 8, 7, 9, 9, 9] //指定数据节点
}]
};
这块内容也可使用传统Javascript逐项赋值的方式实现。从维护角度考虑，推荐使用以上方式实现。
2.在容器中绘制图表
在指定好配置项对象后，用户就可使用Highcharts插件提供的higcharts方法在指定的容器中绘制图表。须要的代码只须要如下一行。
$('#container').highcharts(options);
只须要以上两个步骤，就能够在现有的网页中绘制出图1.19所示的图表了。用户对图表进行扩展，只须要修改图表配置对象便可。
Highcharts商业受权和定制开发
在实际Highcharts开发过程当中，开发者每每会面对受权问题和复杂需求问题。这里针对这两个方面最简要讲解，以帮助开发者更好的使用Highcharts。
Highcharts商业受权
Highcharts是一个很是好的图表插件。在使用的时候，它针对我的和非商业应用是所有免费的。对于商业开发，开发者须要购买相应的商业受权。在国内，开发者能够经过Highcharts官方受权的Higcharts中文网（hcharts.cn）购买商业受权。
该网站是国内最权威的Highcharts技术网站。它提供Highcharts各项服务，如商业受权、定制、咨询等服务。在浏览器中输入网址http://www.hcharts.cn/service/license.php，就能够进入该网站的商业受权网页，如图1.20所示。
图1.20 商业受权页面
按照网页提示，就能够申请购买商业受权。
Highcharts定制开发
在Highcharts中，各种图表的实现采用模版化机制。用户只须要极少的设置，就能够配置精美的图表。但实际开发中，开发者常常面临各类更为复杂的客户需求。这个时候，使用Highcharts提供各类配置项每每很难实现。遇到此类问题，用户能够经过购买定制服务，来解决使用中遇到的难题。
Highcharts中文网提供一流的技术咨询和定制服务，用户只须要进入官网的图表定制服务页面（如图1.21），就能够申请响应的服务。
图1.21 定制服务
本文选自：网页图表Highcharts实践教程基础篇大学霸内部资料，转载请注明出处，尊重技术尊重IT人！