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

发布时间：2020-12-16 00:34:18 所属栏目：百科来源：网络整理

导读：[1]. [图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] [2] [2]. [代码] Json字符串和highcharts数据图表展现跳至[1] [2] 001 /* 002 * Filename: OQtyOrPriceReport.js 003 * Description:客户订单数量和价格报表分析 004 * Created: 2013.11.14 0

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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

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

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