基于Flot的折线图
1.效果图
2.导入相关css js
<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/css/style.css?v=4.1.0" rel="stylesheet">
<!-- js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Flot -->
<script src="/js/plugins/flot/jquery.flot.js"></script>
<script src="/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
3.html
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>用户入库图</h5>
</div>
<div class="ibox-content">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-line-chart-multi"></div>
</div>
</div>
</div>
</div>
4.js
<script>
$(function() {
var arr = [ [ 0, "2018-05-23" ], [ 1, "2018-05-24" ],
[ 2, "2018-05-25" ], [ 3, "2018-05-26" ], [ 4, "2018-05-27" ],
[ 5, "2018-05-28" ], [ 6, "2018-05-29" ], [ 7, "2018-05-30" ],
[ 8, "2018-05-31" ], [ 9, "2018-06-01" ] ];
var oilprices = [
[ 0, 100 ], [ 1, 50 ], [ 2, 40 ], [ 3, 1 ], [ 4, 0 ],
[ 5, 90 ], [ 6, 43 ], [ 7, 57 ], [ 8, 89 ], [ 9, 45 ]
];
[ 0, 10 ], [ 1, 20 ], [ 2, 30 ], [ 3, 5 ], [ 4, 7 ],
[ 5, 60 ], [ 6, 17 ], [ 7, 45 ], [ 8, 50 ], [ 9, 35 ]
];
doPlot("right");
function doPlot(position) {
// $.plot(placeholder, data, options)
// placeholder：绘图要放置的div区域，为jquery对象或者DOM对象。
// data: 绘图需要的数据集合，为一个数组
// options: 自定义绘图的设置
$.plot($("#flot-line-chart-multi"), [ {
data : oilprices,
label : "会员用户入库量", // 用来指示图中该段数据对应的名字
lines : {
show : true
},
points : {
show : true
}
}, {
data : exchangerates,
label : "普通用户入库量",
lines : {
show : true
},
points : {
show : true
}
} ], {
// 定义折线图的label标签信息属性
legend : {
position : 'ne',//Position: 有4个选项"ne", "nw", "se", "sw"表示将label组显示的位置 分别是右上，左上，右下，左下
margin : [ 20, 20 ],//设置其与绘图div边缘的距离
},
//设置坐标轴 xaxis yaxis
yaxis : {
min : 0,//最小值
},
xaxis : {
ticks : arr
},
colors : [ "#1ab394" ],
grid : {
color : "#999999",//字体的颜色
hoverable : true,
clickable : true,
tickColor : "#D4D4D4", //坐标线的颜色
borderWidth : 0,
hoverable : true
},
tooltip : true,
tooltipOpts : {
content : "数量: %y"
}
});
}
});
</script>
4.java
springboot+mybaits+ajax +折现图的源代码