专栏首页令仔很忙新手学HighCharts(二)----对比柱状图的动态加载

新手学HighCharts(二)----对比柱状图的动态加载

上一篇文章 新手学HighCharts(一)—-基本使用 中介绍了highCharts的基本使用,今天给大家介绍对比柱状图的使用,贴张图先:

highcharts数据显示形式


在highcharts中有一个属性series,这个属性主要是配置图表要展示的数据。

var series =  [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 
         26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
         24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 
         17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
         16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

每一个系列是个数组,每一项在图片中都会生成图表中一个图标分类的数据,如上面的柱状图,每一个系列都是一个不同颜色的柱状。

那么如何动态加载这些数据呢?刚才在上面说了,series中每一个系列都是一个数组,每一个系列的加载形式是这样的,举个栗子:

[Array[2],Array[2],Array[2],Array[2]]

这个就是一个简单的柱状图:

再往里面细分一下是这样的

[[“平均值”,70],[“最高分”,99],[“最低分”,35],[“及格率”,80]]

后台


B层实现层

展示下B层实现类里面具体的实现方法:

/**
     * 根据班级ID和课程ID查询图表数据(集合)
     * @param check_class 班级ID数组
     * @param courseId  课程ID
     * @param exam_DataBase 数据库名称
     * @return
     */
    public List<List<Map<Serializable, Serializable>>> queryChartByCouAndClaList(String check_class, String courseId,String passMark, String dataBaseName)
    {
        StudentScoreBean studentScoreBean;

        List<StudentScore> studentScore=null;

        String[] class_check;

        ScoreAnalyzeByClassView classScore=new ScoreAnalyzeByClassView();

        List<List<Map<Serializable,Serializable>>> listReturnMap=new ArrayList<List<Map<Serializable,Serializable>>>();
        try {
            //远程调用链接
            studentScoreBean=(StudentScoreBean)this.lookupRemoteBean(studentScoreURL);

            class_check = check_class.split(",");
            //循环遍历数组,获取classId
            for(int i=0;i<class_check.length;i++)
            {
                //调用查询方法
                String classId=class_check[i].toString();
                studentScore=studentScoreBean.queryScoreByCourseAndClass(courseId, classId, dataBaseName);

                //数据分析统计
                int max=Integer.parseInt(studentScore.get(0).getTotalScore());
                int min=Integer.parseInt(studentScore.get(0).getTotalScore()); 
                int sum=0;
                int pass=0;
                //最低分、最高分
                //循环遍历获取最高分和最低分
                for(int j=0;j<studentScore.size();j++)
                {
                    int value=Integer.parseInt(studentScore.get(j).getTotalScore());
                    //最大值和最小值
                    if(min>value)
                    {
                        min=value;  //最大值
                    }
                    if(max<value)
                    {
                        max=value;  //最小值
                    }

                    //总和
                    int num=value;
                    sum+=num;

                    //及格人数
                    if(value>=Integer.parseInt(passMark))
                    {
                        pass+=1;
                    }           
                }
                //求平均值
                double avg=sum/studentScore.size(); 
                //及格率
                double passMK=pass*100/studentScore.size();

                classScore.setClassAvgScore(String.valueOf(avg));
                classScore.setClassHighScore(String.valueOf(max));
                classScore.setClassLowScore(String.valueOf(min));
                classScore.setClassPassRate(String.valueOf(passMK));

                Map<Serializable,Serializable> map1=new HashMap<Serializable,Serializable>();
                map1.put("name", "平均分");
                map1.put("count", Double.parseDouble(classScore.getClassAvgScore()));

                Map<Serializable,Serializable> map2=new HashMap<Serializable,Serializable>();
                map2.put("name", "最高分");
                map2.put("count", Double.parseDouble(classScore.getClassHighScore()));

                Map<Serializable,Serializable> map3=new HashMap<Serializable,Serializable>();
                map3.put("name", "最低分");
                map3.put("count", Double.parseDouble(classScore.getClassLowScore()));

                Map<Serializable,Serializable> map4=new HashMap<Serializable,Serializable>();
                map4.put("name", "及格率");
                map4.put("count", Double.parseDouble(classScore.getClassPassRate()));

                List<Map<Serializable,Serializable>> listMap=new ArrayList<Map<Serializable,Serializable>>();
                listMap.add(map1);
                listMap.add(map2);
                listMap.add(map3);
                listMap.add(map4);

                listReturnMap.add(listMap); //在list集合外在嵌套一层list
            }


        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        return listReturnMap;
    }

因为界面显示时用到的不只是一条数据,所以返回值在list外面有嵌套了一层list,每一个List<Map<Serializable,Serializable>>在经过json转换之后,都是一个系列,在嵌套一层list,就是多个系列。

Controller层

Controller层没什么好说的,只是起到一个接受界面数据,传给B层;接受B层处理的数据,返给界面;主要的业务逻辑处理都在B层。

/**
     * 根据班级ID和课程ID查询图表数据(集合)
     * @param request
     * @param response
     */
    @RequestMapping("/queryChartByCouAndClaList")
    public void queryChartByCouAndClaList(HttpServletRequest request,HttpServletResponse response)
    {
        //获取前台界面数据
        String check_class=request.getParameter("Check_val");
        String courseId=request.getParameter("CourseId");
        String passMark=request.getParameter("PassMark");
        //查询数据
        List<List<Map<Serializable, Serializable>>> listChart=scoreAnalyzeFacadeClassBean.queryChartByCouAndClaList(check_class,courseId,passMark,Exam_DataBase);
        //json转换
        jacksonJsonUntil.beanToJson(response, listChart);
    }

前台


JSP

图表显示,jsp中只需要给highcharts定义一个容器存放就行。

<div id="columnChart" style="width:900px; height: 500px; margin-top:20px;"></div>   

JavaScript

在实现动态加载的过程中,重要的地方一个是B层的业务逻辑实现,另一个就是javascript中的一个转换。 当后台数据经过json转换之后,传达js里面的数据形式是这样的:

[Array[4],Array[4]]

这样的话还不能够显示,为什么,因为每个Array下,存的是一个个的对象,给highcharts的数据显示不一样,每一个Array下的具体形式是这样的:

[Object[2],Object[2],Object[2],Object[2]]

每一个Object下再分才是具体的数据

[“平均值”,70]

所以还需要把接受到的数据进行转换,转换成适合highcharts显示的格式:

                var title="班级成绩对比分析";
                var renderToDiv="columnChart";  //要加载到的div
                GetOptions(renderToDiv,title);   //获取highcharts的基本样式
                options.series=new Array();  
                var i,j;  
                for(i=0;i<check_val.length;i++)  //循环赋值
                {
                    options.series[i]=new Object();  //实例化对象
                    options.series[i].name=class_name[i];  //获取班级名称

                    var array=[];  //定义数组
                    for(j=0;j<data[i].length;j++)   //循环获取柱状图数据
                    {
                        var  result=new Array(data[i][j].name,data[i][j].count);
                        array.push(result);
                    }
                    options.series[i].data=array;           
                }

如果你细看的话,就会发现一个问题,其中的GetOptions是哪来的,不要着急,下面给你介绍,Highcharts库使用的是json格式来配置的数据,首先定义highcharts的基本样式

var chart;
var options;
function GetOptions(renderToDiv,title)
{

    options={
            chart: {
                type: 'column',
                renderTo: renderToDiv,  //添加到那个div下
            },
            credits: {
                enabled: false,
            },
            title: {
                text: title
            },
            xAxis: {
                categories: [

                ],
                labels: {
                    rotation: 0,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '总值'
                }
            },
            legend: {
                enabled: true  //图例开关
            },
            tooltip: {
                //pointFormat: '总值',
            },
            series: [{
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }]
    }
}

这些都是一些可以复用的属性,然后再把数据动态的加载到options中,把整个样式放到准备好的盛放容器中就可以了。

chart=new Highcharts.Chart(options);  //实例化一个新的Highcharts图表

这样,图表就成功的动态加载出来了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 视图——机房收费系统

    在第一次做机房收费系统时,学生信息和卡的信息是在同一张表中的,而机房收费系统重构时,对数据库进行了重新设计,学生信息和卡的信息被分到了单独的两张表中(遵照三范...

    令仔很忙
  • Hybrid app(二)----开发主要应用技术

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量...

    令仔很忙
  • UML之状态图

      状态:是指在对象生命周期中满足某些条件、执行某些活动或等待某些事件的一个条件和状况。

    令仔很忙
  • 藏在短链接下的挖矿木马:NovelMiner

    使用短链接跳转到长网址是网友分享链接的常见方式,尤其是在有字数限制的情况下,冗长的网址不利于显示,短链生成无疑是最便捷的服务之一。然而,由于短链接隐藏了其指向的...

    FB客服
  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • Springboot 403

    如果同时进行了filter和CorsConfiguration的配置,OPTIONS请求会返回403,并且控制台提示 Itdoesnothave HTTP ok...

    喜欢天文的pony站长
  • 响铃:救市之作三星S6 edge+能否完成使命?

    大概没有谁比三星更需要一些好消息来振奋市场了。 智能手机市场经过几年的疯狂发展之后现在仿佛进入了一个瓶颈时期。一方面是竞争激烈加剧,另一方面是营销同质化。201...

    曾响铃
  • AReLU: Attention-based Rectified Linear Unit

    地址:http://xxx.itp.ac.cn/pdf/2006.13858.pdf

    绝命生
  • Python 常用库

    下载地址:http://www.riverbankcomputing.com/software/pyqt/download

    Python知识大全

扫码关注云+社区

领取腾讯云代金券