版權申明
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）

Column exampleMonthSalesBenefits

January	8000	2000
February	12000	3000
March	18000	4000
April	2000	-1000
May	500	-2500

提示：

• 1.請點擊右側選項卡查看代碼，關鍵代碼用紅色標示
• 2.更多示例請查看 在線演示 >>?hctable演示

• Result
• HTML Code
• Javascript Code

ValeurColumn exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

2、直線圖（line）

Line exampleMonthSalesBenefits

January	8000	2000
February	12000	3000
March	18000	4000
April	2000	-1000
May	500	-2500

提示：

• 1.請點擊右側選項卡查看代碼，關鍵代碼用紅色標示
• 2.更多示例請查看 在線演示 >>?hctable演示

• Result
• HTML Code
• Javascript Code

ValeurLine exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

3、混合圖（Column + Area）

Column + area exampleMonthSalesBenefits

January	8000	2000
February	12000	3000
March	18000	4000
April	2000	-1000
May	500	-2500

提示：

• 1.請點擊右側選項卡查看代碼，關鍵代碼用紅色標示
• 2.更多示例請查看 在線演示 >>?hctable演示

• Result
• HTML Code
• Javascript 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屬性，下面列舉所有配置選項

屬性所在HTML標簽說明取值或取值類型例子

data-graph-type	table	圖表類型，該屬性是必須的	column line area spline pie	在線演示
caption	caption	圖表標題	String	在線演示
data-graph-subtitle-text	table	副標題	String	在線演示
data-graph-container-before data-graph-container	table	圖表渲染容器，該屬性是必須的。有兩中方式定義： 1、如果 2、其他情況設置”data-graph-container“為渲染div的class	1、data-graph-container-before：1 2、data-graph-container：div的class	在線演示
data-graph-height	table	圖表高度。單位是px	Number *	在線演示
data-graph-margin-top	table	圖表的上外邊距。單位是px	Number	在線演示
data-graph-margin-right	table	圖表的右外邊距。單位是px	Number	在線演示
data-graph-margin-bottom	table	圖表的下外邊距	Number	在線演示
data-graph-margin-left	table	圖表的左外邊距	Number	在線演示
data-graph-inverted	table	軸翻轉屬性，當設置為1時，X軸和Y軸的位置對調	1	在線演示
data-graph-area-fillOpacity	table	圖形透明度，只針對面積圖（area）有效	從0 - 1的小數	在線演示
data-graph-datalabels-formatter	table	datalabels的格式化函數	函數名	在線演示

*注意：Number指數字，包括小數等

3、圖例配置（Legend）

屬性所在HTML標簽說明取值或取值類型例子

data-graph-legend-disabled	table	禁用圖例	1	在線演示
data-graph-legend-layout	table	圖例對齊方式	vertical（垂直對齊） hortizontal (水平對齊，默認值)	在線演示
data-graph-legend-width	table	圖例寬度，單位是px	Number	在線演示
data-graph-legend-x	table	圖例在水平方向上的偏移，單位是px	Number	在線演示
data-graph-legend-y	table	圖例在豎直方向上的偏移，單位是px	Number	在線演示

4、數據列（Series）

屬性所在HTML標簽說明取值或取值類型例子

data-graph-color-x	table	x取值從1-9，即從data-graph-color-1到data-graph-color-9，表示數據列的顏色	十六進制顏色，例如：#ff0000	在線演示
data-graph-dash-stylet	th	數據列線條樣式	dash（默認值，直線型） dot longdash shortdash shortdot shortdashdot shortdashdotdot	在線演示
data-graph-hidden	th	是否默認隱藏該數據列	1	在線演示
data-graph-skip	th	忽略圖中某一列	1	在線演示
graph-stack-group	th	通過設置一樣的data-graph-stack-group值來讓表中的列顯示在圖上的同一列	String	在線演示

5、線條配置（Line）

屬性所在HTML標簽說明取值或取值類型例子

data-graph-line-width	table	圖表線條寬度，單位是px	Number	在線演示
data-graph-line-shadow	table	面積圖（area）下方有陰影區域，通過設置data-graph-line-shadow的值為0 來使其不可用	0	在線演示

6、坐標軸（Axis）

屬性所在HTML標簽說明取值或取值類型例子

data-graph-xaxis-title-text	table	X軸標題文字	String	在線演示
data-graph-xaxis-rotation	table	x軸旋轉角度	度數	在線演示
data-graph-xaxis-start-on-tick	table	移除x軸坐標線和y軸的邊距	1	在線演示
data-graph-xaxis-end-on-tick	table	移除x軸坐標線與圖形右邊的邊距	1	在線演示
data-graph-yaxis-X-formatter-callback	table	X表示坐標軸的下標，例如X=1表示第一個Y軸，x=2表示第二個Y軸。 y軸的格式化函數，最常用的是data-graph-yaxis-1-formatter-callback，有多個Y軸時，請用下標表示	函數名	在線演示
data-graph-xaxis-min	table	x軸的最小值	Number	在線演示
data-graph-xaxis-max	table	x軸的最大值	Number	在線演示
data-graph-xaxis-labels-enabled	table	禁用x軸文字	0或1	在線演示
data-graph-xaxis-labels-font-size	table	x軸文字字號	CSS單位，可以是%\px\em	在線演示
data-graph-yaxis-2-opposite	table	第二個Y軸位置反轉，即顯示在圖表的右側	1	在線演示
data-graph-yaxis-X-reversed	table	y軸順序顛倒，及從大到小的順序顯示。 其中X表示Y軸的下標	1	在線演示
data-graph-xaxis-type	table	x軸類型，只支持一種類型：datetime	datetime	在線演示
data-graph-yaxis-X-stacklabels-enabled	table	在堆疊圖中顯示總值	1	在線演示

7、坐標點（Point）

屬性所在HTML標簽說明取值或取值類型例子

data-graph-datalabels-enabled	table th	是否顯示圖中每個點的值。 可以定義在table標簽中用以控制整系列數據或者僅僅定義在某個th標簽中用以控制某系列數據。th標簽中的定義會覆蓋掉table 中所定義的值	0或1	在線演示
data-graph-datalabels-align	table	根據點的位置顯示點值的位置	right center left	在線演示
data-graph-point-callback	table	點值顯示格式化函數	函數名	在線演示
data-graph-datalabels-color	table th	顯示顏色 可以定義在table標簽中用以控制整系列數據或者僅僅定義在某個th標簽中用以控制某系列數據。th標簽中的定義會覆蓋掉table 中所定義的值	String	在線演示

8、垂直線（Vertical Lines）

屬性所在HTML標簽說明取值或取值類型例子

data-graph-vline-x	th	在圖表中繪制一條垂直線，必須配合使用data-graph-vline-height屬性	Number	在線演示
data-graph-vline-height	th	垂直線高度，必須配合使用data-graph-vline-x屬性	Number	在線演示
data-graph-vline-name	th	垂直線的名字，以Tooltip形式展示	String	在線演示

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文檔。

轉載于:https://www.cnblogs.com/henuyuxiang/p/4253743.html

總結

以上是生活随笔為你收集整理的jQuery HighchartsTableHTML表格转Highcharts图表插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。