码迷,mamicode.com
首页 > Web开发 > 详细

jQuery HighchartsTableHTML表格转Highcharts图表插件

时间:2015-01-27 20:03:30      阅读:3297      评论:0      收藏:0      [点我收藏+]

标签:

版权申明
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
MonthSalesBenefits
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
MonthSalesBenefits
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
MonthSalesBenefits
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、用法

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

jQuery HighchartsTableHTML表格转Highcharts图表插件

标签:

原文地址:http://www.cnblogs.com/henuyuxiang/p/4253743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!