ajax请求返回Json字符串运用highcharts数据图表展现数据

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax请求返回Json字符串运用highcharts数据图表展现数据，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] [2]

[2].[代码] Json字符串和highcharts数据图表展现 跳至[1] [2]

001@H_404_22@ /*@H_404_22@
002@H_404_22@ * Filename: OQtyOrPriceReport.js@H_404_22@
003@H_404_22@ * Description:客户订单数量和价格报表分析@H_404_22@
004@H_404_22@ * Created: 2013.11.14@H_404_22@
005@H_404_22@ * Author : liangjw@H_404_22@
006@H_404_22@ * Company:Copyright (C) 2013 Create Family Wealth Power By Peter@H_404_22@
007@H_404_22@ */@H_404_22@
008@H_404_22@ ////////////////////////////////////////////////////////////////////////////////////////////////////@H_404_22@
009@H_404_22@ var dataTmp = "";@H_404_22@
010@H_404_22@ $(function () {@H_404_22@
011@H_404_22@ GetseriesValue(); //获取数据源信息@H_404_22@
012@H_404_22@ });@H_404_22@
013@H_404_22@ @H_404_22@
014@H_404_22@ //获取数据源信息@H_404_22@
015@H_404_22@ //////////////////////////////////////////////////////////////////////@H_404_22@
016@H_404_22@ function GetseriesValue() {@H_404_22@
017@H_404_22@ @H_404_22@
018@H_404_22@ var DropCustomerName = $("#DropCustomerName").val(); //获取客户名称@H_404_22@
019@H_404_22@ @H_404_22@
020@H_404_22@ $.ajax({@H_404_22@
021@H_404_22@ type: "get",@H_404_22@
022@H_404_22@ url: "/ashx/GetClassTypeJosn.ashx",@H_404_22@
023@H_404_22@ data: { method: "mlqtylist",DropCustomerName: DropCustomerName },@H_404_22@
024@H_404_22@ dataType: "json",@H_404_22@
025@H_404_22@ cache: false,@H_404_22@
026@H_404_22@ success: function (result) {@H_404_22@
027@H_404_22@ dataTmp = "";@H_404_22@
028@H_404_22@ $.each(result,function (i,field) {@H_404_22@
029@H_404_22@ //拼接json数据集字符串@H_404_22@
030@H_404_22@ dataTmp += "{name: '" + field.CustomerName + "',data: [" + field.Jan + "," + field.Feb + "," + field.Mar + "," + field.Apr@H_404_22@
031@H_404_22@ + "," + field.May + "," + field.Jun + "," + field.Jul + "," + field.Aug + "," + field.Sep + "," + field.Oct@H_404_22@
032@H_404_22@ + "," + field.Nov + "," + field.Dec + "]}" + ",";@H_404_22@
033@H_404_22@ });@H_404_22@
034@H_404_22@ //去除最后一个字符@H_404_22@
035@H_404_22@ dataTmp=dataTmp.substring(0,dataTmp.length - 1);@H_404_22@
036@H_404_22@ GetData(dataTmp);@H_404_22@
037@H_404_22@ },@H_404_22@
038@H_404_22@ error: function () {@H_404_22@
039@H_404_22@ alert("请求超时，请重试！");@H_404_22@
040@H_404_22@ }@H_404_22@
041@H_404_22@ });@H_404_22@
042@H_404_22@ };@H_404_22@
043@H_404_22@ @H_404_22@
044@H_404_22@ //绑定获取数据信息操作@H_404_22@
045@H_404_22@ //////////////////////////////////////////////////////////////////////@H_404_22@
046@H_404_22@ function GetData(dataTmp) {@H_404_22@
047@H_404_22@ @H_404_22@
048@H_404_22@ //绑定数据信息@H_404_22@
049@H_404_22@ $('#container').highcharts({@H_404_22@
050@H_404_22@ chart: {@H_404_22@
051@H_404_22@ backgroundColor: {@H_404_22@
052@H_404_22@ linearGradient: { x1: 0,y1: 0,x2: 1,y2: 1 },@H_404_22@
053@H_404_22@ stops: [@H_404_22@
054@H_404_22@ [0,'rgb(255,255,255)'],@H_404_22@
055@H_404_22@ [1,'rgb(240,240,255)']@H_404_22@
056@H_404_22@ ]@H_404_22@
057@H_404_22@ },@H_404_22@
058@H_404_22@ borderWidth: 2,@H_404_22@
059@H_404_22@ plotBackgroundColor: 'rgba(255,.9)',@H_404_22@
060@H_404_22@ plotShadow: true,@H_404_22@
061@H_404_22@ plotBorderWidth: 1@H_404_22@
062@H_404_22@ },@H_404_22@
063@H_404_22@ title: {@H_404_22@
064@H_404_22@ text: 'Monthly Total Information ',@H_404_22@
065@H_404_22@ x: -20@H_404_22@
066@H_404_22@ },@H_404_22@
067@H_404_22@ subtitle: {@H_404_22@
068@H_404_22@ text: 'Source: winnaodan.net',@H_404_22@
069@H_404_22@ x: -20@H_404_22@
070@H_404_22@ },@H_404_22@
071@H_404_22@ lang: {@H_404_22@
072@H_404_22@ printChart: '打印图表',@H_404_22@
073@H_404_22@ downloadpnG: '下载JPEG 图片',@H_404_22@
074@H_404_22@ downloadJPEG: '下载JPEG文档',@H_404_22@
075@H_404_22@ downloadPDF: '下载PDF 文件',@H_404_22@
076@H_404_22@ downloadSVG: '下载SVG 矢量图',@H_404_22@
077@H_404_22@ contextButtonTitle: '下载图片'@H_404_22@
078@H_404_22@ },@H_404_22@
079@H_404_22@ xAxis: {@H_404_22@
080@H_404_22@ gridLineWidth: 1,@H_404_22@
081@H_404_22@ lineColor: '#000',@H_404_22@
082@H_404_22@ tickColor: '#000',@H_404_22@
083@H_404_22@ categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']@H_404_22@
084@H_404_22@ },@H_404_22@
085@H_404_22@ yAxis: {@H_404_22@
086@H_404_22@ minorTickInterval: 'auto',@H_404_22@
087@H_404_22@ lineColor: '#000',@H_404_22@
088@H_404_22@ lineWidth: 1,@H_404_22@
089@H_404_22@ tickWidth: 1,@H_404_22@
090@H_404_22@ tickColor: '#000',@H_404_22@
091@H_404_22@ min: 0,@H_404_22@
092@H_404_22@ labels: {@H_404_22@
093@H_404_22@ formatter: function () { //设置纵坐标值的样式@H_404_22@
094@H_404_22@ return this.value + '/Qty';@H_404_22@
095@H_404_22@ }@H_404_22@
096@H_404_22@ },@H_404_22@
097@H_404_22@ title: {@H_404_22@
098@H_404_22@ text: 'Total Analyze (Qty)'@H_404_22@
099@H_404_22@ },@H_404_22@
100@H_404_22@ plotLines: [{@H_404_22@
101@H_404_22@ value: 0,@H_404_22@
102@H_404_22@ width: 1,@H_404_22@
103@H_404_22@ color: '#808080'@H_404_22@
104@H_404_22@ }]@H_404_22@
105@H_404_22@ },@H_404_22@
106@H_404_22@ tooltip: {@H_404_22@
107@H_404_22@ formatter: function () {@H_404_22@
108@H_404_22@ return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + yAxisLabels;@H_404_22@
109@H_404_22@ }@H_404_22@
110@H_404_22@ },@H_404_22@
111@H_404_22@ legend: {@H_404_22@
112@H_404_22@ itemStyle: {@H_404_22@
113@H_404_22@ font: '9pt Trebuchet MS,Verdana,sans-serif',@H_404_22@
114@H_404_22@ color: 'black'@H_404_22@
115@H_404_22@ },@H_404_22@
116@H_404_22@ itemHoverStyle: {@H_404_22@
117@H_404_22@ color: '#039'@H_404_22@
118@H_404_22@ },@H_404_22@
119@H_404_22@ itemHiddenStyle: {@H_404_22@
120@H_404_22@ color: 'gray'@H_404_22@
121@H_404_22@ },@H_404_22@
122@H_404_22@ layout: 'vertical',@H_404_22@
123@H_404_22@ align: 'right',@H_404_22@
124@H_404_22@ verticalAlign: 'middle',@H_404_22@
125@H_404_22@ borderWidth: 0@H_404_22@
126@H_404_22@ },@H_404_22@
127@H_404_22@ series: eval("[" + dataTmp + "]") //获取数据源操作信息@H_404_22@
128@H_404_22@ });@H_404_22@
129@H_404_22@ }









我只能说不要太崇拜哥，MM可私信哥，男性程序猿的就免了，发了哥也不会回。 zhe-jiang.he@hp.com @H_404_22@

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作