实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取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. js导入插件注意事项.txt

    网上收集的答案如下:==============================================1)确认js真的被引用到2)确认js引用顺序没问题3)确认js代码里的括号等都匹配,不会 ...

  2. Linux - CentOS6.5服务器搭建与初始化配置详解（下）

    传送带:Linux - CentOS6.5服务器搭建与初始化配置详解(上) 继续接着上面的安装,安装完后会出现下面界面 点击reboot重启 重启后可以看到下面的tty终端界面  因为这就是最小化安装 ...

  3. 二〇一五年五月二十二日--bug--启动页面出现模糊的问题

    启动页面出现模糊的问题: 原因是 :android:theme="@style/TranslucentTheme" <application android:name=&qu ...

  4. 《C++ Primer》之面向对象编程（二）

    构造函数和复制控制 每个派生类对象由派生类中定义的(非 static)成员加上一个或多个基类子对象构成,当我们构造.复制.赋值和撤销一个派生类对象时,也会构造.复制.赋值和撤销这些基类子对象. 构造函 ...

  5. 常用的css

    产品鼠标经过加边框效果 .productsCol:hover { box-shadow: 0 0 0 3px #333333 inset; transition: all 0.2s ease 0s; ...

  6. echo json数据给ajax后, 需要加上exit,防止往下执行,带上其他数据,到时ajax失败

    01返回json数据给ajax后需要加上exit.返回json数据前不能有其他输出 function apply(){ if(IS_POST){$info['status'] = 1; echo js ...

  7. Entity Framework技巧系列之六 - Tip 20 – 25

    提示20. 怎样处理固定长度的主键 这是正在进行中的Entity Framework提示系列的第20篇. 固定长度字段填充: 如果你的数据库中有一个固定长度的列,例如像NCHAR(10)类型的列,当你 ...

  8. .Net TransactionScope事务

    使用TransactionScope类 正如名称所暗示,TransactionScope类用于限定事务代码块,其具有一些明显优点,例如范围与应用程序对象模型无关,同时提供了一个简单直观的编程模型等等. ...

  9. 获得正在编辑行的数据 esayui datagrid

    function getEditRow(datagridId) {//datagridId为table容器的id var input = $('#' + datagridId).parent().fi ...

  10. 【实验室笔记】太阳能板清洁器DEMO

    <太阳能板清洁器DEMO>2015年的毕昇杯比赛作品,用时两天,整体设计思路很简单: [机械结构]: 清洁器主体采用角钢搭建,用钢锯切割好以后,上螺丝,走线用的尼龙扎带捆绑: 清洗滚轮采用 ...