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

[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, 255, 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可私信哥，男性程序猿的就免了，发了哥也不会回。

[email protected]

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

时间： 2024-09-28 23:20:29

ajax请求返回Json字符串运用highcharts数据图表展现数据的相关文章

ajax请求返回json字符串/json对象 处理

1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: PrintWriter out = httpServletResponse.getWriter(): ObjectMapper mapper = new ObjectMapper(); Map map = new HashMap(); map.put("name","zz");

Ajax请求返回Json数据

介绍一下用Ajax向服务器请求数据的方法,以及对于返回的Json数据的使用. 1 $.ajax({ 2 type:"post", 3 async:false, 4 url: ******** 5 data:{"province":$("#provice").val(), 6 "city":$("#city").val(), 7 "area":$("#area").va

解决ajax请求返回Json无法解析&quot;\&quot;字符的问题

原因:获取身份证信息,涉及图片路径,存在“\”字符,导致Json解析错误 解决思路:将返回类型从"json"改成"text",此时返回的数据类型变成字符串,将字符串的"\"替换成"/",此时不存在Json格式错误的问题, 再调用Json.parse解析成Json格式 $.ajax({ type : "GET", //提交方式 url : "http://127.0.0.1:24010/ZKIDRO

ajax请求返回数据，模板中的数据处理

/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开始时间 var new_end_time=$('#new_end_time').val();//结束时间 if(!new_start_time||!new_end_time){ alert("时间不能为空"); return false; } $.ajax({ url:'/Statisti

swift http请求返回json数据并解析

1 AppDelegate.swift // // AppDelegate.swift // QQDemo // // Created by 赵超 on 14-6-21. // Copyright (c) 2014年 赵超. All rights reserved. // import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? fun

jquery ajax调用返回json格式数据处理

Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: false }).responseText; 返回json数组取条数用result.length <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"

spring mvc返回json字符串的方式

spring mvc返回json字符串的方式 方案一:使用@ResponseBody 注解返回响应体 直接将返回值序列化json            优点:不需要自己再处理 步骤一:在spring-servlet.xml文件中配置如下代码 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans&quo

spring 4.x下让http请求返回json串

当前很多应用已经开始将响应返回为json串,所以基于springframework框架开发的服务端程序,让响应返回json字符串成为了一种常用手段. 这里介绍一下如何在spring-MVC框架下方便快捷的返回json字符串. 首先,需要在controller类的方法名头上加@ReponseBody注解,但是只增加这个注解是不够的,在使用httpclient4.5.x模拟post请求时,出现http status 406的错误:下载地址 Java代码 复制代码 收藏代码 1.406 Not Acc

shiro异步请求返回JSON响应

shiro异步请求返回JSON响应 需求1:当shiro请求资源,但是没有进行认证时,默认是进行重定向,现在需要返回JSON响应.注意异步请求,服务器重定向后,ajax拿到的是浏览器重定向后的到的页面源码. 解决2: 自定义FormAuthenticationFilter.覆盖onAccessDenied方法.返回JSON字符串.并将自定义的过滤器添加到ShiroFilterFactoryBean,键的名称为authc. 需求2:ShiroFilterFactoryBean用注解时,过滤的url