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