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