实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取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. 阅读http://zh.lucida.me/有感

    lucida大神本科毕业于大工,研究生毕业于北航,有这样的学历在社会上混就已经绰绰有余了,但是lucida神并不满足,刻苦努力,拼搏进取,最后进入google london工作,曾经一度在micros ...

  2. HttpClient的get和post方式提交数据的使用

    /** * Http工具类 */ public class HttpUtil { // 创建HttpClient对象 public static HttpClient httpClient = new ...

  3. 解决安装WordPress主题及插件需要输入FTP问题

    http://www.zhanghenglei.com/wordpress-ftp-update/ 使用Wordpress程序架构的网站如果需要在网站后台升级.安装主题或者插件的时候,总是会提示需要我 ...

  4. CSS3秘笈：第十二章&第十三章

    第十二章 1.网页布局类型 (1)固定宽度 (2)流式 (3)响应式Web设计 2.CSS布局的方法 通过给元素设置一个宽度,将它浮到左侧或右侧,就可以创建一个列(元素后面的文本会环绕浮动的元素,仿佛 ...

  5. hdu_2227_Find the nondecreasing subsequences_树状数组,离散化

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2227 题意:给你一个集合,让你求递增子序列有多少个,和树状数组求逆序对差不多,不过数据比较大,要离散化 ...

  6. hdu 1020

    //自信满满地交上去~~but...超时了 #include <iostream> #include <string.h> #include <stdio.h> u ...

  7. iOS 开发者旅途中的指南针 - LLDB 调试技术

    文章转载于:iOS 开发者旅途中的指南针 - LLDB 调试技术 今天给大家介绍的内容,无关乎任何功能性开发技术,但又对开发的效率影响至深,这就是调试技术. 何为调试呢,比如我们用 print 函数在 ...

  8. php的memcache和memcached扩展区别【转载】

    老生长谈的问题了.我这里就整理一下. memcache的文档在:http://pecl.php.net/package/memcache memcached的文档在:http://pecl.php.n ...

  9. HTTPclient cookie的获取与设置

    因为代码与Java用apache的HttpClient发送Post请求大部份重复,所以就不贴整段代码了,只把不同的地方贴出来.发送Cookie就必须先得到Cookie,所以至少发送两次请求,第一次用于 ...

  10. [maven] 新建项目一直提示loading archetype list

    Maven's JRE is running out of memory. Under Build > Build Tools > Maven > Importing, set &q ...