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）

提示：

• 1.请点击右侧选项卡查看代码，关键代码用红色标示
• 2.更多示例请查看 在线演示 >> hctable演示

• Result
• HTML Code
• Javascript Code

ValeurColumn exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

2、直线图（line）

提示：

• 1.请点击右侧选项卡查看代码，关键代码用红色标示
• 2.更多示例请查看 在线演示 >> hctable演示

• Result
• HTML Code
• Javascript Code

ValeurLine exampleSalesBenefitsJanuaryFebruaryMarchAprilMay-5k0k5k10k15k20k

3、混合图（Column + Area）

提示：

• 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属性，下面列举所有配置选项

*注意：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文档。