highcharts_ajax动态刷新连接状态图

合集下载

ajax局部刷新实例（三种方法推荐）

ajax局部刷新实例（三种⽅法推荐）ajax局部刷新<script>setInterval("refreshTime()",1000); //每格1秒刷新⼀次funciton refreshTime(){var dateObj = new Date();time.innerHTML = dateObj.toLocaleDateString(); //刷新div⾥⾯的内容}</script><div id=time> </div>function doRef(){var url = "xxx.aspx"var dateRequest = new ActiveXObject("Microsoft.XMLHTTP");dateRequest.abort() ;dateRequest.open( "GET", url , true );dateRequest.onreadystatechange = onSendSelf ;dateRequest.send() ;function onSendSelf(){if( dateRequest.readyState != 4 ){return ;}var theDate = dateRequest.responseText ;//如果出现编码问题,可以在服务端escape⼀下,然后在这⾥使⽤unescape( responseText ) theDiv.innerHTML = theDate ;}}setInterval( doRef , 1000 ) ;//1秒刷新⼀次，有点快<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer><asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox></ContentTemplate></asp:UpdatePanel></form>=====在后台Timer1_Tick事件加上// Interval="1000" 是设置刷新的时间间隔TextBox1.Text=DateTime.Now看下就明⽩了以上这篇ajax局部刷新实例 (三种⽅法推荐)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

echarts用ajax调用接口实例 -回复

echarts用ajax调用接口实例-回复"Echarts用Ajax调用接口实例-从入门到精通"Echarts是一款基于JavaScript的数据可视化库，可以通过绘制各种图表来展现数据。

而Ajax是一种用于创建快速和动态网页的技术，可以在不刷新整个网页的情况下向服务器发送请求。

在本篇文章中，我们将使用Echarts和Ajax相结合，演示如何通过调用接口来获取数据，并将其可视化为图表。

第一步：设置开发环境为了实现这个例子，我们需要一个支持Ajax和Echarts的Web开发环境。

你可以选择任何你喜欢的IDE、文本编辑器或者直接使用浏览器开发者工具。

第二步：引入Echarts和Ajax库在HTML文件的头部，引入Echarts和Ajax库的CDN链接。

可以从Echarts官方网站上获取最新版本的链接。

以下是Echarts和Ajax库的引入代码：html<script src="<script src="第三步：创建一个HTML元素来放置图表在页面中添加一个容器元素，用于放置我们的图表。

这个容器将成为图表的展示区域。

html<div id="chartContainer" style="width: 600px; height:400px;"></div>第四步：编写JavaScript代码接下来，我们将编写JavaScript代码来调用接口获取数据，并将其可视化为图表。

javascript(document).ready(function(){使用Ajax调用接口获取数据.ajax({url: "your_api_endpoint",method: "GET",success: function(data){数据获取成功后，调用Echarts绘制图表drawChart(data);},error: function(error){数据获取失败时的处理逻辑console.log("Error:", error);}});绘制图表函数function drawChart(data){创建一个Echarts实例var chart =echarts.init(document.getElementById("chartContainer"));定义x轴和y轴的数据var xData = [];var yData = [];遍历数据，将x轴和y轴的值分别添加到xData和yData中for(var i = 0; i < data.length; i++){xData.push(data[i].x);yData.push(data[i].y); }设置图表的配置项var option = {xAxis: {type: "category",data: xData},yAxis: {type: "value"},series: [{type: "line",data: yData}]};使用配置项绘制图表chart.setOption(option);}});在以上代码中，我们首先使用Ajax调用接口来获取数据。

利用Ajax实现长连接

自己画了一个模型图：常规的短连接模式下，都是通过不间断刷新请求实现的，比如每间隔3秒发送一次Ajax 请求，3秒更新一下数据，然后就这样不间断刷新下去，直到用户关闭网页。

这样所带来的弊端就是，如果用户很长时间都没有操作，每次刷新都不会返回新数据，这样就造成了资源的浪费，很多请求都是没必要的；另外一个问题，就是用户的输入，跟数据的请求不是同步的，会造成一定的信息延迟。

2.Ajax长连接方式实现网页聊天模型图：Ajax长连接模式，它的刷新是根据数据来执行的，如果有新数据返回，接收并解析显示数据，然后发起新的Ajax请求，如果一段时间内，用户没有操作，则连接处于睡眠状态，一直等待有用户输入或者请求超时，然后发起下个Ajax请求。

这样做的好处是，每个消息都会即时推送到客户端，延迟极少；另外每次请求都是有意义的，与短连接对比，效率要高很多。

但对于一个用户量很多，并且操作非常频繁的网站，长连接模式也会出现过于频繁的刷新问题。

目前IE对于HTTP连接数是有限制的，每个网页只能同时进行两个长连接，第三个长连接会被阻塞。

利用php在后台sleep，自己做了个模拟的程序，查看效果看了一下别人写的Ajax长连接聊天的案例，以php为例，基本上是在后台进行不间断的检测，如果有新数据就推送，如果没有新数据，就一直阻塞，直到30秒超时，然后客户端重新发起下一个请求。

