Highcharts JS插件（折线图）

最新推荐文章于 2023-08-03 21:23:51 发布

weixin_33756418

最新推荐文章于 2023-08-03 21:23:51 发布

阅读量290

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/u/2255569/blog/335613

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

<script type="text/javascript"src="${ctx}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/highcharts.js"></script>
<script type="text/javascript" src="${ctx}/js/gray.js"></script>

第二部：后台采用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<DateForScore> list = ScoreServiceImpl.getdetailScoreForYear(format.substring(0,4),scoreType);
        List<String> yaer = new ArrayList<String>();
        List<String> sumScore = new ArrayList<String>();
        List<String> count = new ArrayList<String>();
        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";
    }

第三部：前台

<script type="text/javascript"src="${ctx}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/highcharts.js"></script>
<script type="text/javascript" src="${ctx}/js/gray.js"></script>
 <script type="text/javascript">
 $(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:[]}用逗号隔开
     });
</script>
<div id="container" style="width: 800px; height: 300px;margin-top: 20px"></div>

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