ajax获取后台数据在echarts上显示的是undefined

小白一个,这几天用echarts做图,ajax从后台获取到数据后在图上显示的是undefined,为什么啊!!!!!!

1

10个回答

你填充不对吧。。。我赋值都是可以显示的

1
hscch
韩建鑫院长 弄好了,谢谢大佬!!!!!
接近 2 年之前 回复
sxs161028
苏小苏 回复hscch: http://blog.csdn.net/sxs161028/article/details/75476425 可以看看这个
接近 2 年之前 回复
sxs161028
苏小苏 回复hscch: 我给你发了一个解析版的,在最后面
接近 2 年之前 回复
hscch
韩建鑫院长 回复神鸟自然: 在哪里解析啊....
接近 2 年之前 回复
sxs161028
苏小苏 回复hscch: 在for循环里直接将从后台获取的数据直接填充的。类似myChartOption.xAxis[0].data.push(value);
接近 2 年之前 回复
q975583865
cat a.zip >> b.jpg 回复hscch: http://blog.csdn.net/wangxiaohu__/article/details/7254598/
接近 2 年之前 回复
q975583865
cat a.zip >> b.jpg 回复hscch: 哈哈哈哈哈,你打印的是JSON对象,当然是undefined,用 JSON.stringify(param)吧params这个JSON对象解析成字符串再打印! 觉得好就采纳苏小苏吧,哈哈哈哈
接近 2 年之前 回复
hscch
韩建鑫院长 我把ajax获取到的数据追加到一个div里可以显示啊,但是图上就是undefined
接近 2 年之前 回复

没有找到那个程序,你看看是不是url地址填错了

0
hscch
韩建鑫院长 没有写错...
接近 2 年之前 回复

图片说明
图片说明

0
    var myChart = echarts.init(document.getElementById('main'));
     // 显示标题,图例和空的坐标轴
     myChart.setOption({
         title: {
             text: '图书分类借阅量'
         },
         tooltip: {},
         legend: {
             data:['借阅量']
         },
         xAxis: {
             data: []
         },
         yAxis: {},
         series: [{
             name: '借阅量',
             type: 'bar',
             data: []
         }]
     });

     myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

     var names=[];    //类别数组(实际用来盛放X轴坐标值)
     var nums=[];    //销量数组(实际用来盛放Y坐标值)

      $.ajax({

        type:"post",
        contentType:"application/x-www-form-urlencoded;charset=utf-8",
               //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
     url : "servlet/GetAllDataServlet",    //请求发送到TestServlet处
     data : {},
     dataType : "json",        //返回数据形式为json
     success : function(result) {

         //请求成功时执行该函数内容,result即为服务器返回的json对象
         if (result) {
                var obj = eval(result);

                for(var i=0;i<obj.length;i++){ 

                   names.push(result[i].name);    //挨个取出类别并填入类别数组
                 }
                for(var i=0;i<obj.length;i++){       
                    nums.push(result[i].num);    //挨个取出销量并填入销量数组
                  }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '借阅量',
                        data: nums
                    }]
                }); 

         }

    },
     error : function(errorMsg) {
         //请求失败时执行该函数
     alert("图表请求数据失败!");
     myChart.hideLoading();
     }

});
0

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("9999999999999");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");

        try {
            String bookDataList = gdService.getBookDataList();
            System.out.println(bookDataList);
            out.print(bookDataList);  
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }


}
0

//图书数据=====================================================================
public String getBookDataList() throws SQLException{

ArrayList bookDataList=new ArrayList();
String sql = "select bookType,count(bookType) as borrowcount from book GROUP BY(bookType)";
Result result=bd.getList(sql);
Object[][] data=result.getRowsByIndex();
for (int i = 0; i < data.length; i++) {
Book book=new Book();
book.setBookType(data[i][0].toString());
book.setBorrowcount(Integer.parseInt(data[i][1].toString()));
bookDataList.add(book);
}
String jsonstr="[";

try {

for(int i=0;i<bookDataList.size();i++){
JSONObject json1 = new JSONObject();
json1.put("bookType", bookDataList.get(i).getBookType());
json1.put("borrowcount", bookDataList.get(i).getBorrowcount());

            if(i<bookDataList.size()-1){jsonstr=jsonstr+json1.toString()+",";}  
            if(i==bookDataList.size()-1){jsonstr=jsonstr+json1.toString();} 
        } 
    } catch (JSONException e) {  
        e.printStackTrace();  
    }   
    jsonstr=jsonstr+"]"; 
    System.out.println(jsonstr);
    return jsonstr;
}
0

