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方法的轮播图插件, ...
随机推荐
- 关于appStore评分的相关说明--转自张诚教授
在iOS7以前,评分地址如下 itms-apps://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?typ ...
- gei shilei d
body, p { margin: 0; padding: 0; font-size: 16px; } div { margin: 0 auto; } .wrapper { width: 1080px ...
- 切换加上延迟加载js代码
切换加上延迟加载js代码 (function(){ var tit = $("#tab02 li"), con = $("#wrapmp>div"), c ...
- C# List<> 删除
List<string> l = new List<string>() { "A1", "A2", "A3", &q ...
- java 对象 类 知识点 概览
第30集 面向对象,核心是对象,以对象来思考
- flash 类和对象的关系
每个具体的对象后面都隐藏着抽象的类. flash 中as3.0中所有的类,都是为了创建对象所用的.反过来,所创建的任何具体对象都隐藏着抽象的类. 类可以把它看做函数,类的属性是函数的数据,类的方法是函 ...
- INF文件
百度百科:http://baike.baidu.com/view/637107.htm?fr=ala0_1_1 INF简介 INF是Device INFormation File的英文缩写,是Micr ...
- VCL+FMX 双剑合壁编程
VCL 是经典,FMX 是新生,新生事物总会带来一些好玩新奇的东西.舍弃经典是浪费,不了解新生事物是等死,那么我们来一个二合一双剑合壁又如何呢? 要双剑合壁,就得投些机,取些巧.由于 Delphi / ...
- xml解析代码示例
List<Entry> list = new ArrayList<>(); Entry entry = null; try { int eventType = response ...
- error: 'LOGE' was not declared in this scope
移植了下HAL,发现编译出现如下错误 error: 'LOGE' was not declared in this scope 比较了一下android4.1的 system/core/include ...