系统开发中flot插件做折线图

关注

原创最新推荐文章于 2026-06-28 09:45:35 发布 909 阅读 AI 写同款· GEO 优化 ›

Flot画折线图 参考： flot 中文详解http://www.cnblogs.com/qiudan/archive/2012/06/13/2547719.html flot数据格式介绍：http://www.jqueryflottutorial.com/cn/jquery-flot-data-format.html Q1 x轴时间差8小时参考jquery flotx轴阅读详情

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />


<link href="bootstrap/extend/jasny-bootstrap/css/jasny-bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap/extend/jasny-bootstrap/css/jasny-bootstrap-responsive.min.css" rel="stylesheet" />
<link href="bootstrap/extend/bootstrap-wysihtml5/css/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" />


<link rel="stylesheet" href="theme/scripts/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.min.css" />


<link rel="stylesheet" href="theme/css/glyphicons.css" />


<link rel="stylesheet" href="bootstrap/extend/bootstrap-select/bootstrap-select.css" />
<link rel="stylesheet" href="bootstrap/extend/bootstrap-toggle-buttons/static/stylesheets/bootstrap-toggle-buttons.css" />


<link rel="stylesheet" media="screen" href="theme/scripts/pixelmatrix-uniform/css/uniform.default.css" />


<script src="theme/scripts/jquery-1.8.2.min.js"></script>


<script src="theme/scripts/modernizr.custom.76094.js"></script>


<link rel="stylesheet" media="screen" href="theme/scripts/jquery-miniColors/jquery.miniColors.css" />


<link rel="stylesheet" href="theme/css/style.min.css?1361377748" />


<script src="theme/scripts/less-1.3.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
</head>
<body>

<div class="separator line"></div>
<h3 class="glyphicons stats"><i></i>用户活跃度</h3>
<div class="widget widget-4 widget-body-white">
<div class="widget-body">
<div id="chart_lines_fill_nopoints" style="height: 250px; padding: 0px; position: relative;">
</div>
</div>


<script src="theme/scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>



<script src="theme/scripts/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>


<script src="theme/scripts/jquery-miniColors/jquery.miniColors.js"></script>


<script>
var themerPrimaryColor = '#71c39a';
</script>
<script src="theme/scripts/jquery.cookie.js"></script>
<script src="theme/scripts/themer.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<script src="theme/scripts/flot/jquery.flot.js" type="text/javascript"></script>
<script src="theme/scripts/flot/jquery.flot.pie.js" type="text/javascript"></script>
<script src="theme/scripts/flot/jquery.flot.tooltip.js" type="text/javascript"></script>
<script src="theme/scripts/flot/jquery.flot.selection.js"></script>
<script src="theme/scripts/flot/jquery.flot.resize.js" type="text/javascript"></script>
<script src="theme/scripts/flot/jquery.flot.orderBars.js" type="text/javascript"></script>


<script src="theme/scripts/DataTables/media/js/jquery.dataTables.min.js" charset="UTF-8"></script>
<script src="theme/scripts/DataTables/media/js/DT_bootstrap.js" charset="UTF-8"></script>

<script>
//x轴和节点为固定数据
var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10, 155], [11, 155], [12, 155]];

$.plot($("#chart_lines_fill_nopoints"), [{ label: "uuuuu", data: vData}],
{
series: { lines: { show: true }, points: { show: true} },
xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 }, //指定固定的显示内容
yaxis: { ticks: 5, min: 0 } //在y轴方向显示5个刻度，此时显示内容由 flot 根据所给的数据自动判断
}
);

//调用后台数据
var vSend = [[1, send_count6], [2, send_count5], [3, send_count4], [4, send_count3], [5, send_count2], [6, send_count1],[7, send_count0]];
var vReceive = [[1, receive_count6], [2, receive_count5], [3, receive_count4], [4, receive_count3], [5, receive_count2], [6, receive_count1],[7, receive_count0]];

$.plot($("#chart_lines_fill_nopoints"), [{ label: "发送消息", data: vSend},{ label: "接收消息", data: vReceive}],
{
series: { lines: { show: true }, points: { show: true} },
xaxis: { ticks: [[1, mydataArray[0]], [2, mydataArray[1]], [3, mydataArray[2]], [4, mydataArray[3]], [5, mydataArray[4]], [6, mydataArray[5]],[7,mydataArray[6]]], min: 1, max: 7 }, //指定固定的显示内容
yaxis: { ticks: 5, min: 0 } //在y轴方向显示5个刻度，此时显示内容由 flot 根据所给的数据自动判断
}
);

</script>


<script src="theme/scripts/jquery.ba-resize.js"></script>


<script src="theme/scripts/pixelmatrix-uniform/jquery.uniform.min.js"></script>


<script src="bootstrap/js/bootstrap.min.js"></script>


<script src="bootstrap/extend/bootstrap-select/bootstrap-select.js"></script>
<script src="bootstrap/extend/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js"></script>
<script src="bootstrap/extend/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js"></script>
<script src="bootstrap/extend/jasny-bootstrap/js/jasny-bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap/extend/jasny-bootstrap/js/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="bootstrap/extend/bootbox.js" type="text/javascript"></script>
<script src="bootstrap/extend/bootstrap-wysihtml5/js/wysihtml5-0.3.0_rc2.min.js" type="text/javascript"></script>
<script src="bootstrap/extend/bootstrap-wysihtml5/js/bootstrap-wysihtml5-0.0.2.js" type="text/javascript"></script>


<script src="theme/scripts/load.js"></script>
</body>
</html>