（一）關於（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="display:none">
 <caption>學員數量統計</caption>
  <thead>
      <tr>
          <th>數量</th>
          <th>城市</th>
          <th>未知</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>重慶</td>
          <td>50</td>
          <td>40</td>
      </tr>
      <tr>
          <td>北京</td>
          <td>150</td>
          <td>140</td>
      </tr>
      <tr>
          <td>成都</td>
          <td>500</td>
          <td>490</td>
      </tr>
      <tr>
          <td>上海</td>
          <td>240</td>
          <td>230</td>
      </tr>
      <tr>
          <td>南京</td>
          <td>200</td>
          <td>190</td>
      </tr>
      <tr>
          <td>河北</td>
          <td>400</td>
          <td>390</td>
      </tr>
  </tbody>
</table>

4、呼叫圖表轉換函式
最後，在Table上呼叫highchartTable()函式即可，程式碼如下

 $(document).ready(function() {
      $("table.highchart").highchartTable();
    });

5、效果：

當將table中的data-graph-type修改為column時，會變成相對應的報表圖形。

6、複合圖形，在複雜的資料中，我們會經常將不同圖形的報表整合成一張報表圖形提供給運營人員。
這無疑大大的加重了後臺開發人員的工作量。
jQuery HighchartTable在這方便做的也是非常不錯的。
我們一柱狀圖和區域圖為例：

<table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:none">
 <caption>學員數量統計</caption>
  <thead>
      <tr>
          <th>數量</th>
          <th>城市</th>
          <th data-graph-type="area">未知</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>重慶</td>
          <td>50</td>
          <td>40</td>
      </tr>
      <tr>
          <td>北京</td>
          <td>150</td>
          <td>140</td>
      </tr>
      <tr>
          <td>成都</td>
          <td>500</td>
          <td>490</td>
      </tr>
      <tr>
          <td>上海</td>
          <td>240</td>
          <td>230</td>
      </tr>
      <tr>
          <td>南京</td>
          <td>200</td>
          <td>190</td>
      </tr>
      <tr>
          <td>河北</td>
          <td>400</td>
          <td>390</td>
      </tr>
  </tbody>
</table>
</div>
</body>
<script>
    $(document).ready(function() {
        $('table.highchart').highchartTable();
    });
</script>

效果：

7、其他說明
1）jQuery HighchartTable在各個瀏覽器中的相容性非常好，基本上滿足了日常開發使用，並且支援瀏覽器自適應。
2）在形成的圖形報表中，點選報表下面相對應的名稱，可隱藏相對應的報表資料。

注：如果data-graph-type設定成pie時，每個tr標籤中，只允許有兩個td標籤。jQuery HighchartTable預設情況下生效的就只有前兩個，如果大於2個td標籤，後面的資料會失效。