关于Highcharts饼状（pie）图AJAX动态赋值的问题

最新推荐文章于 2024-02-02 11:15:39 发布

javaLangZP

最新推荐文章于 2024-02-02 11:15:39 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/javaLangZP/article/details/103825542

版权

本文探讨了在使用Highcharts饼状图时如何通过AJAX动态赋值。采用SpringMVC框架在后台封装JSON数据，确保JSON中的key与Highcharts demo中的key匹配，即使存在双引号，也能正确识别并显示数据。在前端，可以在AJAX回调函数中直接使用setData方法更新图表。

摘要由CSDN通过智能技术生成

关于Highcharts饼状（pie）图AJAX动态赋值的问题

官方demo里面写的很清楚，series里面是放数据。可以看出也是可以放入json字符串，至于在前台封装还是后台封装，看需求了。我是用的SpringMVC封装好直接传到前台的，传到前台的json是这样的。

json内部key的命名则是要与demo中的命名相一致，至于双引号的问题，Highcharts还是能识别，然后显示数据的。
拿到了json之后就可以在ajax的毁掉函数中直接setData了

$.ajax({
   
 type:"GET",          
 url:'expenditure/selectClassifiation',
   success:function(data){
   
   $('#pie_expenditure').highcharts(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

javaLangZP

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Highcharts简单实现异步加载数据饼状图

金豆呀的博客

01-29

685

1. 官方Demo的饼状图源码： <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jque

highcharts pie ajax,Basic Pie

weixin_28909503的博客

08-05

144

Basic Pie以下是基本饼图的示例。下面给出了基本饼图的示例。配置 (Configurations)现在让我们看一下所采取的其他配置/步骤。系列 (series)将系列类型配置为基于饼图。 series.type决定图表的系列类型。这里，默认值是“line”。var series = {type: 'pie'};例子 (Example)highcharts_pie_basic.htm ...

参与评论您还未登录，请先登录后发表或查看评论

highCharts 饼图动态加载

weixin_33716154的博客

10-25

140

　　　　　　　　　　　　　　　　饼图的动态加载　　　　　　　　　　　　 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/ja...

【Highcharts饼图】动态给饼图添加数据时，绘制“卡住”的情形

Try My Best 尽力而为

04-13

262

最近需要给highcharts的饼图添加数据，用到以下语法： pieChart.addSeries({ type:'pie', name:'数量分布', data:countData }); 其中，pieChart为一个highcharts对象。countData的组成如下： var countList = data.list;//ajax获...

highcharts中pie统计图获取数据

weixin_34384681的博客

05-04

183

从列子知道数据是array类型的，但不知后端传回来的数据怎样转换成应有的数据类型，下面是获取数据的方法： /*** pie统计图获取的映射类* @author Administrator**/public class JPicData { private String name; private double value; @Override public Str...

Highcharts饼状图Ajax动态赋值的问题

未曾远去

05-29

2604

效果图：前台js代码：<script type="text/javascript"> var arr = []; function getOrder(){ arr = []; var BEGIN_TIME = $("#BEGIN_TIME").val(); var END_TIME = $("#END_TIME").val(); $.ajax({ ...

HighCharts---Ajax-Data:动态获取 HighCharts 数据

06-03

HighCharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种类型的交互式图表，如折线图、柱状图、饼图等。在实际应用中，我们经常需要从服务器动态获取数据来更新图表，这时就用到了...

PHP+mysql+Highcharts生成饼状图

09-03

首先，我们需要在MySQL数据库中创建一个名为`chart_pie`的表，用于存储饼状图的数据。表中包含两个字段：`title`（用于存储类别名称）和`pv`（用于存储每个类别的数值）。以下为创建表的SQL语句： ```sql CREATE...

Echarts饼图动态赋值

最新发布

m0_66403070的博客

02-02

1454

Echarts饼图动态赋值

动态更新highcharts数据的实现方法

09-02

下面小编就为大家带来一篇动态更新highcharts数据的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

java实现的highcharts与ajax结合动态实时获取数据更新图表

12-23

java实现的highcharts与ajax结合动态实时获取数据更新图表

java-echart.js柱状图、饼状图、折线图

01-03

java-echart.js柱状图、饼状图、折线图 /** * 柱状图 * @param classRoom * @param req * @param resp * @param model * @return */ @RequestMapping(value = "/zhuzhuangtu") public String zhuzhuangtu(ClassRoom classRoom ,HttpServletRequest req,HttpServletResponse resp,Model model){ List<Map> maps = new ArrayList<Map>(); Map map = new HashMap(); map.put("name", "山东"); map.put("value", 200); map.put("id", 1); Map map1 = new HashMap(); map1.put("name", "江苏"); map1.put("value", 400); map1.put("id", 2); Map map2 = new HashMap(); map2.put("name", "北京"); map2.put("value", 400); map2.put("id", 3); Map map3 = new HashMap(); map3.put("name", "上海"); map3.put("value", 150); map3.put("id", 4); maps.add(map); maps.add(map1); maps.add(map2); maps.add(map3); model.addAttribute("maps", maps); return "manage/zhuzhuangtu"; }

图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示

weixin_34416754的博客

07-24

605

在很早之前就介绍过图表插件Highcharts的使用了，在2014年的随笔《基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts》，这里基本上都介绍的比较完整，基本的设置也没有太大的差异，本篇介绍的是基于Bootstrap开发框架的界面处理，以及对图表插件Highcharts的其他模块，如柱状图，线图等其他样式的信息进行动态设置，以期达到利用数据库的数据，方...

HighCharts中PieChart的实现

lanjie_gunger的博客

01-05

832

一、导入js文件二、定义显示chart的div 三、写script $(function() { $('#pieChart').highcharts({ chart: { ploatBackgroudColor:null, plotBorderWidth: null, plotShadow: false }, title: {

在Java中使用Highcharts+Ajax+Json生成动态饼图

geekfly的Blog

05-31

7562

1.由于HighCharts运行于JQuery，所以需要引入jQuery。JQuery HighCharts核心js文件Highcharts 导出功能需要引入的js导出功能完整文件Highcharts-4.2.5 2.在jsp页面引入如上文件 <script type="text/javascript"> var chart; $(function () {

Echarts 饼图处理 option动态赋值点击事件一级钻取自定义按钮数据格式化

weixin_39540475的博客

08-06

2909

当点击家庭投诉分类下的网络故障时会钻取到网络故障下的分类进行饼图的展示，并且右上角有自定义按钮，点击可以可以刷新页面，因为我做的这个项目只支持一级钻取，所有点击按钮之后是重新载入了这个页面，我没有在Echarts的文档中找到回退上一级的这个api，只是简单的刷新了一下页面，知道的朋友可以告诉我哈。通过ajax动态赋值钻取的时候，json是以List>转化的，解析算法比较重要。具体的可以看我

highcharts实现简单饼状图

有梦想的咸鱼

01-11

771

highcharts实现简单饼状图/**这是饼状图的展示*/ var zc=0; var bj=0; var lx=0; if($("#countzc") !=0 && $("#countzc") !="0"){ zc = ($("#countzc").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").

highcharts的数据赋值

huwenzhi1991的专栏

01-13

1995

--前台代码 My JSP 'index.jsp' starting page var chart1; // 全局变量 $(document).ready(function() { $.getJSON("Highcharts",function(data){ a1=parseInt(data

HighCharts与Ajax交互实现数据可视化

"该资源是关于使用HighCharts与Ajax进行后台交互的数据模板，展示如何通过Ajax获取数据并显示图表的示例。" 在Web开发中，HighCharts是一个强大的JavaScript库，用于创建各种类型的互动图表，如柱状图、饼图、线图...