flot图插件使用
<div id="budget-charts"></div>
<script src="../../../plugins/ace/js/flot/jquery.flot.min.js"></script>
<!--<script src="../../../plugins/ace/js/flot/jquery.flot.pie.min.js"></script>-->
<script src="../../../plugins/ace/js/flot/jquery.flot.resize.min.js"></script>
bars: {
align: "center",
barWidth: 0.5
},对x轴文字剧中
<script>
// 收支表
$(function(){
//数据
var d1 = [[1, 4],[4, 1.5],[7,3.8],[10,2.8],[13,5.9],[16,2.3],[19,4.8]];
var d2 = [ [2, 3],[5, 4.8],[8, 2.8],[11,4.7],[14,3.2],[17,3.7],[20,1.5]]; //定义样式
var sales_charts = $('#budget-charts').css({'width':'100%' , 'height':'220px'});
var options = { hoverable: true,
shadowSize: 0,
series: {
//lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
steps: { show: true },
bars: { show: true, },
// 设置阴影的大小，0消除阴影
shadowSize: 5,
// 鼠标悬停时的颜色
highlightColor: { color: [ "red", "red" ] } },
//横坐标的样式
xaxis: { //指定固定的显示内容
ticks: [[1,''],[2,'5月2日'],[3,''],[4,''],[5,'5月3日'],[6,''],[7,''],[8,'5月4日'],[9,''],[10,''],[11,'5月5日'],[12,''],[13,''],[14,'5月6日'],[15,''],[16,''],[17,'5月7日'],[18,''],[19,''],[20,'5月8日']],
tickLength: 0,
},
//竖坐标的样式
yaxis: { //指定固定的显示内容
ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6']],
//数轴最小值
min: 0,
//数轴最大值
max: 7,
tickDecimals: 5 },
grid: {
// 是否显示格子
show: true,
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1, borderColor:'#CCC',
clickable: true,
hoverable: true,
}};
$.plot("#budget-charts", [
{ label: "收入（元）", data: d1,color: "#488c13" },
{ label: "支出（元）", data: d2,color: "#ff9500"}
],options
); // 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
} var previousPoint = null;
// 绑定提示事件
$("#budget-charts").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0); var tip = "展现量：";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
})
// 财务盈利表
$(function(){
//数据
var d1 = [[1, 4],[5, 3.8],[9,2.7],[13,2.8],[17,3]];
var d2 = [[2, 3],[6, 4.9],[10, 1.4],[14,4.7],[18,3.5]];
var d3 = [[3, 5],[7, 1.9],[11,3.5],[15,4.7],[19,1]]; //定义样式
var sales_charts = $('#profit-charts').css({'width':'100%' , 'height':'220px'});
var options = { hoverable: true,
shadowSize: 0,
series: {
//lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
steps: { show: true },
bars: { show: true, },
// 设置阴影的大小，0消除阴影
shadowSize: 5,
// 鼠标悬停时的颜色
highlightColor: { color: [ "red", "red" ] } },
//横坐标的样式
xaxis: { //指定固定的显示内容
ticks: [[1,''],[2.5,'5月2日'],[3,''],[4,''],[5.5,''],[6.5,'5月3日'],[7,''],[8,''],[9,''],[10.5,'5月4日'],[11,''],[12,''],[13,''],[14.5,'5月5日'],[18.5,'5月6日']],
tickLength: 0,
},
//竖坐标的样式
yaxis: { //指定固定的显示内容
ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6']],
//数轴最小值
min: 0,
//数轴最大值
max: 7,
tickDecimals: 5 },
grid: {
// 是否显示格子
show: true,
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1, borderColor:'#CCC',
clickable: true,
hoverable: true,
}};
$.plot("#profit-charts", [
{ label: "收入（元）", data: d1,color: "#488c13" },
{ label: "支出（元）", data: d2,color: "#ff9500"},
{ label: "增值服务（元）", data: d3,color: "#0f90da"}
],options
); // 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
} var previousPoint = null;
// 绑定提示事件
$("#profit-charts").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0); var tip = "展现量：";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
})
// 充值表
$(function(){
//数据
var d1 = [ [0,1],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ]; //定义样式
var sales_charts = $('#sales-charts1').css({'width':'100%' , 'height':'220px'});
var options = { hoverable: true,
shadowSize: 0,
series: {
//lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
lines: { show: true },
points: { show: true },
// 设置阴影的大小，0消除阴影
shadowSize: 5,
// 鼠标悬停时的颜色
highlightColor: { color: [ "red", "red" ] } },
//横坐标的样式
xaxis: { //指定固定的显示内容
ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
tickLength: 0, },
//竖坐标的样式
yaxis: { //指定固定的显示内容
ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
//数轴最小值
min: 0,
//数轴最大值
max: 6,
tickDecimals: 5 },
grid: {
// 是否显示格子
show: true,
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1,
borderColor:'#CCC',
clickable: true,
hoverable: true,
}};
$.plot("#sales-charts1", [ { label: "", data: d1,color: "#ee7951" } ],options); // 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
} var previousPoint = null;
// 绑定提示事件
$("#sales-charts1").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0); var tip = "展现量：";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
})
// 提现表
$(function(){
//数据
var d1 = [ [0, 0],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ]; //定义样式
var sales_charts = $('#sales-charts2').css({'width':'100%' , 'height':'220px'});
var options = { hoverable: true,
shadowSize: 0,
series: {
//lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
lines: { show: true },
points: { show: true },
// 设置阴影的大小，0消除阴影
shadowSize: 5,
// 鼠标悬停时的颜色
highlightColor: { color: [ "red", "red" ] } },
//横坐标的样式
xaxis: { //指定固定的显示内容
ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
tickLength: 0, },
//竖坐标的样式
yaxis: { //指定固定的显示内容
ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
//数轴最小值
min: 0,
//数轴最大值
max: 6,
tickDecimals: 5 },
grid: {
// 是否显示格子
show: true,
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1,
borderColor:'#CCC',
clickable: true,
hoverable: true,
}};
$.plot("#sales-charts2", [ { label: "", data: d1,color: "#ee7951" } ],options); // 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
} var previousPoint = null;
// 绑定提示事件
$("#sales-charts2").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0); var tip = "展现量：";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
})
// 任务收益表
$(function(){
//数据
var d1 = [ [0, 0],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ]; //定义样式
var sales_charts = $('#sales-charts3').css({'width':'100%' , 'height':'220px'});
var options = { hoverable: true,
shadowSize: 0,
series: {
//lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
lines: { show: true },
points: { show: true },
// 设置阴影的大小，0消除阴影
shadowSize: 5,
// 鼠标悬停时的颜色
highlightColor: { color: [ "red", "red" ] } },
//横坐标的样式
xaxis: { //指定固定的显示内容
ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
tickLength: 0, },
//竖坐标的样式
yaxis: { //指定固定的显示内容
ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
//数轴最小值
min: 0,
//数轴最大值
max: 6,
tickDecimals: 5 },
grid: {
// 是否显示格子
show: true,
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1,
borderColor:'#CCC',
clickable: true,
hoverable: true,
}};
$.plot("#sales-charts3", [ { label: "", data: d1,color: "#ee7951" } ],options); // 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
} var previousPoint = null;
// 绑定提示事件
$("#sales-charts3").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0); var tip = "展现量：";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
})
// 增值收益表
$(function(){
//数据
var d1 = [ [0, 0],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ]; //定义样式
var sales_charts = $('#sales-charts4').css({'width':'100%' , 'height':'220px'});
var options = { hoverable: true,
shadowSize: 0,
series: {
//lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
lines: { show: true },
points: { show: true },
// 设置阴影的大小，0消除阴影
shadowSize: 5,
// 鼠标悬停时的颜色
highlightColor: { color: [ "red", "red" ] } },
//横坐标的样式
xaxis: { //指定固定的显示内容
ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
tickLength: 0, },
//竖坐标的样式
yaxis: { //指定固定的显示内容
ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
//数轴最小值
min: 0,
//数轴最大值
max: 6,
tickDecimals: 5 },
grid: {
// 是否显示格子
show: true,
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1,
borderColor:'#CCC',
clickable: true,
hoverable: true,
}};
$.plot("#sales-charts4", [ { label: "", data: d1,color: "#ee7951" } ],options); // 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
} var previousPoint = null;
// 绑定提示事件
$("#sales-charts4").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0); var tip = "展现量：";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
})
</script>
flot图插件使用的更多相关文章
- intellij idea 高级用法之：集成JIRA、UML类图插件、集成SSH、集成FTP、Database管理
之前写过一篇IntelliJ IDEA 13试用手记,idea还有很多高大上的功能,易用性几乎能与vs.net媲美,反正我自从改用idea后,再也没开过eclipse,今天来看几个高级功能: 一.与J ...
- 基于jQuery的宽屏可左右切换的焦点图插件
之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览 源码 ...
- 一款基于jQuery多图切换焦点图插件
这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...
- 基于jQuery的美食时间轴焦点图插件
这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 2018年设计师都在用的PS切图插件--摹客iDoc
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
随机推荐
- Grails默认首页的修改
有些人使用IDEA开发Grails,开发阶段使用Grails自带的默认首页可以方便我们开发,但是开发结束后想要修改默认的首页,如何修改呢? 1.打开grails-app 文件下conf下的UrlMap ...
- Fckeditor漏洞利用总结
查看编辑器版本FCKeditor/_whatsnew.html——————————————————————————————————————————————————————— —————— 2. Ver ...
- String类的split方法以及StringTokenizer
split方法可以根据指定的表达式regex将一个字符串分割成一个子字符串数组. 它的参数有两种形式,也即:split(String regex)和split(String regex, int li ...
- jar包中的类如何读取包内和包外的配置文件
最近将代码打包成jar包,关于如何处理读取配置文件的问题特此记录一下. out.properties a.jar -com -a.class -in.properties 如上所示,out.prope ...
- RedHat Linux 下安装MPlayer 编译源代码方式
http://blog.csdn.net/hotday_kevin/article/details/6874703
- python描述符descriptor(二)
python内置的描述符 python有些内置的描述符对象,property.staticmethod.classmethod,python实现如下: class Property(object): ...
- hadoop运行流程分析源代码级
前言: 最近一直在分析hadoop的运行流程,我们查阅了大量的资料,虽然从感性上对这个流程有了一个认识但是我总是感觉对mapreduce的运行还是没有一个全面的认识,所以决定从源代码级别对mapred ...
- poj3678
题目给的太裸,显然2sat: 还是用i表示xi=true(1), i+n表示xi=false(0) 这题唯一要说的是一种情况,当xi必须=true或xi必须=false这种情况下怎么弄 比如这道题出现 ...
- C#如何获取真实IP地址
大家获取用户IP地址常用的方法是 C# 代码 复制 string IpAddress = ""; if((HttpContext.Current.Request.Serve ...
- CDN原理
要了解CDN的实现原理,首先让我们来回顾一下网站传统的访问过程,以便理解其与CDN访问方式之间的差别: 由上图可见,传统的网站访问过程为:1. 用户在浏览器中输入要访问的域名:2. 浏览器向域名解析服 ...