Highcharts获取json数据展现pie饼图
实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取json数据的例子。
服务器端用Servlet3.0实现，JSP页面通过jquery异步请求json数据提供给Highcharts展现。
1、用一个实体类封装要展现的信息
package cn.luxh.app.entity; /**
* 浏览器市场份额
* @author Luxh
* 2012-11-3
*/
public class BrowserShare { //浏览器名称
private String name;
//份额
private float share; public BrowserShare(String name, float share) {
super();
this.name = name;
this.share = share;
} public float getShare() {
return share;
} public void setShare(float share) {
this.share = share;
} public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
} }
2、处理请求的Servlet
package cn.luxh.app.servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import cn.luxh.app.entity.BrowserShare; @WebServlet(name="dataServlet",value="/servlet/dataServlet")
public class DataServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8"); List<BrowserShare> resultList = getData();
Gson gson = new Gson();
String result = gson.toJson(resultList);//转成json数据 PrintWriter out = response.getWriter();
out.write(result);
out.flush();
out.close();
} /**
* 获取数据
*/
private List<BrowserShare> getData() { List<BrowserShare> resultList = new ArrayList<BrowserShare>();
resultList.add(new BrowserShare("Chrome",18.55F));
resultList.add(new BrowserShare("Firefoc",19.99F));
resultList.add(new BrowserShare("IE",54.13F));
resultList.add(new BrowserShare("Oher",0.49F));
resultList.add(new BrowserShare("Oprea",1.63F));
resultList.add(new BrowserShare("Safari",5.21F));
return resultList;
} }
3、JSP页面
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath}/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: 'container', //在哪个区域呈现，对应HTML中的一个元素ID
plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
}, //图表的主标题
title: {
text: '2012年10月份浏览器市场份额'
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
//Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
//图表要展现的数据
series: [{
type: 'pie',
name: '市场份额'
}]
});
}); //异步请求数据
$.ajax({
type:"GET",
url:'${pageContext.request.contextPath}/servlet/dataServlet',//提供数据的Servlet
success:function(data){
//定义一个数组
browsers = [],
//迭代，把异步获取的数据放到数组中
$.each(data,function(i,d){
browsers.push([d.name,d.share]);
});
//设置数据
chart.series[0].setData(browsers);
},
error:function(e){
alert(e);
}
}); });
</script>
</head>
<body> <!-- 图表的呈现区域，和常规图表选项设置中的renderTo: 'container'对应-->
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body>
</html>
4、展现的结果
Highcharts获取json数据展现pie饼图的更多相关文章
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- 微信小程序通过api接口将json数据展现到小程序示例
这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...
- Netflix Falcor获取JSON数据
Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
随机推荐
- vi 操作技巧
输入模式的操作Home光标到行首End 光标到行尾Page Up和Page Down上下翻页Delect删除光标位置的字符 删除操作(命令模式使用)x删除光标处的单个字符dd删除光标所在行dw删除当前 ...
- IP子网掩码划分及设置
IP子网掩码划分及设置 定长子网掩码: 一.子网掩码的计算 TCP/IP网间网技术产生于大型主流机环境中,它能发展到今天的规模是当初的设计者们始料未及的.网间网规模的迅速扩展对IP地址模式的威胁并不是 ...
- 在Activity之间传递数据—获取Activity返回的数据
在获取返回值时要注意的是打开Activity的方式,用方法:startActivityForResult 接收时,重写方法:onActivityResult 在子Activity中,写数据用方法:se ...
- svnserve: E000098: 不能绑定服务器套接字: 地址已在使用
百度一下,所有资料都是 1.查找出目前正在使用的svnserve进程,然后kill掉 ps -aux | grep svnserve kill -9 xxx // xxx代表svnserve对 ...
- MT4 做指标模版
//+------------------------------------------------------------------+ //| guo.mq4 | //| Copyright 2 ...
- MQL5 获取最后一单 利润
///x 最后几单 double getLastProfit(int x) { HistorySelect(,TimeCurrent()); double profit ; long ticket ; ...
- Learn about images & containers
Learn about images & containers Docker Engine provides the core Docker technology that enables i ...
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
- NaN(Not a Number)问题
Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contai ...
- c++ map unordered_map
map operator<的重载一定要定义成const.因为map内部实现时调用operator<的函数好像是const. #include<string> #include& ...