ajax请求返回Json字符串运用highcharts数据图表展现数据
2020-12-13 02:20
标签：数据 ajax json 矢量图 报表
ajax请求返回Json字符串运用highcharts数据图表展现数据,搜素材,soscw.com ajax请求返回Json字符串运用highcharts数据图表展现数据 标签：数据 ajax json 矢量图 报表 原文地址：http://blog.csdn.net/u011340807/article/details/25324927[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
‘‘ + this.series.name +
‘
‘+ 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数据图表展现数据
文章链接：http://soscw.com/index.php/essay/25374.html