Chartjs：Line chart的使用及必要参数说明

小鱼儿 2021-05-10 11:18 478阅读 0赞

Web前端做月度销售额的走势图时，Chartjs是一个不错的选择，展示效果令人满意，使用方法也很简单。

展示效果如下：

![这里写图片描述][format_png]

数据如下：

![这里写图片描述][format_png 1]

\#\#\#第一步、获取数据

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

通过赋值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存储引擎》

就先介绍这么多，这些都是最基础最核心的，希望对那些不知道看什么书的同学有所帮助。

> 对了，我介绍的这些书籍，已经顺便帮你整理好了，你可以在我的原创微信公众号『沉默王二』回复『书籍』获取哦

### 有收获？希望老铁们来个三连击，给更多的同学看到这篇文章 ###

1、老铁们，关注我的原创微信公众号「沉默王二」，专注于有趣有益的程序人生，保证你看完有所收获，不信你打我。

2、给二哥点个赞呗，可以让更多的人看到这篇文章，顺便激励下我，嘻嘻。

> 作者info  
> 作者：沉默王二，CSDN 2019年度博客之星，《Web全栈开发进阶之路》作者  
> 原创公众号：『沉默王二』，已写了 250 多篇文章，专注于有趣的 Java 技术和有益的程序人生，期待你的关注。  
> 转载说明：务必注明来源（注明：来源于公众号：沉默王二， 作者：沉默王二）

[format_png]: /images/20210506/46db3d320e724207b9ce92e40b40bc2b.png
[format_png 1]: /images/20210506/712272fbea7c48489a758b648ccbe789.png