Json字符串和highcharts數據圖表展現 跳至 [2] [全屏預覽]
/*
* Filename: OQtyOrPriceReport.js
* Description:客戶訂單數量和價格報表分析
* Created: 2013.11.14
* Author : liangjw
* Company:Copyright (C) 2013 Create Family Wealth Power By Peter
*/
////////////////////////////////////////////////////////////////////////////////////////////////////
var dataTmp = "";
$(function () {
GetseriesValue(); //獲取數據源信息
});
//獲取數據源信息
//////////////////////////////////////////////////////////////////////
function GetseriesValue() {
var DropCustomerName = $("#DropCustomerName").val(); //獲取客戶名稱
$.ajax({
type: "get",
url: "/ashx/GetClassTypeJosn.ashx",
data: { method: "mlqtylist", DropCustomerName: DropCustomerName },
dataType: "json",
cache: false,
success: function (result) {
dataTmp = "";
$.each(result, function (i, field) {
//拼接json數據集字符串
dataTmp += "{name: '" + field.CustomerName + "',data: [" + field.Jan + ", " + field.Feb + ", " + field.Mar + ", " + field.Apr
+ ", " + field.May + ", " + field.Jun + "," + field.Jul + ", " + field.Aug + "," + field.Sep + ", " + field.Oct
+ "," + field.Nov + ", " + field.Dec + "]}" + ",";
});
//去除最後一個字符
dataTmp=dataTmp.substring(0, dataTmp.length - 1);
GetData(dataTmp);
},
error: function () {
alert("請求超時，請重試！");
}
});
};
//綁定獲取數據信息操作
//////////////////////////////////////////////////////////////////////
function GetData(dataTmp) {
//綁定數據信息
$('#container').highcharts({
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
text: 'Monthly Total Information ',
x: -20
},
subtitle: {
text: 'Source: winnaodan.net',
x: -20
},
lang: {
printChart: '打印圖表',
downloadPNG: '下載JPEG 圖片',
downloadJPEG: '下載JPEG文檔',
downloadPDF: '下載PDF 文件',
downloadSVG: '下載SVG 矢量圖',
contextButtonTitle: '下載圖片'
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
min: 0,
labels: {
formatter: function () { //設置縱座標值的樣式
return this.value + '/Qty';
}
},
title: {
text: 'Total Analyze (Qty)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + yAxisLabels;
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
},
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: eval("[" + dataTmp + "]") //獲取數據源操作信息
});
}