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

POOPE

　　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存储引擎》
  

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