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

来源：互联网发布：知乎一句话自我介绍编辑：程序博客网时间：2024/05/18 02:56

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的参数，关键参数我已中文注解。

// linechartvar 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的使用总结完毕。

不务正业的IT狗，喜欢读书和写作！

微信扫一扫，关注沉默王二公众号：

0 1