版权申明
jQuery HighchartsTable 由 PMSIpilot 创建，中文使用文档由Highcharts中文网发布
本文由Theo、红烧鸡翅膀、Mr.Zhang 翻译整理，版权归Highcharts中文网所有，除非得到允许，不允许以任何形式转载！
一、关于（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 许可协议发布
二、例子（Demo）
下面是HTML表格转换成图表的一些实例
1、柱状图（column）
| Month | Sales | Benefits |
|---|---|---|
| January | 8000 | 2000 |
| February | 12000 | 3000 |
| March | 18000 | 4000 |
| April | 2000 | -1000 |
| May | 500 | -2500 |
提示：
- 1.请点击右侧选项卡查看代码，关键代码用红色标示
- 2.更多示例请查看 在线演示 >> hctable演示
- Result
- HTML Code
- Javascript Code
2、直线图（line）
| Month | Sales | Benefits |
|---|---|---|
| January | 8000 | 2000 |
| February | 12000 | 3000 |
| March | 18000 | 4000 |
| April | 2000 | -1000 |
| May | 500 | -2500 |
提示：
- 1.请点击右侧选项卡查看代码，关键代码用红色标示
- 2.更多示例请查看 在线演示 >> hctable演示
- Result
- HTML Code
- Javascript Code
3、混合图（Column + Area）
| Month | Sales | Benefits |
|---|---|---|
| January | 8000 | 2000 |
| February | 12000 | 3000 |
| March | 18000 | 4000 |
| April | 2000 | -1000 |
| May | 500 | -2500 |
提示：
- 1.请点击右侧选项卡查看代码，关键代码用红色标示
- 2.更多示例请查看 在线演示 >> hctable演示
- Result
- HTML Code
- Javascript Code
三、使用文档（Document）
1、用法
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），示例代码如下：
<table class="highchart" data-graph-container=".container" data-graph-type="column">
//在table中必须指定图表的渲染容器data-graph-container 和图表类型data-graph-type
<thead> //thead指定数据列
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody> //tbody指定数据
<tr>
<td>January</td>
<td>8000</td>
</tr>
<tr>
<td>February</td>
<td>12000</td>
</tr>
</tbody>
</table>
4)、调用图表转换函数
最后，在Table上调用highchartTable()函数即可，代码如下
$(document).ready(function() {
$("table.highchart").highchartTable();
});
完成上述步骤后即可看到图表效果，下面详细说明配置属性。
2、图形选项配置
图形选项对应Highcharts的Chart属性，下面列举所有配置选项
*注意：Number指数字，包括小数等
3、图例配置（Legend）
4、数据列（Series）
5、线条配置（Line）
| 属性 | 所在HTML标签 | 说明 | 取值或取值类型 | 例子 |
|---|---|---|---|---|
| data-graph-line-width | table | 图表线条宽度，单位是px | Number | 在线演示 |
| data-graph-line-shadow | table | 面积图（area）下方有阴影区域，通过设置data-graph-line-shadow的值为0 来使其不可用 | 0 | 在线演示 |
6、坐标轴（Axis）
7、坐标点（Point）
8、垂直线（Vertical Lines）
9、饼图特有的属性
| 属性 | 所在HTML标签 | 说明 | 取值或取值类型 | 例子 |
|---|---|---|---|---|
| data-graph-item-highlight | td | 饼图区块凸出，即选中状态 | 1 | 在线演示 |
| data-graph-item-color | td | 区块颜色 | 十六进制颜色代码 | 在线演示 |
| data-graph-name | th | 饼图区块名字 | String | 在线演示 |
10、javascript动态配置
在图表渲染之前，会有一个函数被触发，我们可以利用该函数来修改一些图表配置。
例如：我们想要根据图表渲染容器来动态的设定图表数据列颜色，即设置colos数组，相对在服务器端针对每个图表生成代码，我们提供的jQuery自定义函数highchartTable.beforeRender可以针对全部的图表设置有效，类似Highcharts的Global属性。
针对所有的图表修改颜色的示例代码如下
$('table.highchart').bind('highchartTable.beforeRender', function(event, highChartConfig) {
highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
})
.highchartTable();
更多配置可以参考 Highcharts API文档。