版权申明
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）
提示：
1.请点击右侧选项卡查看代码，关键代码用红色标示2.更多示例请查看 在线演示 >>hctable演示 ResultHTML CodeJavascript Code ValeurColumn exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k
2、直线图（line）
提示：
1.请点击右侧选项卡查看代码，关键代码用红色标示2.更多示例请查看 在线演示 >>hctable演示 ResultHTML CodeJavascript Code ValeurLine exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k
3、混合图（Column + Area）
提示：
1.请点击右侧选项卡查看代码，关键代码用红色标示2.更多示例请查看 在线演示 >>hctable演示 ResultHTML CodeJavascript Code ValeurColumn + area exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k
三、使用文档（Document）
1.用法（Usage）2.图形配置（Graph）3.图例配置（Legend）4.数据列配置（Series）5.线条配置（Line）6.坐标轴（Axis）7.点（Point）8.垂直线（Vertical lines）9.饼图的特定选项（Pie charts specific options）10.js下实现的动态选项（Dynamic options in javascript）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）
6、坐标轴（Axis）
7、坐标点（Point）
8、垂直线（Vertical Lines）
9、饼图特有的属性
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文档。
