jQuery HighchartsTableHTML表格转Highcharts图表插件

版权申明
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 example
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

ValeurColumn exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

2、直线图（line）

Line example
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

ValeurLine exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

3、混合图（Column + Area）

Column + area example
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

ValeurColumn + area exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

三、使用文档（Document）

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