实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取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. over 分析函数之 lag() lead()

    /*语法*/ lag(exp_str,offset,defval) over()  取前 Lead(exp_str,offset,defval) over()  取后 --exp_str要取的列 -- ...

  2. 深入理解JNI（《深入理解android》（author : 邓凡平）读书札记）

    JNI的技术特点: java能够调用native代码. native代码能够调用java代码.   JNI的技术考虑: 实现java代码的平台无关型. java语言发展初期使用C和C++代码,避免重复 ...

  3. iOS tableView的系统分割线定格设置以及分割线自定制

    一.关于分割线的位置. 分割线的位置就是指分割线相对于tableViewCell.如果我们要根据要求调节其位置,那么在iOS7.0版本以后,提供了一个方法如下: if ([self.tableView ...

  4. ShellExecute, WinExec, CreateProcess区别

    ShellExecute ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件.打开一个目录.打印一个文件等等),并对外部程序有一定的控制. 有几个API函数都可以实现这些功能 ...

  5. java发布项目后注意小点，以及对于金额在java中的处理

    项目在发布之后,有时会进行一些小的地方的修改,特别是对于一些常量的修改,如定义的一些特殊账户,第三方的key值,当修改的时候,我之前就偷懒过,因为项目在服务器上面,访问速度也受到限制,替换整个项目很麻 ...

  6. 被非技术瓶颈阻挡了，没钱买Mac，挣扎ing

    最近一直没来写博客,因为一直在找刷盘子.服务生.看店的工. 已经找到,主要因为前阵子天不热,所以酒馆的顾客不多.现在好了. 只好买个Mac mini,看了很多帖子,也只好暂时折中这样了.Mac买不起. ...

  7. MVC4数据注解和验证

    model中的验证注解特性: public class StuInfo { public int ID { get; set;} [Display(Name = "姓名")] // ...

  8. Java 反射实例

    实体类:Userpackage com.reflect.model; public class User{ private User(int id, String username, String p ...

  9. Java中的设计模式

    1 单例模式和多例模式 一.单例模式和多例模式说明:1.         单例模式和多例模式属于对象模式.2.         单例模式的对象在整个系统中只有一份,多例模式可以有多个实例.(单例只会创 ...

  10. mysql具体语句示例

    建表:(not null ,auto_increment, unique , primary key) create database balfish;use balfish;create table ...