在Java中使用Highcharts+Ajax+Json生成动态饼图

2024-04-13 17:48

本文主要是介绍在Java中使用Highcharts+Ajax+Json生成动态饼图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.由于HighCharts运行于JQuery,所以需要引入jQuery。 jquery-1.8.3.min
HighCharts核心js文件 highcharts.js
导出功能需要引入的js exporting.js
完整文件 Highcharts-4.2.5
2.在jsp页面引入如上文件

   	<script type="text/javascript">var chart;
$(function () {$(document).ready(function() {chart = new Highcharts.Chart({chart: {renderTo: 'container',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: '教师绩效分析图'},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,color: '#000000',connectorColor: '#000000',format: '<b>{point.name}</b>: {point.percentage:.1f} %'},showInLegend: true}},series: [{type: 'pie',name: '所占比例',}]});});//调用查询,加载数据chaxun();
});function chaxun(){var arr = [];var param = $('#groupS').val();if($('#departmentS').val()!="全部"){param += "&department="+$('#departmentS').val();}if($('#typeS').val()!="全部"){param += "&type="+$('#typeS').val();}$.ajax({type:'get',url:'/SX2/WorkloadAnalysis/getData?group='+param,//请求数据的地址beforeSend:function(XMLHttpRequest){ $('#loading').show();$('#contentDIV').hide();$('#loading').html("<img src='<%=path%>/image/loading.gif' />"); }, success: function(data){$('#contentDIV').show();$('#loading').hide();$(data.data).each(function(index,item){arr.push([item.name,item.num]);});chart.series[0].setData(arr);//数据填充到highcharts上面 },error:function(e){alert("不好意思,请要访问的图标跑到火星去了。。。。");} });};</script>

4.Controller代码

	@RequestMapping("getData")@ResponseBodypublic Map<String,Object> getData(Integer department,Integer group,String type){Map<String,Object> map = new HashMap<String,Object>();map.put("title", "教师绩效考核结果分析");HashMap<String,Object> param = new HashMap<>();param.put("department", department);param.put("group", group);param.put("type", type);List<Map<String,Object>> list = ws.selectWorkloadAnalysis(param);map.put("data",list);return map;}

返回数据样例

{"title":"教师绩效考核结果分析","data":[{"num":0,"name":"0-20分"},{"num":1,"name":"21-40分"},{"num":0,"name":"41-60分"},{"num":0,"name":"61-80分"},{"num":0,"name":"81-100分"}]}

4.请求Controller,网页显示如下:
这里写图片描述

这篇关于在Java中使用Highcharts+Ajax+Json生成动态饼图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/900804

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数