后台判断里重要的一行代码：usleep(10000); 就是暂停10毫秒，缓解一下CPU压力，个人感觉如果暂停100毫秒，时间延迟也是很难感觉到的。

这种方法基本就是把前端的循环，搬到了后台，中间减少了网络传输的环节，如果是一个Ajax的即时聊天系统，要保存用户的聊天记录，那就需要跟数据库相结合，每秒10次以上的数据查询，这个与短连接比，必定加大了数据库的压力，具体怎么优化，这个应该是交给服务器端人员来处理了。

如果想要了解更多的内容请Google一下comet，或者看看这里(一个很不错的框架，Ajax Push Engine)，这个网站有很多demo，效果很帅。

Ajax异步刷新机制(参考模板)

Ajax(Asynchronous JavaScript and XML)是一个结合了Java技术、XML、以及JavaScript 的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。

这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。

使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。

Ajax不是一个技术，它更像是一个模式—标志并描述有用的设计技巧的一种方法。

对于刚了解它的许多开发人员来说，它是一种新的感觉，但是实现Ajax的所有组件都已存在了许多年。

当前的热闹是因为在2004与2005年出现了一些基于Ajax的非常动态的WebUI，尤其是Google的GMail与Maps应用系统、与照片共享网站Flickr。

这些UI充分地使用了后台通道，也被一些开发者称为“Web 2.0”，并导致了大家对Ajax应用兴趣的猛涨。

一个更好的购物车你可以使用Ajax来加强传统的Web应用，通过消除页面载入来使交互更流畅。

为了示范它，我将使用一个简单的，能动态更新加入的物品购物车。

结合一个在线商店，这个方法可以不用等待点击后的页面重载，而让我们继续浏览并挑选物品到购物车中。

虽然，本文中的代码针对购物车例子，但其中展示的技术可以用到其它的Ajax应用中。

列表1中展示了购物车示例所使用的HTML代码。

在整篇文章中，我都将会引用到这些HTML 代码。

Ajax处理过程一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。

如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。

Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。

使用HTTP方法(GET或POST)来处理请求，并将目标URL设置到XMLHttpReques对象上。

通过代码实例跟我学百度EChart图表控件——应用AJAX动态更新EChart图表中的相关数据的应用实例

};
</script>
<script src="Javascript/demo/ajaxUpdateEChart.js" type="text/javascript"></script>
<body>

