Chartjs：Line chart的使用及必要參數說明

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

就先介紹這麼多，這些都是最基礎最核心的，希望對那些不知道看什麼書的同學有所幫助。