实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取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饼图的更多相关文章

  1. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  2. 微信小程序通过api接口将json数据展现到小程序示例

    这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...

  3. Netflix Falcor获取JSON数据

    Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...

  4. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  5. jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  6. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  8. android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下   首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...

  9. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

随机推荐

  1. Chapter 1 First Sight——27

    Throughout all this conversation, my eyes flickered again and again to the table where the strange f ...

  2. 第三十六节，os系统级别操作模块

    在使用os模块时需要先 import os 引入模块 os.getcwd()模块函数 功能:获取当前工作目录,即当前python脚本工作的目录路径[无参] 使用方法:os.getcwd() 格式如:a ...

  3. JS总结之一：字符串的调用方法

    字符串的调用方法:var s="hello, world";document.write(s.charAt(0)); //第一个字符document.write(s.charAt( ...

  4. hdu_2446_Shell Pyramid(数学，二分)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2446 题意:题面很大,有用的就那么几句,意思就是用自然数来堆它画的那个金字塔,比如第一个金字塔的第一个 ...

  5. unix文件系统

    转自here 我一向坚持的原则,那就是任何东西的根本性的,本质上的原理以及背后的思想都是及其简单的,所谓的复杂性都是优化与策略化的扩展带来的,正如TCP一样,UNIX的文件系统也不例外!我们必须知道, ...

  6. Mac下截图快捷键

    Cmd+Shift+3:全屏截图:截取整个屏幕,保存截图至桌面文件夹.Cmd+Shift+4:区域截图:鼠标光标变成带坐标的小十字,通过拖拽截取特定区域,保存截图至桌面文件夹.Cmd+Shift+4 ...

  7. 用tomcat6自定义域名

    第一步:tomcat配置 修改server.xml文件 8080端口 更改为 80端口 并在<Host name="localhost"  appBase="web ...

  8. 线段树+dp+贪心 Codeforces Round #353 (Div. 2) E

    http://codeforces.com/contest/675/problem/E 题目大意:有n个车站,每个车站只能买一张票,这张票能从i+1到a[i].定义p[i][j]为从i到j所需要买的最 ...

  9. SQL 查询时间段内的时间

    declare @dt1 as datetime declare @dt2 as datetime set @dt1 = '2008-01-01' set @dt2 = '2009-01-01' ;w ...

  10. SQL添加表字段以及SQL查询表,表的所有字段名

    通用式: alter table [表名] add [字段名] 字段属性 default 缺省值 default 是可选参数 增加字段: alter table [表名] add 字段名 smalli ...