zoukankan      html  css  js  c++  java
  • DWR(AJAX)+Highcharts绘制曲线图,饼图

    基本需求:
    1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据
    2. 了解JSON(JavaScript Object Notation)的格式
    3. Hightcharts的x,y轴数据绑定
    4. Hightcharts的使用自己定义样式
    Highcharts代码(或者说Highcharts的配置)是一个json字符串,说白了就是要想在前台使用Hightcharts插件画图,后台返回的数据类型必须是json字符串。Hightcharts才会认识。


    下面以DWR框架为例。绘制一个曲线图(x,y轴)。和饼图(没有x轴),演示后台数据怎样绑定到Highcharts的x,y轴。不解释,先贴图看效果:
    这里写图片描写叙述
    这里写图片描写叙述

    Example 1:曲线图

    1) JAVA后台代码:
    这里写图片描写叙述

    2) 前台DWR调用:
    这里写图片描写叙述
    注意看看alert的是一个什么鬼吧…
    这里写图片描写叙述
    3) 配置一个Hightcharts曲线图(定义一个Hightchars)。var gline = { }; 尼玛:看起来哪哪都是JSON
    Hightcharts依赖与Jquery所以必须引入jquery-1.8.3.min.js,另外就是Hightcharts核心highcharts.js

    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
    

    这里写图片描写叙述
    4) 上面已经定义了一个Highcharts曲线图,如今就差将数据绑定到x,y轴显示
    (继续补充完毕2)中的代码)
    这里写图片描写叙述
    注意:eval函数的使用。!

    !!

    Example 2 :饼图

    1) JAVA后台代码:
    这里写图片描写叙述
    2)前台DWR调用:
    这里写图片描写叙述

    注意看看alert的是一个什么鬼吧…

    3)配置一个Hightcharts的饼图: ,var dpie = { };
    这里写图片描写叙述

    4)绑定数据
    dpie.series[0].data = eval(data);
    new Highcharts.Chart(dpie);

    二、 Hightcharts的使用自己定义样式
    这里写图片描写叙述

    给全部的Highcharts应用样式:
    Highcharts.setOptions(myTheam);//给图表设置主题样式
    假设想给每个图应用不同的样式,则将Highcharts.setOptions(myTheam);写在每个DWR调用后台数据方法内。例如以下:定义了两个主题myTheam和myTheam1
    这里写图片描写叙述
    这里写图片描写叙述

    DWR(AJAX)+Highcharts绘制各种图(柱状,饼图,曲线…)小结V2.0
    改进步骤1):学会了在j2ee中使用DWR(AJAX)后,有时候从server返回client的数据是对象,自己手动拼凑 json字符串easy出错,通过度娘知道了json-lib这个类库,方便的支持java中对象到json字符串的转化。
    依赖的类库:json-lib-2.4-jdk15.jar
    ezmorph-1.0.6.jar
    commons-logging.jar
    commons-lang.jar
    commons-collections.jar基本需求:
    1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据
    2. 了解JSON(JavaScript Object Notation)的格式
    3. Hightcharts的x,y轴数据绑定
    4. Hightcharts的使用自己定义样式
    Highcharts代码(或者说Highcharts的配置)是一个json字符串。说白了就是要想在前台使用Hightcharts插件画图,后台返回的数据类型必须是json字符串,Hightcharts才会认识。
    下面以DWR框架为例,绘制一个曲线图(x,y轴)。和饼图(没有x轴),演示后台数据怎样绑定到Highcharts的x,y轴。

    不解释,先贴图看效果:

    Example 1:曲线图

    1) JAVA后台代码:
    这里写图片描写叙述

    2) 前台DWR调用:
    这里写图片描写叙述

    3)JsonConveterUtil:Json转换器工具类

    工具类以及源代码下载:http://pan.baidu.com/s/1mgxHExa

  • 相关阅读:
    实验三 进程调度模拟程序
    实验二作业调度模拟程序
    最新广商小助手 项目进展 OpenGL ES 3D在我项目中引用 代码太多只好选重要部分出来
    最后冲刺 我的项目 广商小助手
    最新一课 老师指点用Listview适配器
    安卓小学生四则运算
    大三上学期安卓一边学一边开始做一个自己觉得可以的项目 广商小助手App 加油
    我要再接再力 学更多
    用场景来规划测试工作
    阅读第13,14,15,16,17章
  • 原文地址:https://www.cnblogs.com/cxchanpin/p/7159845.html
Copyright © 2011-2022 走看看