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