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方法的轮播图插件, ...
随机推荐
- 正则表达式中的\n
搜索文件中的字符,希望每次从每行的开始进行匹配. 所以在表达式开头加了\n 结果发现怎么都匹配不了. string regEx = @"\n\d*\s*!\s*TESTNAME” 最后,偶然 ...
- Yours 的博客开张啦！
虽然申请博客已经1个月了,但是一直没有来写,没办法,题都刷不完,哪有心思写啊``` 现在集训终于完了,有了属于自己的时间了.所以该把以前做的题,学的算法好好的整理整理了.一来顺顺思路,二来也可以给后来 ...
- easyui源码翻译1.32--panel(面板)
前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系 比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
- javaweb学习总结(三十九)——数据库连接池
一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...
- 一个简单的有向图Java实现
最近看了点有向图的内容,参考开源项目做了一个简单版本,直接贴代码. /** * 有向图接口,定义需要实现的各个方法,可以选择使用邻接矩阵或者邻接链表来实现 * @param <V> V代表 ...
- ActionBar官方教程(4)给ActionBar添加操作项及它们的事件处理
Adding Action Items The action bar provides users access to the most important action items relating ...
- asp.net web 开发登录相关操作的控件LoginName、LoginStatus和LoginView控件使用详解
http://book.51cto.com/art/200909/154039.htm http://book.51cto.com/art/200909/154041.htm ASP.NET提供了一套 ...
- 错误信息:A TCP error (10013: 以一种访问权限不允许的方式做了一个访问套接字的尝试。) occurred while listening on IP Endpoint=192.168.1.18:8002.
百度之后,知道这个原因是端口已经被其他进程打开了 使用cmd命令,查看8002端口被哪一个程序占用了 C:\Windows\System32>netstat -ano | find " ...
- 应付发票审批 Hold and Release Names
(N) AP > Setup > Invoice > Hold and Release Names 这里一般默认就可以了.Use the Invoice Hold and Relea ...
- MySQL事务之数据结构
事务是关系型数据库的核心,贯穿整个源代码,先来瞅瞅相关的数据结构,揭开面纱: server层和innodb引擎层分别对应了不同的数据结构,但相互关联: server层需要引擎注册事务,以便server ...