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)
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
2、直线图(line)
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
3、混合图(Column + Area)
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
三、使用文档(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 | 图表类型,该属性是必须的 |
|
在线演示 |
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 | 数据列线条样式 |
|
在线演示 |
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 | 根据点的位置显示点值的位置 |
|
在线演示 |
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图表插件相关推荐
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
- 【jQuery】兼容IE6的图表插件Highcharts
在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示.图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,具体请看& ...
- 前端 环形统计_10款jQuery实现的环形百分比图表插件
1.jQuery实现的环形百分比图表插件 这是一款非常富有创意的jQuery图表插件特效源码,这款jQuery环形百分比图表插件有以下特点:1.图表外观是环形的,因此也十分特别.2.图表数据有百分比显 ...
- 数据呈现图表插件Highcharts介绍+图表联动案例
由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库插件. Highcharts简介 下边的介绍来自Highcharts中文 ...
- html 圆圈图表插件,10款HTML5动画图表插件
创建一个HTML5网页图表应用已经非常简单,利用Canvas更是能绘制出绚丽的动画效果,也就是说你的HTML5图表能动起来,给人不一样的用户体验.本文就主要来分享一些最常用的HTML5图表插件,不仅外 ...
- highcharts图表开发
一.首先引人highcharts图表插件 <!-- 引用highcharts图标插件 --><script type="text/javascript" src= ...
- JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤 第一步 ...
- jquery饼状图插件的指引线_JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤 第一步 ...
- JQuery图表插件之 Highcharts使用指南
Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表. 目 ...
最新文章
- 面试:Java 到底是值传递还是引用传递?
- weblogic从入门到起飞(nodemanager)(五)
- python全排序算法题_Python的100道经典算法题(1)
- Ubuntu下添添加的用户没有sudo权限的解决办法
- 【操作系统】上下文切换
- 完美实现Crysis道路系统,发图纪念一下
- struct 和typedef struct的区别
- 创建MyOffice项目
- paip.win32的internet扩展已停止工作解决大法
- CTP: 初始化成功和TradeAPI、MDAPI登陆成功
- 记一次spring5源码完整编译过程
- 卡皇稳了,RTX3090获鲁大师Q1季度最强显卡!
- 高等数学张宇18讲 第一讲 高等数学常用基础知识
- Android 动画丢帧问题
- 短视频直播电商抖音项目孵化流程运营带货商业计划书方案范本
- 关于Ng-alain的Acl的使用
- ajax怎么实现回调,jQuery API学习之ajax与回调对象篇
- 使用tk.mapper和pagehelper一个bug记录:没有为 'PAGE_TABLE_ALIAS' 的列 4 指定任何列名称
- element表格 频繁切换维度,导致表头渲染有误
- 华华跟奕奕玩游戏(数学期望递推式)
热门文章
- 让一张图片随着手指的移动而移动
- LINUX内核经典面试题
- Core Dump解析(1)
- Process Hacker 一个系统监视工具
- 转载 用ShadowVolume画模型的影子
- beyond compare 3.10在异常关机后无法启动
- iframe子页面与父页面元素的访问以及js变量的访问[zhuan]
- 使用ENTER模拟触发表单提交或者click事件
- 纠结的velocity log那些事(出现Permission denied)
- java new java.text.SimpleDateFormat(yyyyMM01).format(date)