图形报表之jQuery HighchartTable基础入门

（一）关于（About）

1、简介

HighchartsTable是一款基于jQuery编写的HTML表格转换Highcharts图表的插件。
利用它，你只需要关注HTML表格配置即可创建Highcharts图表！

2、运行原理

HighchartsTable利用HTML5 的 data-* 属性来指定图表渲染选项。

3、浏览器兼容性

HighchartsTable兼容目前主流浏览器，包括 ：

注意：jQuery 版本需要 >= 1.4.3


HighchartsTable的兼容性取决于Highcharts的兼容性，
Highcharts兼容目前主流浏览器，包括IE6，详情请查看 Highcharts兼容性

4、许可（License）

HighchartsTable 基于 MIT 许可协议发布

（二）简单使用

HighchartsTable需要从一个HTML表格中读取数据和属性，分析并创建一个Hightcharts图表。
所有利用HighchartsTable创建图表的重点在于HTML表格的创建。
下面详细说明创建图表的过程
1、下载并引入必须的js文件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.highchartsTable.js"></script>

2、创建图表渲染容器

<div class="container"></div>

3、创建HTML表格
在<table>，你必须设置一些属性，如图表类型和图表渲染容器等
其中数据列（Series）的名字在<thead>中定义，值在<tbody>中定义
<tr>的第一个<td>代表X轴（xAxis）的值，其他<td>代表每个系列的Y值（Value），
在data-graph-type中，column代表柱状图、pie代表饼状图、line代表折线图、area代表区域、spline代表曲线图。
示例代码如下：

<table class="highchart" data-graph-container-before="1" data-graph-type="line" style=