版權申明
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文檔。