Java web数据可视化实现原理解析

这周用java web制作了全国各个省份的疫情数据的可视化,做的是最基础的柱状图。

先导入

相应的echarts包和插件

<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
      title: {
        text: '全国各省确诊人数'
      },
      tooltip: {},
      legend: {
        data:['确诊人数'],
        width:'auto',
        height:'auto'
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '确诊人数',
        type: 'bar',
        data: []
      }]
    });
    myChart.showLoading();
    var names=[];  //类别数组(实际用来盛放X轴坐标值)
    var nums=[];  //销量数组(实际用来盛放Y坐标值)
    // 使用刚指定的配置项和数据显示图表。

这个是echarts的基本框架具体的数值要通过ajax向servlet发送请求从而获取数据库的数据,

$.ajax({
    type : "post",
    async : true,      //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
    url : "search",  //请求发送到TestServlet处
    success : function(resultJson) {
      var result= jQuery.parseJSON(resultJson);
      //请求成功时执行该函数内容,result即为服务器返回的json对象
      if (result) {
        for(var i=0;i<result.length;i++){
           names.push(result[i].name);  //挨个取出类别并填入类别数组
           nums.push(result[i].value);
          }
          myChart.hideLoading();  //隐藏加载动画
          myChart.setOption({    //加载数据图表
            xAxis: {
              data: names
            },
            series: [{
              // 根据名字对应到相应的系列
              name: '确诊人数',
              data: nums
            }]
          });

      }
    },
    error : function(errorMsg) {
      //请求失败时执行该函数
    alert("图表请求数据失败!");
    myChart.hideLoading();
    }
  });

在servlet里面要将数据放回成json格式

request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=utf-8");
    System.out.println("1515");
    List<Data> Data = null;
    Data = DBUtil.getAll();
    List<Mydata> mydata = new ArrayList<Mydata>();
    for (Data data : Data) {
      Mydata info = new Mydata();
      info.setName(data.getProvince());
      info.setValue(data.getConfirmed());
      mydata.add(info);
    }
    Gson gson = new Gson();
    String json = gson.toJson(mydata);
    System.out.println(json);
    response.getWriter().write(json);

