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

简介: <div class="markdown_views"><p></p><div class="toc"><div class="toc"><ul><li><a href="#highcharts%E6%95%B0%E6%8D%AE%E6%98%BE%E7%A4%BA%E5%BD%A2%E5%BC%8F">highcharts数据显示形式</a></li><li><

    上一篇文章 新手学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图表

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

相关文章
【自己动手画CPU】单总线CPU设计(三)
【自己动手画CPU】单总线CPU设计(三)
607 1
|
11月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
464 0
|
Java API
接入微信支付API v3的两种方式
接入微信支付API v3的两种方式
852 0
|
JavaScript
|
Java 算法 安全
JUC包中的分而治之策略-为提高性能而生
本次分享我们来共同探讨JUC包中一些有意思的类,包含AtomicLong & LongAdder,ThreadLocalRandom原理。
2434 0
|
JSON JavaScript Java
highcharts插件使用总结和开发中遇到的问题及解决办法
这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8, 当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快。 在jsp中使用highchart的步骤: 第一步:引入highchart必需的js文件 --...
1740 0
|
12天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1267 5
|
1天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
11天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1283 87