ajax请求返回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

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可私信哥，男性程序员的就免了，发了哥也不会回。 zhe-jiang.he@hp.com