Highchart图表动态获取JSON格式数据
Highchart折线图代码
$(function () {
var chartLine = new Highcharts.Chart({
type: 'line',
renderTo: 'container2'
text: '上月已还款金额与本月账单金额对比结果'
subtitle: {
text: ''
categories: []
text: '单位 (元)'
tooltip: {
enabled: false,
formatter: function () {
return '' + this.series.name + '' + this.x + ': ' + this.y + '°C';
plotOptions: {
dataLabels: {
enabled: true
enableMouseTracking: false
series: [{
name: '上月还款金额',
name: '本月消费金额',
function getFormLine() {
return $http.get("/billsDetail/twoMonthChartData").success(function (response) {
//为图表设置值
chartLine.series[0].setData(response.data.lastMonth);
chartLine.series[1].setData(response.data.thisMonth);
chartLine.xAxis[0].setCategories(eval(response.data.categorys));
}).error(function (response) {
$log.debug("请求超时或网络故障!获得列表失败!")
getFormLine();
后端拼JSON代码
public JSONObject listLastMonthAndThismonthBillsData() {
JSONObject json =new JSONObject();
List categorys =new ArrayList();
List lastMonthData=new ArrayList();
List thisMonthData=new ArrayList();
String sql="select lastmonth_repayment,thismonth_bill,period from credit_card_bills order by period asc " ;
List resultdata = billsDetailDao.list(sql);
for(JSONObject dataItem:resultdata)
categorys.add(dataItem.getString("period"));
lastMonthData.add(dataItem.getDouble("lastmonth_repayment"));
thisMonthData.add(dataItem.getDouble("thismonth_bill"));
json.put("categorys",categorys);
json.put("lastMonth",lastMonthData);
json.put("thisMonth",thisMonthData);
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
勇敢做自己
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
package cn.luxh.app.
* 浏览器市场份额
* @author Luxh
public class BrowserShare {
//浏览器名称
private float
public BrowserShare(String name, float share) {
this.name =
this.share =
public float getShare() {
public void setShare(float share) {
this.share =
public String getName() {
public void setName(String name) {
this.name =
}　　2、处理请求的Servletpackage cn.luxh.app.
import java.io.IOE
import java.io.PrintW
import java.util.ArrayL
import java.util.L
import javax.servlet.ServletE
import javax.servlet.annotation.WebS
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.google.gson.G
import cn.luxh.app.entity.BrowserS
@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/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 resultL
}　　3、JSP页面&%@ page language="java" pageEncoding="UTF-8"%&
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ 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 () {
$(document).ready(function() {
chart = new Highcharts.Chart({
//常规图表选项设置
renderTo: 'container',
//在哪个区域呈现，对应HTML中的一个元素ID
plotBackgroundColor: null,
//绘图区的背景颜色
plotBorderWidth: null,
//绘图区边框宽度
plotShadow: false
//绘图区是否显示阴影
//图表的主标题
text: '2012年10月份浏览器市场份额'
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '{series.name}: &b&{point.percentage}%&/b&',
percentageDecimals: 1
//每种图表类型属性设置
plotOptions: {
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: '市场份额'
//异步请求数据
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){
图表的呈现区域，和常规图表选项设置中的renderTo: 'container'对应--&
&div id="container" style="min-width: 400 height: 400 margin: 0 auto"&&/div&
&/html&　　4、展现的结果&&&&&&
阅读(6493)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Highcharts获取json数据展现 pie 饼图',
blogAbstract:'实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取json数据的例子。',
blogTag:'highcharts,pie,json',
blogUrl:'blog/static/2',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:2,
permalink:'blog/static/2',
commentCount:2,
mainCommentCount:1,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'勇敢做自己',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(3758)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_083068',
blogTitle:'Highcharts属性',
blogAbstract:'',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:8,
publishTime:6,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:2,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}