ajax动态赋值数据图-js教程-PHP中文网

首页

web前端

js教程

ajax动态赋值数据图

php中世界最好的语言

Apr 12, 2018 pm 02:06 PM

ajax 动态数据

这次给大家带来ajax动态赋值数据图，ajax动态赋值数据图的注意事项有哪些，下面就是实战案例，一起来看一下。

本文以柱形图和饼形图ajax动态赋值为例

一、饼形图赋值步骤

（1）jsp页面

<!-- 引入echarts官方js --> 
<script src="js/echarts.js"></script> 
<body> 
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 --> 
<p id="first" style="width: 600px;height:400px;"></p> 
[html] view plain copy
</body>

登录后复制

（2）js页面

//饼图模板
var dom = document.getElementById("first");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title : {
      text: '用户位置记录',
      subtext: '',
      x:'center'
    },
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient : 'vertical',
      x : 'left',
      data:[]
    },
    toolbox: {
      show : true,
      feature : {
        mark : {show: true},
        dataView : {show: true, readOnly: false},
        magicType : {
          show: true, 
          type: ['pie', 'funnel'],
          option: {
            funnel: {
              x: '25%',
              width: '50%',
              funnelAlign: 'left',
              max: 1548
            }
          }
        },
        restore : {show: true},
        saveAsImage : {show: true}
      }
    },
    calculable : true,
    series : [
      {
        name:'',
        type:'pie',
        radius : '55%',
        center: ['50%', '60%'],
        data:[]
      }
    ]
  };
;
if (option && typeof option === "object") {
  myChart.setOption(option, true);
}
//饼图动态赋值
var year = $("#year-search").val();
  var mouth = $("#mouth-search").val();
  $.ajax({
      type: "get",
      url: rootPath+"/wxbound/getPieDataByMouth.action",
      data : {"year":year,"mouth":mouth},
      cache : false,  //禁用缓存
      dataType: "json",
      success: function(result) {
        var names=[];//定义两个数组
         var nums=[];
         $.each(result,function(key,values){ //此处我返回的是list<String,map<String,String>>循环map
           names.push(values.province_name);
           var obj = new Object();
           obj.name = values.province_name;
           obj.value = values.count;
           nums.push(obj);
          });
        myChart.setOption({ //加载数据图表
             legend: {
                data: names
                },
            series: {
                // 根据名字对应到相应的系列
                name: ['数量'],
                data: nums
                }  
      });
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("查询失败");
      }
    });

登录后复制

（3）后台代码根据你自己的代码就好

（4）显示样式

ajax动态赋值echarts的实例(饼图和柱形图)

二、柱型图赋值步骤

（1）jsp页面

<!-- 引入echarts官方js --> 
<script src="js/echarts.js"></script> 
<body> 
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 柱形图 --> 
<p id="second" style="width: 600px;height:400px;"></p> 
</body>

登录后复制

（2）js页面

//柱形图模板
var domLong = document.getElementById("second");
var myChartSecond = echarts.init(domLong);
var app = {};
option = null;
option = {
   color: ['#3398DB'],
   tooltip : {
     trigger: 'axis',
     axisPointer : {      // 坐标轴指示器，坐标轴触发有效
       type : 'shadow'    // 默认为直线，可选为：'line' | 'shadow'
     }
   },
   grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
   },
   xAxis : [
     {
       type : 'category',
       data : [],
       axisTick: {
         alignWithLabel: true
       }
     }
   ],
   yAxis : [
     {
       type : 'value'
     }
   ],
   series : [
     {
       name:'直接访问',
       type:'bar',
       barWidth: '60%',
       data:[]
     }
   ]
 };
if (option && typeof option === "object") {
 myChartSecond.setOption(option, true);
}
//给柱形图赋值
 var year = $("#year-search").val();
 $.ajax({
      type: "post",
      url: rootPath+"/wxbound/getWxboundList.action",
      data : {"year":year},
      cache : false, //禁用缓存
      dataType: "json",
      success: function(result) {
     console.log(result);
     var linNames=[];
   var linNums=[];
     $.each(result.lin,function(key,values){ 
     linNames.push(values.mouth);
     linNums.push(values.count);
     
    });
   //柱形图赋值
   myChartSecond.setOption({ //加载数据图表
    xAxis: {
                data: linNames
                },
            series: {
             // 根据名字对应到相应的系列
             name: ['数量'],
             data: linNums
         }
    });  
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("查询失败");
      }
    });
}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7658

CakePHP 教程

1393

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

113

显示更多

Related knowledge

使用ddrescue在Linux上恢复数据 Mar 20, 2024 pm 01:37 PM

DDREASE是一种用于从文件或块设备(如硬盘、SSD、RAM磁盘、CD、DVD和USB存储设备)恢复数据的工具。它将数据从一个块设备复制到另一个块设备，留下损坏的数据块，只移动好的数据块。ddreasue是一种强大的恢复工具，完全自动化，因为它在恢复操作期间不需要任何干扰。此外，由于有了ddasue地图文件，它可以随时停止和恢复。DDREASE的其他主要功能如下：它不会覆盖恢复的数据，但会在迭代恢复的情况下填补空白。但是，如果指示工具显式执行此操作，则可以将其截断。将数据从多个文件或块恢复到单