<div id="echartWarperDivTagID">
/** 为所创建出的图表对象关联相关的工作参数和加载图表的数据
*/ barChartObject.setOption(option); } /** 为“更新图表数据”按钮添加鼠标点击事件，在点击事件中获得当前图表对象的 Option 对象，然后更新图表中的数据 */ $("#someOneButtonID").on("click",someOneButtonClickEventResponse); function someOneButtonClickEventResponse(jQueryEvent){ $.ajax({
/** 在请求出现错误首先要隐藏加载状态的提示信息，然后再显示出错误提
示信息
杨教授工作室，版权所有，盗版必究， 6/11 页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
*/ barChartObject.hideLoading(); /** 在向服务器发送 AJAX 请求之后，如果出现了错误，则在该方法中进行错误处理。
case(403): alert("无权限执行此操作"); break;

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

图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显⽰在很早之前就介绍过图表插件Highcharts的使⽤了，在2014年的随笔《》，这⾥基本上都介绍的⽐较完整，基本的设置也没有太⼤的差异，本篇介绍的是基于Bootstrap开发框架的界⾯处理，以及对图表插件Highcharts的其他模块，如柱状图，线图等其他样式的信息进⾏动态设置，以期达到利⽤数据库的数据，⽅便动态设置显⽰出来。

1、Bootstrap框架图标的展⽰饼图的数据展⽰界⾯效果如下所⽰柱状图以及其他曲线图展⽰效果如下所⽰。

使⽤这些图表功能强，我们⼀般需要在页⾯⾥⾯引⼊对应的JS+CSS2、使⽤脚本动态设置图表的数据默认的案例，这些数据都是直接绑定在⾥⾯的，有时候我们需要动态设置，那么需要分析好对应的数据属性，以及设置的API，才能正常进⾏显⽰。

以饼图为例，我们需要分析它的数据结构，⼀般是Series⾥⾯的Data数据格式，不同的图表样式需要的数据结构不太⼀样，对于图表⽽已，它的数据格式如下所⽰。

另外也可以使⽤key、Value⽅式的定义格式，如下数据所⽰。

那么，有了这些了解，我们就可以通过Ajax⽅式，动态从数据库⾥⾯获取数据，并绑定在界⾯上显⽰即可。

⾸先我们定义好界⾯上的⼀个图表展⽰控件DIV层，如下代码所⽰。

<div class="tab-char" id="container1" style="height: 300px;max-width:500px"></div>然后通过JS动态创建对应的图表对象，并设置图表的数据即可。

var chart1 = new Highcharts.Chart({chart: {renderTo: "container1",plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,},title: {text: '集团分⼦公司⼈员组成'},tooltip: {pointFormat: '{}: <b>{point.y}</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}},//showInLegend: trueseries: [{type: 'pie',name: '⼈员数量',data: []}]});动态构建数据是通过Ajax⽅式实现的，如下所⽰。

echarts在.Net中使用实例（二）使用ajax动态加载数据

echarts在.Net中使⽤实例（⼆）使⽤ajax动态加载数据前⼀篇⽂章链接：通过上⼀篇⽂章可以知道和echarts参考⼿册可知，series字段就是⽤来存储我们显⽰的数据，所以我们只需要⽤ajax来获取series的值就可以.option{color}backgroundColor全图默认背景，（详见），⽀持rgba，默认为⽆，透明{Array} color数值系列的颜⾊列表，（详见），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数⽐颜⾊列表长度⼤时将循环选取{boolean}renderAsImage⾮IE8-⽀持渲染为图⽚，（详见）{boolean}calculable是否启⽤拖拽重计算特性，默认关闭，（详见，相关的还有，，，）{boolean}animation是否开启动画，默认开启，（详见，相关的还有，，，，）{Object} timeline时间轴（详见），每个图表最多仅有⼀个时间轴控件{Object} title标题（详见），每个图表最多仅有⼀个标题控件{Object} toolbox⼯具箱（详见），每个图表最多仅有⼀个⼯具箱{Object} tooltip提⽰框（详见），⿏标悬浮交互时的信息提⽰{Object} legend图例（详见），每个图表最多仅有⼀个图例，混搭图表共享{Object}dataRange值域选择（详见）,值域范围{Object}dataZoom数据区域缩放（详见）,数据展现范围选择{Object}roamController漫游缩放组件（详见）,搭配地图使⽤{Object} grid直⾓坐标系内绘图⽹格（详见）{Array | Object}xAxis直⾓坐标系中横轴数组（详见），数组中每⼀项代表⼀条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴{Array | Object}yAxis直⾓坐标系中纵轴数组（详见），数组中每⼀项代表⼀条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴{Array} series驱动图表⽣成的数据内容（详见），数组中每⼀项代表⼀个系列的特殊选项及数据⾸先定义⼀个Serial类///<summary>///定义⼀个Series类设置其每⼀组sereis的⼀些基本属性///</summary>class Series{///<summary>/// sereis序列组id///</summary>//public int id//{// get;// set;//}///<summary>/// series序列组名称///</summary>public string name{get;set;}///<summary>/// series序列组呈现图表类型(line、column、bar等)///</summary>public string type{get;set;}///<summary>/// series序列组的数据为数据类型数组///</summary>public List<double> data{get;}}View Code接着将Serial实例化并将其转化为json格式(必须⽤⼤神器：Newtonsoft.Json.dll)，代码如下图private void ShowChart(){//考虑到图表的series数据为⼀个对象数组这⾥额外定义⼀个series的类List<Series> seriesList = new List<Series>();Series series1 = new Series(); = "actual";series1.type = "bar";series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 };Series series2 = new Series(); = "Budget";series2.type = "bar";series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, }; seriesList.Add(series1);seriesList.Add(series2);var newObj = new{series = seriesList};string strJson = ToJson(newObj);WriteJson(strJson);}public static string ToJson( object obj){return NewtonsoftJson(obj);}public static string NewtonsoftJson(object obj){return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);}private static void WriteJson(string str){HttpContext.Current.Response.Write(str);//HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式HttpContext.Current.Response.End();}View Code前台代码只需要⽤ajax来获取值并赋给option的serial属性即可<!DOCTYPE html><html><head><meta charset="utf-8"/><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript" src="echarts/echarts.js"></script></head><body><div id="main" style=" height:400px;"></div></body></html><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'echarts'}});require(['echarts','echarts/chart/bar' // 使⽤柱状图就加载bar模块，按需加载],function (ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {tooltip: {show: true},legend: {data: ['Actual', 'Budget']},xAxis: [{type: 'category',data: ['⼀⽉', '⼆⽉', '三⽉', '四⽉', '五⽉', '六⽉', '七⽉', '⼋⽉', '九⽉', '⼗⽉', '⼗⼀⽉', '⼗⼆⽉'] }],yAxis: [{type: 'value'//Y轴显⽰的类型,默认为value}],series: []};//ajax动态获取数据$.ajax({type: 'post',url: 'ajax.ashx?action=ShowChart',data: {},dataType: 'json',async: false,success: function (result) {if (result) {// 获取json值option.series = result.series;// 为echarts对象加载数据myChart.setOption(option);}},error: function () {alert("Error");}});});</script>View Code所见即所得当然，最后奉上源码！。

Echarts通过Ajax动态获取后端数据（条形图、饼图）

Echarts通过Ajax动态获取后端数据（条形图、饼图）1 饼图1.1 后端-Controller层传的是List型数据/*** 按客户所在城市统计————饼图* @param model* @return*/@RequestMapping("/show")@ResponseBodypublic List<Echarts> show(Model model) {List<Echarts> echartsList = clientService.getCity();System.out.println("echartsList:"+echartsList.get(1).getName());return echartsList;}@RequestMapping("/showCity")public String showCity() {return "showCity";}1.2 前端showCity.html需要引⼊<script src="https:///echarts/4.3.0/echarts.min.js"></script><script type="text/javascript">//基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.clear();var names = [];var mydata = [];$.ajax({method: 'get',url: '/show',dataType: 'json',success: function (datas) {for (var i=0;i<datas.length;i++){names.push(datas[i].name);mydata[i] = {value: datas[i].value, name: datas[i].name};}// 指定图表的配置项和数据var option = {title: {text: '客户所在城市统计',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: names},series: [{name: '所在城市',type: 'pie',radius: '55%',center: ['50%', '60%'],data: mydata,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使⽤刚指定的配置项和数据显⽰图表。

Echarts教程之通过Ajax实现动态加载折线图的方法

Echarts教程之通过Ajax实现动态加载折线图的⽅法⼀、GIF图⼆、前台代码// 调⽤⽅法hotlineLine();// 定时刷新setInterval(function () {hotlineLine();},5000);function hotlineLine(){// 初始化图表元素var hotlineLine = echarts.init(document.getElementById('hotlineLine_id'));$.get('${pageContext.request.getContextPath()}/m/hotline.do', function (res) {var option = {// 提⽰框组件，⿏标经过饼图时会出现提⽰框tooltip: {// 触发类型// 坐标轴触发，主要在柱状图，折线图等会使⽤类⽬轴的图表中使⽤。

trigger: 'axis'},// 每条折线的颜⾊color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'],// 图例组件legend: {// 内容data:['呼⼊', '呼出', '应答', '⽤户放弃'],// 样式textStyle:{fontSize:10,color:'#66ffff'},// 上距离，类似css中的margintop:'5%'},// ⽹格grid: {// 左距离left: '7%',right: '5%',bottom: '10%',top:'20%'},// 横坐标xAxis: {// 类型type: 'category',// 刻度data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],// 样式axisLine:{// 横坐标线的颜⾊lineStyle:{color:'#66ffff'}}},yAxis: {type: 'value',name: '次数',axisLabel: {formatter: '{value}'},axisLine:{lineStyle:{color:'#66ffff'}},splitLine:{show: true,lineStyle:{color:'#66ffff'}}},series: [{name:'呼⼊',type:'line',data:res[3]},{name:'呼出',type:'line',data:res[2]},{name:'应答',type:'line',data:res[1]},{name:'⽤户放弃',type:'line',data:res[0]}],// ⽂本标签label: {//是否展⽰show: true,position: 'top',textStyle: {fontWeight:'bolder',fontSize : '12',fontFamily : '微软雅⿊',color:defaultColor}}};hotlineLine.setOption(option);});}<div class="rightMain01-sub03 box-border"><div class="box-title">话务指标趋势图</div><div class="rightMain01-sub03-data"><div id="hotlineLine_id" style="height:340px;"></div></div></div>三、后台代码List<List<Integer>> hotlineList = new ArrayList<List<Integer>>();@RequestMapping("/m/hotline.do")@ResponseBodypublic JSONArray hotline() {List<List<Integer>> returnList = new ArrayList<List<Integer>>();if (hotlineList.size() == 0 || hotlineList.get(0).size() >= 9) {hotlineList.clear();for (int i = 0; i < 4; i++) {List<Integer> l = new ArrayList<Integer>();l.add(i * 5 + AlexUtils.getRandomInteger(0, 5));hotlineList.add(l);}}for (int i = 0; i < hotlineList.size(); i++) {List<Integer> list = hotlineList.get(i);int thisSize = list.size();if (thisSize < 5) {list.add(list.get(thisSize - 1) + AlexUtils.getRandomInteger(1, 5)); } else {list.add(list.get(thisSize - 1) - AlexUtils.getRandomInteger(1, 5)); }returnList.add(list);}hotlineList = returnList;return JSONArray.fromObject(returnList);}public static int getRandomInteger(int min, int max) {int diff = max - min;return min + new Random().nextInt(diff);}数据格式：1.[[1,3,4,5,7],[6,9,11,12,13],[10,11,12,13,16],[16,19,21,22,24]]总结以上所述是⼩编给⼤家介绍的Echarts教程之通过Ajax实现动态加载折线图的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

Ajax实现页面自动刷新实例解析

Ajax实现页⾯⾃动刷新实例解析Ajax简介：AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指⼀种创建交互式⽹页应⽤的⽹页开发技术。

AJAX = 异步 JavaScript和XML（标准通⽤标记语⾔的⼦集）。

AJAX 是⼀种⽤于创建快速动态⽹页的技术。

通过在后台与服务器进⾏少量数据交换，AJAX 可以使⽹页实现异步更新。

这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新。

传统的⽹页（不使⽤ AJAX）如果需要更新内容，必须重载整个⽹页页⾯。

html部分：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ajax实现⾃动刷新</title></head><body onLoad="Autofresh()"><p>现在的时间是：<span id="currenttime"></span></p><script>var xmlobj;var count=0;function createXMLHttpRequest(){if(window.ActiveXObject){xmlobj=new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){xmlobj=new XMLHttpRequest();}}function Autofresh(){createXMLHttpRequest();count=count+1;xmlobj.open("GET","currenttime.php?count="+count,true);xmlobj.onreadystatechange=doAjax;xmlobj.send("r="+Math.random());//使⽤随机数处理缓存}function doAjax(){if(xmlobj.readyState==4 && xmlobj.status==200){var time_span=document.getElementById('currenttime');time_span.innerHTML=xmlobj.responseText;setTimeout("Autofresh()",2000);}}</script></body></html>php页⾯部分<?php$count=$_GET["count"];$count=$count%7;switch($count){case 1: $message = "11111111111111111";break;case 2: $message = "22222222222222222";break;case 3: $message = "33333333333333333";break;case 4: $message = "44444444444444444";break;case 5: $message = "55555555555555555";break;case 6: $message = "66666666666666666";break;}$res = $message;echo date("Y-m-d H:i:s")."<hr>"."现在的内容是：".$res;>效果图：下⾯给⼤家介绍jQuery实现AJAX定时局部页⾯刷新不时，我需要某种机制，不断刷新⽹页，以提供⼀个实时的仪表板某种。

ajax的自动刷新页面实验

基于Ajax与Echarts的网页动态数据加载

信息技术①作者简介：黄雅莉(1998—)，女，汉族，四川成都人，本科在读，研究方向：软件工程。

通讯作者：钟琪（1979—），女，汉族，四川简阳人，硕士，讲师，研究方向：计算机应用技术，E-mail：hdacong@。

DOI：10.16661/ki.1672-3791.2018.23.034基于Ajax与Echarts的网页动态数据加载①黄雅莉钟琪*(内江师范学院计算机科学学院四川内江 641000)摘要：信息化时代，数据无处不在，面对庞大的数据，图表可直观地将其以一种合适的方式展现给我们。

Echarts使开发人员以较少的代码设计出更为详细、实用且酷炫的图表，Ajax异步刷新结合Echarts的图表功能，使得数据动态加载。

关键词： A jax Echarts JSON 数据可视化中图分类号：TP31 文献标识码：A 文章编号：1672-3791(2018)08(b)-0034-03人口众多和快速发展，使得中国成为世界上最主要的大数据国家。

在研究、教学和开发领域，数据可视化是一个活跃且关键的方面。

Ajax与Echarts技术更是被广泛用于金融、管理等各领域。

1 Echarts特性Echarts，底层依赖轻量级的Canvas类库ZRender，使用JavaScript实现的开源可视化库。

图表样式多，提供多种交互式组件。

根据需要选择对应图表，或传入renderltem函数自定义系列。

2 静态数据页面2.1 设计目的：人口变化，对制定国民经济规划，促进社会主义和谐社会的发展具有重要的意义，现以图表呈现人口变化情况。

数据来源：数据来自国家数据网站（）中2012—2015年总人口，指标含有：年末总人口（万人）、男性人口（万人）、女性人口（万人）、城镇人口（万人）、乡村人口（万人）。

2.2 实现(1)引入echarts.min.js。

(2)初始化echarts实例,获取div标签。

v a r m y C h a r t =e c h a r t s .i n i t (d o c u m e n t .getElementById(‘main’));(3)指定图表的配置项和数据，仅展示series部分。

highcharts ajax动态刷新连接状态图

Heighcharts ajax 动态更新链接状态图一、引言要实现上面的效果。

主要应用Heighcharts ，Heighcharts是一个对个人免费的高效率的前端画图组建，商业收费。

图形出来会有heighcharts的网址，不过可以破解。

二、原理原理很简单，Heighcharts进行画图显示，ajax动态更新数据，把更新的数据应用到heighcharts 上去。

三、实现Heighcharts 提供了很多用例，也提供了很多api函数，纯做一个heighcharts，难度不大。

刚开始也根据例子做了cpu与内存监控图。

没有用到ajax。

很轻松完成。

后面需要做连接监控图，需要结合ajax。

我应用的是prototype，自然很轻易的就得到了数据。

new Ajax.Request('<?=$this->url('XXX') ?>', { method:'post',onSuccess: function(data) {try{alert(eval(data.responseText));}catch(e) { alert(e.message)}}问题来了，怎么把得到的ajax数据调用到heigcharts上。

我图简单（js不过关）就想直接把ajax封装成一函数，然后把数据返回应用到heighcharts，搞了一天，都没数据弄出来，最后网上查了一下，有网友问个这个问题，但没得到解决答案，只能最终放弃。

后面参考了别人的代码，把chart设为全局变量调用到ajax里实现。

终于找到了解决方案。

写了半天，最后得到一个图随着时间的增加，图形变化，但原来的图貌似没删除掉的。

调式了半天没结果。

Highcharts 的enginConn_chart.redraw();重画函数与for(var k =0;k<= enginConn_chart.series.length - 1; k-++){enginConn_chart.series[k].remove();}删除函数都有用到，实在么办法了，就请教我的师傅，师傅果然就是师傅，把for(var k =0;k<= enginConn_chart.series.length - 1; k-++){enginConn_chart.series[k].remove();}改成for(var k = enginConn_chart.series.length - 1; k >= 0; k--){enginConn_chart.series[k].remove();}显示正常。

highcharts动态柱形图，亲测可用

8.<script type="text/javascript">
9.var chart;
10.$(document).ready(function() {
11.chart =newHighcharts.Chart({
12.chart: {
13.renderTo:'container',
14.type:'column',
87.</body>
88.</html>
官网是没有动态刷新的示例的由于需要我查看了其源码并根据之前示例做出了动态柱状图的效果希望对同学们有用
highcharts动态柱形图，亲测可用
废话不再多说！
实现一个柱状图，这个柱状图的高度在不停的刷新，效果如下：
官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的效果，希望对同学们有用！
65.'Total: '+this.point.stackTotal;
66.}
67.},
68.plotOptions: {
69.column: {
70.stacking:'normal',
71.dataLabels: {
72.enabled:true,
73.color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) ||'white'
21.data.push(['Apples', Math.random()]);
22.data.push(['Oranges', Math.random()]);

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

动态更新highcharts数据的实现⽅法动态更新highcharts数据的实现⽅法<!doctype html><html><head><script type="text/javascript" src="/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="/highcharts/highcharts.js"></script><script type="text/javascript">var chart ;$(function (){chart = new Highcharts.Chart({chart: {renderTo: 'container'},title: {text: '?',},xAxis: {categories: []},yAxis: {title: {text: '数据'},},series: []});});function show(){var trs = $('table tr');var datas=[];var map={};for(var i=1;i<trs.length;i++){var nams = $('td:first',trs[i]).html();var value = $('td:last',trs[i]).html();if(typeof map[nams]=='undefined'){var pos = datas.length;map[nams] = pos;datas[pos]={name:nams,data:[]};}datas[map[nams]]["data"].push(Number(value));}var series=chart.series;if(series.length > 0){series[0].remove(false);}var d = datas[0];chart.addSeries(d);//设置数据,danielinbitichart.setTitle({text:});//设置标题 commend by danielinbitichart.redraw();}</script><script type="text/javascript">$(function () {new Highcharts.Chart({chart: {renderTo: 'container2'},title: {text: '链球菌毒素O',},xAxis: {categories: []},yAxis: {title: {text: '数据'},},series: [{name: 'SBASO',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}]});});</script></head><body><input type='button' onclick='show()' value='显⽰表格数据'/><h1>曲线图</h1><div id="container" style="width:300px;height:300px;float:left;"></div><div id="container2" style="width:300px;height:300px;float:left;"></div><table border="1" align="left"><tr><td>CName</td><td>EName</td><td>Time</td><td>Date</td></tr><tr><td>⾎⼩板</td><td>HPLT</td><td>1</td><td>7.0</td></tr><tr><td>⾎⼩板</td><td>HPLT</td><td>2</td><td>6.9</td></tr><tr><td>⾎⼩板</td><td>HPLT</td><td>3</td><td>9.5</td></tr></table></body></html>以上这篇动态更新highcharts数据的实现⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

Echarts动态刷新数据

Echarts动态刷新数据在这次的项⽬中图表显⽰的部分⽐较多，这边给分享下⽤到的图表的数据刷新饼图最后的效果先看下前端部分<div div style="height: 40%; width: 17.5%; background-color: white;margin-top: 20px; float: left; border-left: black;" id="member"></div>这是右边图的 echarts的html ⼀定要定义好⼤⼩接下来是 js部分先定义⼀个模板官⽹有⾃⼰稍加修改（⽐较懒没加注释）// 绘制会员量⽐例图表var memberChart = echarts.init(document.getElementById('member'));memberChart.setOption({tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {itemHeight: 10,itemWidth: 10,orient: 'vertical',x: 'center',y: 'bottom',icon: 'roundRect',formatter: function(name) {var index = 0;var clientlabels = ['新增会员','⽼会员'];var clientcounts = [621,32032];clientlabels.forEach(function(value,i){if(value == name){index = i;}});return name + " " + clientcounts[index];}},series: [{name:'男⼥⽐例',type:'pie',radius: ['45%', '53%'],avoidLabelOverlap: false,hoverAnimation: false,data:[{value:621, name:'新增会员'},{value:32032, name:'⽼会员'},],itemStyle: {normal:{label:{position : 'outside',formatter: '{d}%',fontSize: 10,},labelLine :{length: 2,length2: 2,show:false,}}}}],color:['#0090FF','#F6A20C'],title: {subtext: '会员总⼈数',text: '32653',x: 'center',y: 'center',padding: 0,itemGap: 0,textStyle:{fontSize: 20,},subtextStyle:{fontSize: 10,},},graphic: {type: 'text',style:{x: 15,y: 15,font: 'bolder 1.2em "PingFang-SC-Medium", sans-serif',text:'今⽇新增会员⽐例',},},});因为主副标题被我拿去显⽰不同数据了所有⽤上了graphic原⽣图形元素组件接下来看下动态刷新数据的jsfunction reflushMember(data) {memberChart.setOption({legend: {formatter: function(name) {var index = 0;var clientlabels = ['新增会员','⽼会员'];var clientcounts = [data.newMemberCount, data.oldMemberCount]; clientlabels.forEach(function(value,i){if(value == name){index = i;}});return name + " " + clientcounts[index];}},series: [{data:[{value:data.newMemberCount, name:'新增会员'},{value:data.oldMemberCount, name:'⽼会员'},],}],title: {text:data.memberCount,}})}主要就是把之前模板上的数据部分替换成后台获取到的数据饼图的刷新就到这⾥还有个横向柱状图其实都是差不多的但是还是也看下吧先看效果这是4个横向柱状图适应不同的搜索条件就看下⽉度top5的吧<p id="monthTitle" style="position:absolute;margin-left: 18%;margin-top: 1.4%;font: bolder 1.2em PingFang-SC-Medium sans-serif;"></p><div style="height: 100%;width: 100%;position:absolute;" id="monthArea"></div> P标签是那个标题// 绘制⽉度热⼒商圈图表var monthAreaChart = echarts.init(document.getElementById('monthArea'));monthAreaChart.setOption({dataset: {source: [/* [58212, '⼩郡⼲串串'],[78254, '钢管⼚'],[41032, '耐克'],[12755, '⾦⼤福'],[20145, '肯德基'],*/]},/*grid: {containLabel: true},*/xAxis: {name: '(⼈)',show:true,splitLine: {show: false}},yAxis: {type: 'category',axisLine:{show:false}, //坐标轴axisTick:[{ //坐标轴⼩标记show:false}],},grid:{height:'70%',y2:20,left:'15%',},series: [{textStyle:{fontSize:10,},type: 'bar',encode: {// Map the "amount" column to X axis.x: 'amount',// Map the "product" column to Y axisy: 'product'},/*barWidth: 10,*/barGap:'70%',/*多个并排柱⼦设置柱⼦之间的间距*/barCategoryGap:'50%',/*多个并排柱⼦设置柱⼦之间的间距*/itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#438CFF'}, {offset: 1,color: '#20C0F4'}]),label: {show: true, //开启显⽰position: 'right', //在上⽅显⽰textStyle: { //数值样式color: 'black',fontSize: 10}},}},}],graphic: {type: 'text',style:{x: 15,y: 15,font: 'bolder 1.2em "PingFang-SC-Medium", sans-serif',text:'⽉度TOP5',},},上⾯是横向柱状图模板例⼦var listTop5Result = result.listTop5Result;for(var i = listTop5Result.length - 1; i >= 0; i--){names.push(listTop5Result[i].deptName); //挨个取出类别并填⼊类别数组 }for(var i = listTop5Result.length - 1; i >= 0; i--){nums.push(listTop5Result[i].num); //挨个取出⼈次并填⼊销量数组}myChart.hideLoading(); //隐藏加载动画myChart.setOption({ //加载数据图表yAxis: {data: names},series: [{data: nums}]});上⾯是动态获取并要刷新的数据和饼图不同的是柱状图传进去的要是数组以上内容仅作交流学习，版权归原作者所有。

highchart动态刷新（可用于制作股票时时走势）-电脑资料

highchart动态刷新（可用于制作股票时时走势）-电脑资料代码如下：页面 js 引用：创建一个div ：javascript. 代码：复制代码$(function () {var k=0;$(document).ready(function() {$('#syscharts').highcharts({chart: {//设置背景色backgroundColor: {linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },stops: [[0, 'rgb(0, 0, 0)'],[1, 'rgb(0, 0, 0)']]},//设置放大的方向可以是x或者yzoomType: 'xy',//设置绘图区域边框颜色和宽度plotBorderColor: '#008800',plotBorderWidth: 0,shadow:true,//设置动画效果animation: Highcharts.svg,//左边距和右边距marginRight: 20,borderColor: '#008800',borderWidth: 1,events: {load: function() {var series = this.series[0];var ld = 0;setInterval(function() {var x =(k++);var y = Math.random()*100;while(y-old>=10 || y - old <= -10){y = Math.random()*100;}ld = y;series.addPoint([x, parseInt(y)], true, true);}, 1000);}}},title: {text:"CPU",style. {color: '#FFFFFF',font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' }},xAxis: {tickInterval: 5,gridLineColor: '#008800',gridLineWidth: 1,lineWidth:0,labels:{formatter: function() { return ""; }, step:1},},yAxis: [{tickInterval: 10, gridLineColor: '#008800', gridLineWidth: 1,min:0,max:100,labels: {formatter: function() {return this.value +"%";},style. {color: '#FFFFFF'}},title: { text: '' },opposite: false}],tooltip: {shared: false,valueDecimals : 0},legend: {enabled: true}, exporting: { enabled: false }, plotOptions: { area: { marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true }}}},line: { marker: { enabled: false, symbol: 'circle', radius: 1, states: { hover: { enabled: true }}}}},credits:{ enabled:false},series: [{name: 'CPU使用率',type: 'area',//line 则为不填充折线样式color: '#0000FF',yAxis: 0,data: (function() {var data = [], i;for (i = -300; i <= 0; i++) {data.push({x: i,y: 0});}return data;})()}]});});});。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Heighcharts ajax 动态更新链接状态图一、引言要实现上面的效果。

主要应用Heighcharts ，Heighcharts是一个对个人免费的高效率的前端画图组建，商业收费。

图形出来会有heighcharts的网址，不过可以破解。

二、原理原理很简单，Heighcharts进行画图显示，ajax动态更新数据，把更新的数据应用到heighcharts 上去。

三、实现Heighcharts 提供了很多用例，也提供了很多api函数，纯做一个heighcharts，难度不大。

刚开始也根据例子做了cpu与内存监控图。

没有用到ajax。

很轻松完成。

后面需要做连接监控图，需要结合ajax。

我应用的是prototype，自然很轻易的就得到了数据。

后面参考了别人的代码，把chart设为全局变量调用到ajax里实现。

终于找到了解决方案。

写了半天，最后得到一个图随着时间的增加，图形变化，但原来的图貌似没删除掉的。

调式了半天没结果。

佩服！代码：var enginConn_chart;function get_enginConn_data(){new Ajax.Request('<?=$this->url('XX) ?>', { method:'post',onSuccess: function(data) {try{update_enginConn_chart(eval(data.responseText));}catch(e) { //alert(e.message)}}}function update_enginConn_chart(data){enginConn_chart.redraw();var smain_data=[];var cmain_data=[];var tmain_data=[];for (var key in data) {if (data.hasOwnProperty(key)) {if(key=="main"){var smain=data.main.s;var cmain=data.main.c;var tmain=data.main.to;}}}time = (new Date()).getTime();for (var i = 0; i < smain.length; i++) {var svalue = smain[i];if(svalue==0){svalue=Math.random() * 100;}smain_data.push({ y : svalue, x : time - i*10000});}for (var i = 0; i < cmain.length; i++) {var cvalue = cmain[i];if(cvalue==0){cvalue=Math.random() * 100;}cmain_data.push({ y : cvalue, x : time - i*10000});}for (var i = 0; i < tmain.length; i++) {var tvalue = tmain[i];if(tvalue==0){tvalue=Math.random() * 100;}tmain_data.push({ y : tvalue, x : time - i*10000});}for(var k = enginConn_chart.series.length - 1; k >= 0; k--){ enginConn_chart.series[k].remove();}enginConn_chart.addSeries({name: '服务器端',data: smain_data,color: '#0066FF'});enginConn_chart.addSeries({name: '客户端',data: cmain_data,color: '#006633'});enginConn_chart.addSeries({name: 'Total ',data: tmain_data,color: '#FF6600'});}Highcharts.setOptions({global: {useUTC: false}});jQuery(document).ready(function() {name='';data=[];enginConn_chart = new Highcharts.Chart({chart: {renderTo: '_connmain_',defaultSeriesType: 'spline',marginRight: 10,marginTop: 10},title: {text: ''},xAxis: {type: 'datetime',tickPixelInterval: 120},yAxis: {title: {text: '保持连接数/个'},min:0,minPadding: 0.5,maxPadding: 0.5,plotLines: [{value: 0,width: 1,color: '#87BED3'}]},plotOptions: {series: {lineWidth: 1,dashStyles:'Solid',shadow: false,states: {hover: {enabled: true,lineWidth: 1}},marker: {enabled: false,states: {hover: {enabled: true,symbol: 'circle',radius: 3,lineWidth: 1}}}}},tooltip: {formatter: function() {return Highcharts.numberFormat(this.y, 2);}},legend: {enabled: true,borderWidth: 1},exporting: {enabled: false},series: [{name: name,color: '#0066FF',data: data}]});});get_enginConn_data();window.setInterval(get_enginConn_data, 10000);四、总结1、前前后后这个东西折腾我三天，后来师傅5-6分钟就搞定，得多请教多交流。

2、方法不行，就应该立即换方法。

3、多看别人提供你的东西。

就是别重复你自己，但要善用别人的东西。

之前折腾了一段时间与ajax结合，其实人家都有这例子，我没看。

highcharts有网友说比较耗内存，我到没测试过。

希望有真实的数据证明。