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

浏览数：38 / 时间：2015年06月09日

[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]