这里还要注意要想用json格式必须导入json所需要的包,否则会显示错误。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Javaweb使用cors完成跨域ajax数据交互

    跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. cors 全称:Cross-Origin Resource Sharing 中文意思:跨域资源共享 它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而

  • javaweb中mysql数据库连接步骤方法及其实例

    一.直接连接,不封装到工具类中,主要步骤: 先导包:mysql-connector-java-5.0.8-bin.jar(点击跳转到下载界面),放在WebRoot/WEB-INF/lib/下 1.加载驱动//com.MySQL.jdbc.Driver 2.获取连接 Connection对象 3.获取用于向数据库发送SQL的Statement对象 4.执行sql,获取数据,解析数据 5.关闭连接,释放资源 /*协议:子协议://主机:端口/数据库名*/ Stringurl="jdbc:mysql:

  • java web开发中大量数据导出Excel超时(504)问题解决

    import java.io.IOException; import java.io.OutputStream; import java.lang.reflect.Field; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Map.Entry; impo

  • 详解javaweb中jstl如何循环List中的Map数据

    详解javaweb中jstl如何循环List中的Map数据 第一种方式: 1:后台代码(测试) List<Map<String, Object>> list = new ArrayList<Map<String,Object>>(); Map<String, Object> map = null; for (int i = 0; i < 4; i++) { map = new HashMap<String, Object>();

  • Javaweb实现在线人数统计代码实例

    这篇文章主要介绍了Javaweb实现在线人数统计代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 session并不是浏览器关闭时销毁的,而是在session失效的时候销毁下列代码就是监测session创建.销毁 package com.my.count; import javax.servlet.http.*; public class SessionCounter implements HttpSessionListener { pr

  • Javaweb监听器实例之统计在线人数

    本文实例为大家分享了Javaweb统计在线人数示的具体代码,供大家参考,具体内容如下 1. 实现功能 统计在线人数 显示每个人的sessionId.Ip.第一次登录时间 2. 运用监听器种类 HttpSession ServletRequest 3. 实现思想 每一个用户对应着一个session,所以在每次session被创建时,num++: 实现一个用户类(sessionID.IP.Date) 获取IP地址的方法需要用request,所以我们要实现一个ServletRequest监听器 每一次

  • 基于java web获取网页访问次数代码实例

    这篇文章主要介绍了基于java web获取网页访问次数代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 ServletContext context = request.getServletContext(); /** * 从ServletContext中获取计数器对象 */ Integer count = (Integer) context.getAttribute("counter"); /** * 如果为空,则在Servl

  • Java web数据可视化实现原理解析

    这周用java web制作了全国各个省份的疫情数据的可视化,做的是最基础的柱状图. 先导入 相应的echarts包和插件 <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ title: { text: '全国各省确诊人数

  • java对象序列化与反序列化原理解析

    这篇文章主要介绍了java对象序列化与反序列化原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.序列化和反序列化的概念 对象转换为字节序列的过程称为对象的序列化.把字节序列恢复为对象的过程称为对象的反序列化. 二.序列化和反序列化的作用 对象的序列化主要有两种用途: 把对象的字节序列永久地保存到硬盘上,通常存放在一个文件中. 在网络上传送对象的字节序列.网络上传输的都是二进制序列. 在很多应用中,需要对某些对象进行序列化,让它们离开内

  • java同步器AQS架构AbstractQueuedSynchronizer原理解析下

    目录 引导语 1.释放锁 1.1.释放排它锁release 1.2.释放共享锁releaseShared 2.条件队列的重要方法 2.1.入队列等待await 2.1.1.addConditionWaiter 2.1.2.unlinkCancelledWaiters 2.2.单个唤醒signal 2.3.全部唤醒signalAll 3.总结 引导语 AQS 的内容太多,所以我们分成了两个章节,没有看过 AQS 上半章节的同学可以回首看一下哈,上半章节里面说了很多锁的基本概念,基本属性,如何获得锁

  • vue.js数据响应式原理解析

    目录 Object.defineProperty() 定义 defineReactive 函数 递归侦测对象的全部属性 流程分析 observe 函数 Observer 类 完善 defineReactive 函数 One More Thing Object.defineProperty() 得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的.详细介绍可以看 MDN 文档,这里特别说明几点: get / set 属性是函数

  • Java流程控制顺序结构原理解析

    这篇文章主要介绍了Java流程控制顺序结构原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 流程控制的概念 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说,程序的流程对运行结果有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能. 流程控制之顺序结构 根据代码的编写顺序,从上往下,依次执行. 顺序结构之流程图 ​ 需求 举例说明顺序结构的执行

  • Java方法覆盖重写实现原理解析

    这篇文章主要介绍了Java方法覆盖重写实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 方法覆盖重写注意事项: 1.必须保证方法名相同,返回值也相同 @Override:写在方法前面,用来检测方法的覆盖重写是否有效,这个注解不是必要的,就算不写,方法覆盖重写符合要求也是正确的 2.子类方法的返回值必须[小于等于]父类方法的返回值 3.子类方法的修饰符必须[大于等于]父类方法的修饰符 继承关系中,父子类构造方法的访问特点: 1.子类构造

  • java instanceof操作符使用及原理解析

    这篇文章主要介绍了java instanceof操作符使用及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 a intanceof A:判断a是否是类A的的一个实例,返回值为boolean public class Person extends Object{} public class Student extends Person{} public class Graduate extends Person{} public clas

  • Java web拦截器inteceptor原理及应用详解

    这篇文章主要介绍了java web拦截器inteceptor原理及应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.简介 java里的拦截器提供的是非系统级别的拦截,也就是说,就覆盖面来说,拦截器不如过滤器强大,但是更有针对性. Java中的拦截器是基于Java反射机制实现的,更准确的划分,应该是基于JDK实现的动态代理.它依赖于具体的接口,在运行期间动态生成字节码. 拦截器是动态拦截Action调用的对象,它提供了一种机制可以使开发

  • Java枚举类接口实例原理解析

    这篇文章主要介绍了Java枚举类接口实例原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 枚举类可以实现一个或多个接口.与普通类实现接口完全一样,枚举类实现接口时,需要实现该接口所包含的方法. 如果需要每个枚举值在调用同一个方法时呈现不同的行为,则可以让每个枚举值在{...}匿名块中实现自己的业务逻辑. public interface IGradeHandler { String getGrade(String studentName)

  • Java日期与时间类原理解析

    这篇文章主要介绍了Java日期与时间类原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 基础知识 日期: 类似于 2018-12-12 时间: 类似于 2018-12-12 12:12:12 时刻: 类似于 2018-12-12 12:12:12 地区: 计算机中的 Locale, 如 zh_CN, en_US 等, 影响着对于日期, 时间, 货币等格式的显示 EpochTime: 从 1970 年 1 月 1 日 UTC+00:00 到

随机推荐