Web前端做月度销售额的走势图时,Chartjs是一个不错的选择,展示效果令人满意,使用方法也很简单。
展示效果如下:
数据如下:
###第一步、获取数据
public void datableGoodAmountByLastMonths(HttpServletResponse response) { // 获取数据的list集合。 List<HashMap> result = this.goodOrderService.getGoodAmountByShopUidLastMonths(InfoEL.getContextUid(), 7); // 转成json Map<String, Object> map = new HashMap<String, Object>(); map.put("statusCode", 200); map.put("result", value); String jsonText = JSON.toJSONString(map); // 写入到response PrintWriter writer = null; try { response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType(contentType); writer = response.getWriter(); writer.write(jsonText); writer.flush(); } catch (IOException e) { throw new OrderException(e.getMessage()); } finally { if (writer != null) writer.close(); } }
###第二步、在页面上创建Line Chart
<canvas id="salesChart" href="${ctx}/seller/datableGoodAmountByLastMonths" style="height: 340px;"></canvas>
通过赋值href把获取数据的url传递给chartjs。
设置linechart的参数,关键参数我已中文注解。
// linechart var areaChartOptions = { // 轴线的颜色 scaleLineColor : "rgba(60,141,188,0.8)", scaleShowLabels : true,// y轴上刻度的数值显示 // 显示轴线、以及刻度,默认为true showScale : true, // 在图标上显示网状表格。默认为false scaleShowGridLines : false, // 线条是否显示弧度,默认为true bezierCurve : false, // 显示数据线上的坐标点,默认为true,我认为显示出来比较好,否则鼠标找点很困难。 pointDot : true, // 响应式 responsive : true, // String - Colour of the grid lines scaleGridLineColor : "rgba(0,0,0,.05)", // Number - Width of the grid lines scaleGridLineWidth : 1, // Boolean - Whether to show horizontal lines // (except X axis) scaleShowHorizontalLines : true, // Boolean - Whether to show vertical lines (except // Y axis) scaleShowVerticalLines : true, // Number - Tension of the bezier curve between // points bezierCurveTension : 0.3, // Number - Radius of each point dot in pixels pointDotRadius : 4, // Number - Pixel width of point dot stroke pointDotStrokeWidth : 1, // Number - amount extra to add to the radius to // cater for hit detection outside the drawn point pointHitDetectionRadius : 20, // Boolean - Whether to show a stroke for datasets datasetStroke : true, // Number - Pixel width of dataset stroke datasetStrokeWidth : 2, // Boolean - Whether to fill the dataset with a // color datasetFill : true, // String - A legend template legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>", // Boolean - whether to maintain the starting aspect // ratio or not when responsive, if set to false, // will take up entire container maintainAspectRatio : true };
###第三步,将数据赋值给linechart
$(function() { $.ajax({ type : 'POST', url : $("#salesChart").attr("href"), dataType : "json", cache : false, success : function(json) { // 判断获取的数据状态是否为200正常响应 if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { // 整理数据,chartjs需要数组的赋值,比起Morris(只需要指明x、y坐标即可)图标来说,这一点不方便 var labels = []; var data = []; var data1 = []; for (var i = 0; i < json.result.length; i++) { data.push(json.result[i].good_amount);// 第一组数据交易额 data1.push(json.result[i].good_count);// 第二组数据 labels.push(json.result[i].all_day);// 组装x轴上显示得label } // LINE CHART,需要获取canvas的dom节点 var areaChartCanvas = $("#salesChart").get(0).getContext("2d"); var areaChart = new Chart(areaChartCanvas); // 画线 areaChart.Line({ labels : labels,// x轴上显示得label datasets : [ { label : "销售额", // 线条颜色 fillColor : "rgba(60,141,188,0.9)", strokeColor : "rgba(60,141,188,0.8)", pointColor : "#3b8bba", pointStrokeColor : "rgba(60,141,188,1)", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(60,141,188,1)", // 第一条线的数据 data : data }, { label : "销量", fillColor : "rgba(210, 214, 222, 1)", strokeColor : "rgba(210, 214, 222, 1)", pointColor : "rgba(210, 214, 222, 1)", pointStrokeColor : "#c1c7d1", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : data1 }, ] }, areaChartOptions);// 配置项 } } }); });
OK,linechart的使用总结完毕。
最近,有不少读者问我是怎么学习的,那我干脆就把我看过的一些优质书籍贡献出来:
计算机基础入门推荐:《程序是怎样跑起来的》、《网络是怎样连接的》、《计算机是怎样跑起来的的》
进一步认识计算机网络:《计算机网络:自顶向下》、《图解http》
数据结构+算法入门:《大话数据结构》、《阿哈算法》
算法进阶:《算法第四版》、《编程珠玑》
由于我是 Java 技术栈的,顺便推荐几本 Java 的书籍,从左到由的顺序看到
Java:《Java核心技术卷1》、《编程思想》、《深入理解Java虚拟机》、《effective Java》、《Java并发编程的艺术》
数据库:《mysql必知必会》、《MySQL技术内幕:InnoDB存储引擎》
就先介绍这么多,这些都是最基础最核心的,希望对那些不知道看什么书的同学有所帮助。