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

最新推荐文章于 2024-05-09 10:50:01 发布

沉默王二

最新推荐文章于 2024-05-09 10:50:01 发布

阅读量2.8w

点赞数 5

文章标签： web前端 chartjs linechart

本文链接：https://blog.csdn.net/qing_gee/article/details/70171717

版权

大前端专栏收录该内容

52 篇文章 146 订阅

订阅专栏

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);// 配置项
			}
		}
	});

});