HightCharts与后台交互

　　今天写一下HightCharts与后台是怎么交互的吧。

　　我用的是servlet，没有连接数据库，这样大家粘过来就能看到效果了。

　　先把jar包放进lib里：

　　
　　在web.xml配置要运行的路径：

<servlet><!-- 这个名字随便起，自己明白就行，下面的名字跟这个得是相同的 ，ajax里的URL里写的就是这个名字--><servlet-name>hightCharts</servlet-name><!-- 这个是配置的servlet的包名和类名 --><servlet-class>test.HightCharts</servlet-class> </servlet><servlet-mapping><servlet-name>hightCharts</servlet-name><url-pattern>/hightCharts</url-pattern></servlet-mapping>

　　然后就可以写代码了

　　首先是javabean：

package bean;public class Student {//定义属性//idprivate Integer id;//姓名private String name;//成绩private double grade;//年龄private Integer age;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public double getGrade() {return grade;}public void setGrade(double grade) {this.grade = grade;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}}

　　然后是servlet：

　　　　注意：包不要引错了

package test;import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.codehaus.jackson.map.ObjectMapper;import bean.Student;public class HightCharts extends HttpServlet{@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//这里是不用连接数据库的，直接赋值就行了，但是实际做时，是要从数据库取值的//在数据库建个表，在这查询出来就行了，从第一行到第23行就用不到了//new一个新对象，给新对象赋值 //第一行Student stu = new Student();stu.setId(1);stu.setName("John");stu.setGrade(100);stu.setAge(18);Student stu2 = new Student();stu2.setId(2);stu2.setName("Alice");stu2.setGrade(95);stu2.setAge(19);Student stu3 = new Student();stu3.setId(3);stu3.setName("andy");stu3.setGrade(90);stu3.setAge(20);//把多个对象一块放到list集合里List list = new ArrayList();list.add(stu);list.add(stu2);list.add(stu3);  //第23行//把list集合放到json数组里ObjectMapper mapper=new ObjectMapper();String json = mapper.writeValueAsString(list);//发送json，关闭jsonPrintWriter out = response.getWriter();out.print(json);out.close();}
}

　　最后jsp页面：

<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/highcharts.js"></script>
<script type="text/javascript">$(function(){//给姓名定义了两个全局变量,方便下面字符串拼接names = "";cate = "";//给成绩数据定义了两个全局变量,方便下面字符串拼接grades = "";datas = "";//给年龄定义了两个全局变量,方便下面字符串拼接agee="";ages="";$.ajax({url:"hightCharts",async:false, //同步，默认是异步，这个必须要写，不然在ajax外面是取不到值的，success:function(data){for(var index in data){//取值var name=data[index].name;var grade=data[index].grade;var age=data[index].age;//把单个数据循环从后台拿到的json数组里取出来，拼接成字符串cate=names += ",'"+name+"'"; datas=grades += ","+grade+"";ages=agee+=","+age+"";}cate=names.substring(1); //前面拼接字符串，逗号是放在前面的，这个意思是截取掉第一个字符cate="["+cate+"]";  //到这一步是把字符串拼接成json数组的样式，但不是json数组datas=grades.substring(1);datas="["+datas+"]";ages=ages.substring(1);ages="["+ages+"]";},dataType:"json",});$("#container").highcharts({    //图表展示容器，与div的id保持一致
            chart: {type:'column',    //指定图表的类型，默认是折线图（line）
            },title: {text:'这是我的图表', //指定图表标题
            },xAxis: { //指定X分组categories: eval(cate), //eval是把字符串转成json格式
            },yAxis: {title: {text:'something', //指定Y轴的标题
                },},series: [ //指定数据列
                {name:'grade', //数据列名data:eval(datas), //数据
                },{name:'age',data:eval(ages),}],});}); </script><body><div id="container" style="width: 600px; height: 400px;"></div></body>

　　运行效果：

　　　　把鼠标放到柱形图的柱状上，会出来相对应的数据

　　好了，HightCharts就到这里，明天见

转载于:https://www.cnblogs.com/mtmt/p/5602388.html

HightCharts与后台交互相关推荐

笔记：前端与后台交互
前端与后台交互由于最近和大牛聊天,所得一些感悟,写下来,以勉励自己交互方式 http请求(问答模式) 通过传统的发送请求接收相应,一问一答的模式获得数据,主要负责传递参数,接收数据模版,渲染数据, ...
AngularJS 学习笔记 - $http.post 跟后台交互
为什么80%的码农都做不了架构师?>>> 在使用$http.post 向后台post数据时,采用$http.post(url, data) 的方式,后台无法接收到数据代码: ...
微信小程序与后台服务器交互,微信小程序与后台交互----传递和回传时间
wxml代码日期选择器当前选择: {{date}} 提交返回的值:{{date2}} index.js代码 abc: function (e) {//该函数用于和后台交互 var that = ...
easyui框架前后端交互_Easyui Datagrid增删改及后台交互(java)
最近项目的特殊性可算是把我折腾得够呛,从最开始的整站JS,到现在的Liferay,且不说后台,单单前台框架就让我从Dojo到YUI又到AUI.jQuery.ExtJS,常用API翻了一遍,常见问题解决 ...
JSON数据格式以及与后台交互数据转换实例
/*作者:烟大阳仔时间:20131013介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4 ...
flash as3与后台php交互用户注册例子,as3与PHP后台交互2
怎么样,是不是也很方便的实现了as3和后台的数据传输?恩,现在我们的程序可以双向交互数据了,但这只是一些简单的数据,如果你要传输带有结构的数据,(熟悉as2的人都知道loadVars可以自动解析下载数 ...
JEECG - 基于代码生成器的J2EE智能开发框架续六: JEECG 前台页面和后台交互讲解
近期有朋友对 EasyUI和后台交互方式不理解,特做一下简单整理,希望能对大家有所帮助!!! 一般情况下一个功能模块分为:增.删.改.查四个功能点; 针对功能的页面设计如下: [OLD]老式页面设计采 ...
vue后端框架mysql_vue框架之前后台交互、element-ui
vue框架之前后台交互.element-ui vuex(了解) 注:可以完成任意间组件信息交互(移动端) vuex是实现任何组件间的信息交互,可以理解为全局的一个单例,为任何一个组件共享vue仓库里的 ...
java中程序跳转_java程序中先后台交互的两种实现方式以及页面之间的跳转
虽然如今市面上很流行先后端分离,可是在不少企业中仍是使用的是SSH框架,先后端不分离. 那么此类先后端有其自身独特的先后台交互的方式,可是也支持js/jquery.下面对这两种方式作一下概括.java ...

HightCharts与后台交互

HightCharts与后台交互相关推荐

最新文章

热门文章