ajax請求返回Json字符串運用highcharts數據圖表展現數據
阿新 • • 發佈:2019-04-04
grid method ext win https substring gets art fix
[1].[圖片] Json字符串和highcharts數據圖表展現.jpg 跳至
[1]
[2].[代碼] Json字符串和highcharts數據圖表展現
跳至
[1].[圖片] Json字符串和highcharts數據圖表展現.jpg 跳至
[1] code=26754#44745" rel="nofollow">
[2]
[2].[代碼] Json字符串和highcharts數據圖表展現
跳至code=26754#44747" rel="nofollow">[1]
code=26754#44745" rel="nofollow">
[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 |
} |
ajax請求返回Json字符串運用highcharts數據圖表展現數據