博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Highcharts JS插件(折线图)
阅读量:5967 次
发布时间:2019-06-19

本文共 1812 字,大约阅读时间需要 6 分钟。

hot3.png

第一步:导入js,顺序不能变,否则显示不出来

第二部:后台采用spring MVC

    @RequestMapping("/test2")    public String test2(ModelMap map,String scoreType) {        Date date = new Date();        String format = DateUtil.format(date, DateUtil.DATE).substring(0, 7);        List
 list = ScoreServiceImpl.getdetailScoreForYear(format.substring(0,4),scoreType);        List
 yaer = new ArrayList
();        List
 sumScore = new ArrayList
();        List
 count = new ArrayList
();        for (int i = 0; i < list.size(); i++) {            yaer.add("'"+list.get(i).getsDdate()+"'");            sumScore.add(list.get(i).getSumscore());            count.add(list.get(i).getCount());        }        map.put("year", yaer);//集合传输到前台为json格式        map.put("sumScore", sumScore);        map.put("count", count);        return "gbs/scorecount/yearcount";    }

第三部:前台

 
 $(function () {      var month = ${month};//json格式数组     var sumScore = ${sumScore};     var count = ${count};    //console.log(datalist);     $('#container').highcharts({         title: { text: '本月统计', x: -20 }, //center          subtitle: { text: '积分领取', x: -20 },         // xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] },         xAxis: { categories: month},//month必为数组         yAxis: { title: { text: '领取总量' },          plotLines: [{ value: 0, width: 1, color: '#888888' }] },         tooltip: { valueSuffix: '' },        legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 },          series: [{ name: '领取次数', data: count },{ name: '积分总量', data: sumScore }                      ] }); //多个{name:'',data:[]}用逗号隔开     });

转载于:https://my.oschina.net/u/2255569/blog/335613

你可能感兴趣的文章
HBase 笔记3
查看>>
【Linux】Linux 在线安装yum
查看>>
Atom 编辑器系列视频课程
查看>>
[原][osgearth]osgearthviewer读取earth文件,代码解析(earth文件读取的一帧)
查看>>
使用dotenv管理环境变量
查看>>
温故js系列(11)-BOM
查看>>
Vuex学习
查看>>
bootstrap - navbar
查看>>
切图崽的自我修养-[ES6] 编程风格规范
查看>>
服务器迁移小记
查看>>
FastDFS存储服务器部署
查看>>
Android — 创建和修改 Fragment 的方法及相关注意事项
查看>>
swift基础之_swift调用OC/OC调用swift
查看>>
Devexpress 15.1.8 Breaking Changes
查看>>
ElasticSearch Client详解
查看>>
mybatis update返回值的意义
查看>>
expdp 详解及实例
查看>>
通过IP判断登录地址
查看>>
深入浅出JavaScript (五) 详解Document.write()方法
查看>>
Beta冲刺——day6
查看>>