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

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();
  }
}

// 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
};

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