开f12 调试一下 在watch中添加这个变量看下哪里获取有问题

0

看看返回的json数据 组装是否正确

0
hscch
韩建鑫院长 下面上图
接近 2 年之前 回复

图片说明

0

```var echartDevice = echarts.init(document.getElementById('echartDevice'));

    function searchStatFun() {
        echartOption = {
            title: { text: '设备分类统计', x: 'center' },
            tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
            series: [{ name: '分类数量', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [] }]
        };
        $.ajax({
            async: true,
            dataType: 'json',
            url: ur,              
            success: function (result) {
                console.log(result);
                if (result.retCode == "0000") {
                    if (result.list.length > 0) {
                        for (i in result.list) {
                            var type = result.list[i].deviceType;
                            var count = result.list[i].deviceCount;
                            echartOption.series[0].data.push({ value: count, name: type });
                        }
                        echartDevice.setOption(echartOption);
                    }
                }
            }
        })            
    }

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ajax调用后台方法返回页面显示为undefined 解决办法
二话不说先上代码:rnrn$.ajax({rntype: "GET",rnurl: "",rndata: {},rnasync: true,rndataType:"json",rnsuccess: function(returnedData) {rnrnvar jsonObj =rnJSON.parse( JSON.stringify(returnedData) ); rnrn$("body").
ajax后台返回的数据为空前台显示出现undefined的解决方法
之前自己做的一个图书管理系统,显示图书借阅排行榜,因为翻译在数据库中有为空的字段,故前台显示会显示undefined。nnn以下贴上部门代码。n$(document).ready(function () {  n    $("#rankTable tbody").html("");n    var id = 1;nnn       $.ajax({  n           u
解决ajax获取到数据放到echarts无法显示的问题
   后台部分代码: returnMap.put(&quot;powerLevelCategories&quot;, powerLevelCategories);n returnMap.put(&quot;powerLevelSeries&quot;, powerLevelSeries);n tryn {n response.setContentType(&quot;text/text;char...
Echarts实时获取后台数据之三:Ajax实时获取数据
使用Ajax之后,效果就是图会根据后台数据实时变化,不会有加载动画。n首先,本人没用使用任何前端框架,用的是原始的Ajax,不需要导入任何文件。n代码如下:nfunction userAjax() {n var dom = document.getElementById(&quot;userContainer&quot;);n var myChart = echarts.init(dom);n var app = {...
用ajax获取数据时,总出现undefined
原因是在mapper中select的字段名和ajax中val.的字段名不一致,可以通过给select添加属性别名来解决这个问题 n n n这样就不会因为shop_id对应不上shopId而导致undefined n另外在返回结果集中也要保持名字的一致 n nps:...
解决ajax 传递为空但显示在页面上为undefined 问题
昨天写代码遇到一个问题,这个问题以前也遇到过,只不过那时以为简单就没做什么笔记,结果昨天遇到还是要去查百度,查百度又要找好一会儿,所以就记录一下。避免以后忘记。 n首先问题是这样的:我用ajax到动态的做表格插入,从后台传回来一个对象的list集合,然后进行遍历动态的生成表格的行。后台写的都正确的,结果表格有些内容为显示为undefined。后来我调试了一下发现ajax自动的把为空的字段设成了und
Java Web数据可视化(三)通过Ajax异步刷新页面,获取后台servlet数据并通过echarts在前台可视化
通过jdbc访问数据库获取数据才上一篇博客中已经完成啦:https://blog.csdn.net/weixin_43422355/article/details/83348750rn这次的工作主要分为三个方面:rnrnrn在JSP页面中定义按钮,通过点击按钮调用havaChoose()方法rnrnrn在JS页面中通过Ajax访问servlet,实现异步刷新,并将数据通过echarts的可视化rnrnrn在servl...
ajax返回的值为null或undefined在页面显示未“无”
n&amp;lt;td&amp;gt;'+(sd.name==null?'无':sd.name)+'&amp;lt;/td&amp;gt;nn避免在页面上显示null或undefined
ajax请求获取数据,前端绘制Echarts折线图
我只绘制折线图,其他的没做rnrnrn需要引入echarts.jsrn下载地址:百度的下载链接rnrnrn前端页面和ajax请求rn&amp;amp;lt;!-- 为echarts准备有大小的dom --&amp;amp;gt;rn&amp;amp;lt;div id=&amp;quot;main&amp;quot; style=&amp;quot;width: 100%;height:600px;&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;rnrn$
Echarts如何从后台用ajax获取数据,并且每三秒发一次ajax请求
Echarts如何从后台用ajax获取数据,并且每三秒发一次ajax请求(动态更新数据)n今天做项目的时候用到了,给想做这种效果的一种思路(永远的小白别喷)necharts图表用ajax获取到后台数据,响应在页面上,并且设置一个定时器没三秒刷新一次n为了直观显示我用json模拟后台数据,发送ajax请求n以下是jsonn|n|n∨ndata.jsonn[n{n“num”: 100n},n{n“nu...
echarts图表动态获取后台数据详解(三)--ajax跨域请求
前面两篇文章,分别介绍了静态数据的echarts展示和从后台数据库获取数据展示在图表上,但是这都是在同一个项目下。要是遇到这样一种情况:要求新建一个项目(或者网站、网页),与后台数据库的那个项目不在一个项目上。但是,所要展示的数据,却要从后台数据库中索取。此时,ajax请求就要跨域了。简单的说:有A、B两个不同的项目,A要展示B数据库中的数据,以前直接使用的ajax请求就不行了,网上百度了很多,我
echarts+ajax动态获取后端数据
效果图:nnnn下面从前端和后端来讲解(如果有些地方描述的不是很好或者不够详细,可以留言交流)nn目录nn一 前端nn1.1 引入js文件nn1.2 准备容器nn1.3 日期控件和按钮nn1.4 异步请求nn1.5 前端完整代码nn二、后端nn2.1 Controller层nn2.2 Service层nn一 前端nn1.1 引入js文件nnn&amp;lt;script src='../js/echart...
ECharts饼图从后台动态获取数据并展示
$.post( url, {'id' : gridStationSeq  },nfunction(result) {nconsole.log("接收返回值="+result)nif (result != null) {nvar label=[];nvar data = JSON.parse(result);nvar arr=[];nalert(data.nFaultStakeNum)
后台传递给前台,Json获取的值为undefined
$(function() {n var goodses=get();n var goodsNum=0;n var params="{\"goodsIds\":\"";n for(var i=0; i<goodses.length; i++){n params+=goodses[i].goodsId+",";n goodsNum=parseInt(goodsNum)+parseInt
怎么样让ECharts从后台获取数据并展示
今天有空,把项目中用到的几个报表图形拿出来分享一下。 主要是饼图和柱状图,结合点击事件获取点击的数据。
jquery获取action返回的json数据提示undefined或是null的问题
rn基于SSH框架搭建个小网站,登陆框用jquery实现,前台一直得不到action返回的值。不是undefined就是null。具体代码如下:rnAction:rnpublic class LoginAction extends ActionSupport {rnrn private String userName;rn private String password;rn private St...
Echarts AJAX异步加载tooltip明细数据
  需求描述:使用热力图显示某活动的日期分布强度,并当鼠标移动到某日期方块时,显示该日的明细活动信息。  因为显示的时间周期以年为单位,一次性加载全年明细数据不太现实。故选择鼠标移动至某日期时,后台异步加载明细数据。加载期间显示Loading,待加载完成后,显示明细信息到echarts图表上。  另外发现echarts会在鼠标在同一个日期小方块上每移动1px时都会触发tooltip的加载过程,鼠标...
Ajax动态获取数据 ECHARTS图表
Ajax动态获取数据 ECHARTS图表
echarts结合ajax动态获取数据库数据
最近做一个温度监控的项目,本文介绍一下echarts结合ajax动态获取数据库数据的方式,亲测可用,如有错误请提出宝贵意见首先将ArrayList获取数据集转为JSONArray对象,此部分写在GetTemperatureServlet的doPost里ArrayList<Environment> array;ntry {n //getMessage()方法里包含从数据库获取数据存入ArrayL
Echarts +SpringMvc 显示后台实时数据
Echarts图表数据一般都是从后台数据库实时取数据的 传输数据大多采用JSON数据格式 n本文通过springmvc来拦截数据请求 完成数据显示nn以下是工程目录nn n该工程在一个springmvc的基础代码上搭建 其中action类中只有ChartsAction有关 n其中用到的包有 其中有部分没用到的spring包 不影响使用 n因为本文会介绍两种json传输办法 jack
ECharts显示后台传送的JSON数据
废话不多说,直接上代码:n一、定义一个后台数据保存类:npublic class BarDTO{nn private String name;n private String type;n private List data;n public String getName() {n return name;n }n public void setName(String name) {n t
读取数据库数据,以报表的形式显示在前台网页(asp.net+echarts+ajax+数据库)
1、首先在VS2010里新建项目ASP.NET Web应用程序:WebApplication1;nn在应用程序里新建项目:WebForm.aspx(Web窗体),Model.cs(类),Controller.cs(类),Handler.ashx(一般处理程序),WebForm.js(JScript文件);nn2、(1)首先,创建一个Model类,对象实体化:nnnamespace WebAppli...
jQuery ajax请求json数据回调函数中data为undefined解决方法
本文主要讨论IE9下使用$.ajax获取json数据时可能遇到的回调函数中data为undefined的问题。问题描述js数据请求代码:$("#btn1").on("click",function(){n $.ajax({n type: "GET",n url: "php/runton_lastMember.php",
浅谈highcharts(echarts)通过ajax获取后台数据从而改变数据图
好久没写csdn博客了,随着工作项目的展开自己也越来懒了。。不过今天有点空余的时间,所以来写写博客。n恰巧这次的项目有图表这一块,所以就用到了highcharts和echarts。n我们都知道如果写纯静态的图表图很简单,那么如果写动态的图表图该如何写呢?n好了,不多BB了,言归正传!nn1、引入图表所需要的js文件
echarts 饼状图页面处理 Ajax 异步请求的查询数据
饼状图的series: data是以下的形式nn{value:335, name:'直接访问'},nn{value:310, name:'邮件营销'},nn{value:234, name:'联盟广告'},nn{value:135, name:'视频广告'},nn{value:1548, name:'搜索引擎'}nn=========================================...
解决Ajax获取到数据放入echarts里不显示最有效的解决方法
解决Ajax获取到数据放入echarts里不显示最有效的解决方法
mui.ajax 后台无法获取数据
看一下下面的代码是不是符合你的要求;n因为涉及到跨域请求,所以以下操作需要在h5+环境下,以及引用mui.min.js文件。nn注意事项:本地发送数据的模式应该与服务器接受的模式一致n本地采用get发送数据,那么php服务器端应该用 $_GET[]来接收n本地采用post发送数据,那么php服务器端应该用 $_POST[]来接收nnjs发送数据,并且获取返回的数据nnn&amp;lt;!DOCTYPE h...
ASP.NET+Echarts+Ajax从数据库中获取数据
htmlnnn &amp;lt;div class=&quot;panel-body&quot;&amp;gt;n &amp;lt;div id=&quot;signNum&quot; style=&quot;height: 400px; width: 100%&quot;&amp;gt;&amp;lt;/div&amp;gt;n &amp;lt;/div&amp
利用ajax获取echarts图表的数据
ECharts是由百度打造的一个纯javascript的图标库,很好用。nn下载地址:http://echarts.baidu.com/download.htmlnn 1. echarts文件的引入,在javascript块引入,src按需修改nnnscript type="text/javascript" src="./res/js/echarts.js">script>nn 2. 基于准备好的
采用ajax请求返回得到json数据,但是获取具体项却为undefined
原因:    1:没有写dataType类型    2:将dataType写为datatype    3:返回的json数据不标准
ECharts通过Ajax动态加载数据到图表
参考官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2nnnn首先要展示的图表像这样:nnn现在开始前后端代码展示。by the way,使用的开发框架为nutz,重点还是echarts数据。不要本末倒置。nnn1.从官网下载包,使用其中的dist和echarts.jsnnnn将dist文件夹和ech
ajax获取json数据的具体项为undefined
ajax获取json数据的具体项为undefined,最后发现是json数据格式的问题,把“”中不必要的空格删除掉。n原因:n1:没有写dataType类型nn2:将dataType写为datatypenn3:返回的json数据格式不标准。nnn...
Ajax前台请求 以及 后台 Java 处理 (包含undefined的问题)
今天在学习Ajax 的时候,发现每次 返回的数据正常,但是 回调函数中的if判断语句就是执行失败,打开F12调试发现 最后返回的是一个undefined的问题。n尝试了很多方法 ,最终用一个全局变量result接收了一下后台返回的data.就Ok了。n1、直接看图前台Ajax请求:[n2、后台Java的接收和处理:[插入]
echarts画圆环统计图并加载动态数据 (ajax获取数据)
最近,要用到echarts画饼图统计图,于是学习了会,附上echarts官网rnhttp://echarts.baidu.com/doc/example.htmlrnrnrn看到echarts有一些饼图实例,代码如下:rnoption = {rn    tooltip : {rn        trigger: 'item',rn        formatter: "{a} {b} : {c}
ECharts 折线图柱状图混合双Y轴 利用ajax动态获取后台数据
效果图示如下nn后台代码用的框架是SSM 双Y轴根据后台数据展示n大致代码如下:n List&amp;lt;Map&amp;gt; findqushi(@Param(&quot;date_id&quot;) String date_id, @Param(&quot;goodsId&quot;) String goodsId);n //决定Y轴的最值n List&amp;lt;Map&amp;gt; getgoodsCost(@Param(&quot;good...
ajax异步获取数据绘制echarts图表
// echarts图表绘制函数nfunction myData(text) {n var xA = [];n var yA = [];n // 将获取到的json数据列表清洗数据后push到xA、yA两个坐标轴数据列表n // 注意,此处循环函数可以用于未知数量的数据,不必提前预知数据量大小n for(var i = 0; i &amp;amp;amp;lt; text.data.leng...
再论百度Echarts技术,如何从后台获取数据并显示在页面上
页面:百度Echarts技术做的rnrnrnjsp:rnrnrnrnrnrn rn rnsetTimeout("$('select#stcd').val('${stcd}')", 100);rn --> rnrnrnrnrn    rn        layer.msg(decodeURI($("#tips").val()), 2, 1);rn        layer.shift('top',5
解决消息提示为undefined的方法及向后台提交数据的两种方法
这里介绍一下form表单提交和ajax向服务器提交两种方法的区别以及用法:后台向前台返回数据时发现我的提示框里面的消息提示为undefined,因此就研究了一下此类问题的方法,下面的解决办法分享给大家。n这是使用form表单提交的方法: njsp部分代码省略,其中含有form表单 njs部分代码: function save(){ n $("#fm
关于后台返回数据undefind的问题
原因是这里使用的redirect重定向。所以之前的请求并没有带过去。
echarts图表ajax获取数据填充
js部分rn/* ---------------- 折线图 --------------- */n n var line = echarts.init(document.getElementById('line'));//折线图rnn $.ajax({n type: "post",n url: 'product.do?method=selectProductNum2',n
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 大数据的基础是“数据” echarts教程python