前端应用chart.js绘制折线图使用笔记
之前使用chart.js画了一个死的页面,当时没做的太详细,所以现在看看页不太清除具体都是什么意思。先看下页面效果。
只有5个点,数据全是1,都是假的,但是是这个样子。
首先这个应用起来很方便,需要有两个js就行了。
Chart.js
excanvas.min.js
首先下载这两个js
再来看页面
<html> <head> <script type="text/javascript" src="<c:url value="/resources/js/Chart.js" />"></script> <!--[if lte IE 8]><script src="<c:url value="/resources/js/excanvas.min.js" />"></script><![endif]--> <!-- Bootstrap core CSS --> <link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet"> </head> <body><div> <canvas id="myChart" width="600" height="300"></canvas> </div></body> </html>
在添加js之后,页面中只需一个<canvas>标签,具体的操作都在js中
<script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["<fmt:formatDate value="${logList[0].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[1].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[2].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[3].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[4].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />"], datasets: [ { label: '# 一月', data: [${logList[0].one}, ${logList[1].one}, ${logList[2].one}, ${logList[3].one}, ${logList[4].one}], borderColor: [ 'rgba(0, 0, 0, 0.8)' ], backgroundColor: [ 'rgba(255, 255, 255, 0)' ], borderWidth: 1 }, { label: '# 二月', data: [${logList[0].two}, ${logList[1].two}, ${logList[2].two}, ${logList[3].two}, ${logList[4].two}], borderColor: [ 'rgba(0, 0, 0, 0.8)' ], backgroundColor: [ 'rgba(255, 255, 255, 0)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true,//纵坐标从零开始 steps: 10, stepValue: 5, max: 10 } }] } } }); </script>
因为先前线太多了,所以我就把它删的只剩两个了,从这里面可以看出来:
type里表示的是要绘制的是什么样的表格。
data里加入的是数据。
options里表示的是图表的样子,这里面看起来比较复杂,稍后再考虑它。
先就来看这个data中的
labels表示的是横坐标,我这个横坐标里有时间,所以用的时候要alt+enter导入
datasets中放的是数据,我这个数据的话,只取了5条,在前面也只画5个点,可是如果要有多个点要取,该如何遍历呢,经过一番查找并没有找到好的能够遍历的方法。在后面把数据弄好了,再传过来应该是一个好办法,应该从后台下手。
问题终于得到了解决
在页面加载之后,我通过请求,取得将要放入表中的数据,并对表做好配置
<script> $(function(){ chartGetJson(); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type:'line', data: datas, options: configs }); }); // 线图选项设置 var configs = { scales: { yAxes: [{ ticks: { beginAtZero:true, steps:10, stepValue: 5, max:10 } }] } }; //数据结构(数据参数设置) var datas; // 开始绘制柱状图 function chartGetJson() { var labels = []; var one = []; var two = []; $.ajax({ type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 url: "/cloudPlatform/trendC/chartLoad" ,//url async: false, data: {"pkId": "${pkId}"}, success: function (json) { for (var i = 0; i < json.one.length; i++) { one.push(json.one[i]);// one two.push(json.two[i]);// two labels.push(new Date(json.pickTime[i]).format("yyyy-MM-dd hh:mm:ss"));// 组装x轴上显示得label } datas = { //折线图需要为每个数据点设置一标签。这是显示在X轴上。 labels: labels, //数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的) datasets: [ { label: '# 前轴承温度', //xAxisID: 0, //yAxisID: 0, backgroundColor: "rgba(255, 255, 255, 0)",//背景色 borderColor: "rgba(0, 0, 0, 0.8)", //黑色线 borderWidth: "1px", //线的宽度 data: one //对象数据 }, { label: '# 后轴承温度', backgroundColor: "rgba(255, 255, 255, 0)", borderColor: "rgba(0, 0, 0, 0.8)", //黑色线 borderWidth: "1px", //线的宽度 data: two } ] } } }); } //日期方法 Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小时 "m+" : this.getMinutes(), //分 "s+" : this.getSeconds(), //秒 "q+" : Math.floor((this.getMonth()+3)/3), //季度 "S" : this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) { fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(fmt)){ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return fmt; } </script>
后台数据就正常ajax传过来就可以了。我先给它定的查5条
@RequestMapping(value="chartLoad") public @ResponseBody Map<String,Object> chartLoad(HttpServletRequest request) { Map<String,Object> resultMap = new HashMap<String, Object>(); //查出记录集合 List<EquipmentLog> logList = equipmentLogService.getRecrodByEqId(Integer.parseInt(request.getParameter("pkId")), 5); int num = logList.size();//记录条数 //声明数据变量 int one[] = new int[num]; int two[] = new int[num]; String pickTime[] = new String[num]; //将集合中的记录拼接在一起 for (int i = 0; i < num ; i++ ) { one[i] = logList.get(i).getOne();//one two[i] = logList.get(i).getTwo();//two pickTime[i] = logList.get(i).getPickTime().toString();//pickTime } resultMap.put("one",one); resultMap.put("two",two); resultMap.put("pickTime",pickTime); return resultMap; }这样就好了,数据是活的。