开源！超越ZoeDepth！ DepthFM：快速且精确的单目深度估计！ Apr 03, 2024 pm 12:04 PM

0.这篇文章干了啥？提出了DepthFM：一个多功能且快速的最先进的生成式单目深度估计模型。除了传统的深度估计任务外，DepthFM还展示了在深度修复等下游任务中的最先进能力。DepthFM效率高，可以在少数推理步骤内合成深度图。下面一起来阅读一下这项工作~1.论文信息标题：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr

将VirtualBox固定磁盘转换为动态磁盘，反之亦然 Mar 25, 2024 am 09:36 AM

在创建虚拟机时，系统会要求您选择磁盘类型，您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘，后来意识到需要动态磁盘，或者相反，该怎么办?好!你可以把一种转换成另一种。在这篇文章中，我们将看到如何将VirtualBox固定磁盘转换为动态磁盘，反之亦然。动态磁盘是一种虚拟硬盘，它最初具有较小的大小，随着您在虚拟机中存储数据，其大小会相应增长。动态磁盘在节省存储空间方面非常高效，因为它们只占用所需的主机存储空间。然而，随着磁盘容量的扩展，可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理训练最快选择 Apr 01, 2024 pm 07:46 PM

谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow，7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中，Pytorch依然比Tensorflow更受欢迎。但未来，也许有更多的大模型会基于JAX平台进行训练和运行。模型最近，Keras团队为三个后端（TensorFlow、JAX、PyTorch）与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先，他们为生成式和非生成式人工智能任务选择了一组主流

iPhone上的蜂窝数据互联网速度慢：修复 May 03, 2024 pm 09:01 PM

在iPhone上面临滞后，缓慢的移动数据连接？通常，手机上蜂窝互联网的强度取决于几个因素，例如区域、蜂窝网络类型、漫游类型等。您可以采取一些措施来获得更快、更可靠的蜂窝互联网连接。修复1–强制重启iPhone有时，强制重启设备只会重置许多内容，包括蜂窝网络连接。步骤1–只需按一次音量调高键并松开即可。接下来，按降低音量键并再次释放它。步骤2–该过程的下一部分是按住右侧的按钮。让iPhone完成重启。启用蜂窝数据并检查网络速度。再次检查修复2–更改数据模式虽然5G提供了更好的网络速度，但在信号较弱

超级智能体生命力觉醒！可自我更新的AI来了，妈妈再也不用担心数据瓶颈难题 Apr 29, 2024 pm 06:55 PM

哭死啊，全球狂炼大模型，一互联网的数据不够用，根本不够用。训练模型搞得跟《饥饿游戏》似的，全球AI研究者，都在苦恼怎么才能喂饱这群数据大胃王。尤其在多模态任务中，这一问题尤为突出。一筹莫展之际，来自人大系的初创团队，用自家的新模型，率先在国内把“模型生成数据自己喂自己”变成了现实。而且还是理解侧和生成侧双管齐下，两侧都能生成高质量、多模态的新数据，对模型本身进行数据反哺。模型是啥？中关村论坛上刚刚露面的多模态大模型Awaker1.0。团队是谁？智子引擎。由人大高瓴人工智能学院博士生高一钊创立，高

特斯拉机器人进厂打工，马斯克：手的自由度今年将达到22个！ May 06, 2024 pm 04:13 PM

特斯拉机器人Optimus最新视频出炉，已经可以在厂子里打工了。正常速度下，它分拣电池（特斯拉的4680电池）是这样的：官方还放出了20倍速下的样子——在小小的“工位”上，拣啊拣啊拣：这次放出的视频亮点之一在于Optimus在厂子里完成这项工作，是完全自主的，全程没有人为的干预。并且在Optimus的视角之下，它还可以把放歪了的电池重新捡起来放置，主打一个自动纠错：对于Optimus的手，英伟达科学家JimFan给出了高度的评价：Optimus的手是全球五指机器人里最灵巧的之一。它的手不仅有触觉

首个自主完成人类任务机器人出现，五指灵活速度超人，大模型加持虚拟空间训练 Mar 11, 2024 pm 12:10 PM

这周，由OpenAI、微软、贝佐斯和英伟达投资的机器人公司FigureAI宣布获得接近7亿美元的融资，计划在未来一年内研发出可独立行走的人形机器人。而特斯拉的擎天柱也屡屡传出好消息。没人怀疑，今年会是人形机器人爆发的一年。一家位于加拿大的机器人公司SanctuaryAI最近发布了一款全新的人形机器人Phoenix。官方号称它能以和人类一样的速率自主完成很多工作。世界上第一台能以人类速度自主完成任务的机器人Pheonix可以轻轻地抓取、移动并优雅地将每个对象放置在它的左右两侧。它能够自主识别物体的

See all articles

ajax动态赋值数据图

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题