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

时间: 2024-10-01 07:30:48

DWR(AJAX)+Highcharts绘制曲线图,饼图的相关文章

Highcharts绘制曲线图小结

Higcharts绘制曲线图很好用! 虽然说Highcharts官网有API,还有例子,但是我相信只看那些例子并不能很好的绘制出理想的曲线图. 刚接触这个领域,学有心得,理解不到位之处希望大家多多指教! 项目绘制的曲线是:平均水位随时间的变化而改变的水情走势图. 主要js代码: 1 function DrawShow() { 2 $.getJSON( 3 '/Draw/StRvavR', 4 {BeginTime: beginTime.value, EndTime: endTime.value

R绘制3D饼图

二维饼图 代码如下: #绘制2维饼图 x=read.delim("C:/Users/a/Desktop/sample.txt",header=FALSE) #读入文本数据 names(x)=c("word","count") #加表头 x=transform(x, pct=round(x$count/sum(x$count)*100)) #数据框增加百分比列 y=x[order(x[,2],decreasing=T),]#排序 z=head(y,

Highcharts绘制各种图形

原文:Highcharts绘制各种图形 源代码下载地址:http://www.zuidaima.com/share/1550463741430784.htm   可以绘制各种图形,扇形,折线形,饼形等... 使用spring框架,数据库是mysql在数据库中建一个t_trade表 

Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quo

Highcharts 时间序列,可缩放的图表;Highcharts X 轴翻转曲线图;Highcharts 带标记曲线图

Highcharts 时间序列,可缩放的图表 配置 图表 配置可缩放图表. chart.zoomType 指定了用户可以拖放的尺寸,用户可以通过拖动鼠标来放大,可能值是x,y或xy: var chart = { zoomType: 'x' }; plotOptions 使用 plotOptions 配置图表区域: 配置两个 Y 轴: var plotOptions = { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2

Highcharts无法绘制半饼图

今天遇到的问题如题,本人是从highcharts官网上贴过来的半饼图demo,可是在展示的时候仍然是全饼图,而且 plotOptions: {                 pie: {                     startAngle: -90,                     endAngle: 90,                     center: ['50%', '75%']                 }             }, 如上代码完全不生

使用highcharts绘制折线图和曲线图

折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 完整阅读:请点击:

Highcharts构建空饼图

空饼图就是不包括不论什么节点的饼图. 在Highcharts中,假设数据列不包括数据,会自己主动显示空白. 这样浏览者无法推断当前图表为什么类型.绘制一个空饼图的变通方法是在图表中首先提示没有数据,然后绘制一个圆形表示该图表类型为饼图.终于效果例如以下. 空饼图 PS:该教程已经增加<网页图表Highcharts实践教程图表篇>v1.2.2中.

HighCharts绘制JS折线图(后台传数据给前台基于JFinal框架)

/*****************************Controller(基于JFinal框架)**************/ package com.zzu.controller;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.List;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilitie