Chartjs:Line chart的使用及必要参数说明-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

简介: Chartjs:Line chart的使用及必要参数说明
+关注继续查看

Web前端做月度销售额的走势图时,Chartjs是一个不错的选择,展示效果令人满意,使用方法也很简单。


展示效果如下:


image.png


数据如下:


image.png


###第一步、获取数据

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


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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7238 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8919 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10521 0
开源库Magicodes.ECharts使用教程
目录 1    概要    2 2    Magicodes.ECharts工作原理    3 2.1    架构说明    3 2.1.1    Axis    4 2.1.2    CommonDefinitions    4 2.
1441 0
iOS 使用Quartz 2D画虚线
画虚线需要用到函数: CGContextSetLineDash 此函数需要四个参数: context – 这个不用多说 phase - 稍后再说 lengths – 指明虚线是如何交替绘制,具体看例子 count – lengths数组的...
734 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载