正文 

当前位置： 首页 > java > java示例

dwr(ajax)+highcharts绘制曲线图，饼图

cxchanpin      2022-02-12     699

关键词：

基本需求:
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












































Highcharts (PieChart) - 第二次绘制时图表宽度减小

】Highcharts(PieChart)-第二次绘制时图表宽度减小【英文标题】：Highcharts(PieChart)-chartwidthreducedondrawingsecondtime【发布时间】：2016-12-1120:55:56【问题描述】：首先感谢HighCharts。好吧，我正在jQueryMobile中使用HighCharts构建一个饼图。我正... 查看详情

highcharts插件怎样只显示部分数据

...针对大数据量图表，只显示一部分且走势明显参考技术AhighchartsAPI你没问题吧，即用假数据可以生产图表不？如果没问题，用Ajax请求后台数据库，然后把数据替上就行了。 查看详情

使用ajax来自mysql的highchart数据

】使用ajax来自mysql的highchart数据【英文标题】：highchartdatafrommysqlusingajax【发布时间】：2012-06-0907:43:47【问题描述】：我想创建一个实时显示数据库中数据的折线图。我大约每100微秒将新数据放入我的数据库中。我使用ajax来检查... 查看详情

ajax之dwr

...WR，开发人员无需具备专业的JavaScript知识就可以轻松实现Ajax，是Ajax更平民化。添加jar包  dwr.jar  commons-logging-1.1.3.jar Struts框架中有log包修改项目的web.xml,添加Servlet映射1<?xmlversion=" 查看详情

highchart应用示例2-上：圆角柱状图，下：多指标曲线图(代码片段)

1、ajax调用接口获取数据functiongetCityData()vardate1=$(‘#datetimepicker1‘).val();vardate2=$(‘#datetimepicker2‘).val();varparams=‘date1‘:date1,‘date2‘:date2,‘city‘:‘荣成‘,‘type‘:type;$.getJSON(‘http://127.0.0. 查看详情

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

Highcharts基本曲线图实例文件名：highcharts_line_basic.htm<html><head><metacharset="UTF-8"/><title>Highcharts教程|菜鸟教程(runoob.com)</title><scriptsrc="http://apps.bdimg.com/libs/jque 查看详情

highcharts标示区曲线图；highcharts对数图表；highcharts时间间隔图表

 Highcharts标示区曲线图 配置使用yAxis.plotBands属性来配置标示区。区间范围使用‘from‘和‘to‘属性。颜色设置使用‘color‘属性。标签样式使用‘label‘属性。配置信息：varyAxis={title:{text:‘Windspeed(m/s)‘},min:0,minorGridLineWidt... 查看详情

HighCharts - getJson 到 HighCharts 双轴

】HighCharts-getJson到HighCharts双轴【英文标题】：HighCharts-getJsontoHighChartsdualaxes【发布时间】：2018-02-0309:05:51【问题描述】：我想通过调用返回Json的本地webService来显示HighCharts双轴图表。HighChart应绘制以下数据点：y轴左侧：绘制“... 查看详情

DotNet.Highcharts：成本未针对正确日期绘制

】DotNet.Highcharts：成本未针对正确日期绘制【英文标题】：DotNet.Highcharts:Costnotplottedagainstthecorrectdate【发布时间】：2016-06-1813:50:57【问题描述】：我正在创建一个DotNet.Highcharts图表，它使用两个表中的数据：支出和收入。我正在使... 查看详情

highcharts曲线图

效果：隐藏xy轴说明.highcharts-legend{display:none} Json数据：vardays=[];varachievingrates=[]_.each(data,function(item){days.push(item.day);achievingrates.push(item.achievingrate);});chart1.xAxis[0].setCateg 查看详情

从远程 JSON 文件绘制 Highcharts 图

】从远程JSON文件绘制Highcharts图【英文标题】：PlotaHighchartsgraphfromremoteJSONfile【发布时间】：2018-06-0715:29:48【问题描述】：我正在尝试使用HighchartsJS绘制图表。我有一个JSON文件，比如，["receive_date":"2013-11-04","responses":"2"]JSON:-https:/... 查看详情

highcharts时间序列，可缩放的图表；highchartsx轴翻转曲线图；highcharts带标记曲线图

Highcharts时间序列，可缩放的图表 配置图表配置可缩放图表。chart.zoomType指定了用户可以拖放的尺寸，用户可以通过拖动鼠标来放大，可能值是x，y或xy：varchart={zoomType:‘x‘};plotOptions使用plotOptions配置图表区域：配置两个Y轴... 查看详情

如何在反应中使用Highcharts绘制经度和​​纬度的气泡图

】如何在反应中使用Highcharts绘制经度和​​纬度的气泡图【英文标题】：HowtodrawabubblemapwithlongitudeandlatitudeusingHighchartsinreact【发布时间】：2021-06-0505:31:14【问题描述】：我想使用Highcharts库在react项目中绘制mapwithbubbles(bubblemap)。... 查看详情

将 php 数据绘制到 Highmap 中：HighCharts

】将php数据绘制到Highmap中：HighCharts【英文标题】：PlotphpdataintoHighmap:HighCharts【发布时间】：2019-08-2418:24:28【问题描述】：您好，我正在使用HighmapsJS，我想做的是将数据库中的数据绘制到highMaps中。这是我尝试过的。php代码：$jso... 查看详情

使用 php 和 Ajax 的 Highcharts 柱形图

】使用php和Ajax的Highcharts柱形图【英文标题】：HighchartsColumn-chartwithphpandAjax【发布时间】：2014-02-2601:52:25【问题描述】：我对highcharts有疑问，因为我无法在我的highcharts图表上加载我的php数据，当我单击一个表单（id=year）时它将... 查看详情

使用 ajax 的 Django 中的 Highcharts

】使用ajax的Django中的Highcharts【英文标题】：HighchartsinDjangousingajax【发布时间】：2017-01-0120:16:21【问题描述】：我是Django新手。我正在制作民意调查应用程序，并希望使用highcharts来显示图表。我有一个显示所有民意调查的模板。... 查看详情

数据可视化highchart——曲线图(代码片段)

基本案例基于案例修改后效果图如下：代码：<html><head><metacharset< 查看详情

django 无法读取 csv 文件以在 javascript 和 html 模板中绘制 highchart

】django无法读取csv文件以在javascript和html模板中绘制highchart【英文标题】：djangoisnotabletoreadcsvfilesforplottinghighchartinjavascriptandhtmltemplate【发布时间】：2014-07-2714:12:22【问题描述】：使用js和html（highchart），图形在没有django的本地服... 查看详情