1. 程式人生 > >highchars多Y軸實現(Jquery post請求)

highchars多Y軸實現(Jquery post請求)

// 產品銷售量,PV 轉化率
	$.post("shopgoods.view", {
		'sdate' : sdate,
		'edate' : edate
	}, function(result, resultState) {
		var sumSuc = 0;
		var date_value = [];// X軸 儲存日期
		var suc_value = new Array();//Y軸
		var pv_value = new Array();//Y軸
		var zhl_value = new Array();//Y軸
		if (resultState == "success") {
			var resultJson = eval(result);
			// 迴圈處理json返回的資料
			$.each(result, function(index, val) {
				date_value.push(val['dateTime']);
				pv_value.push(val['pageViews']);
				suc_value.push(val['market']);
				zhl_value.push(val['zhl']);
				sumSuc += val['market'];//得到一個總合
			});
			// alert(sumSuc);
			// $("#tableContent").html($("#TemplateData_date").html($("#td1")).append(sumSuc));
			$("#td1").html(sumSuc);// 設定銷量值
			$('#container_bar').highcharts({
				exporting : {
					enabled : false
				},
				chart : {
					zoomType : 'xy'
				},
				legend : {
					layout : 'vertical',
					align : 'left',
					x : 120,
					verticalAlign : 'top',
					y : 100,
					floating : true,
					backgroundColor : '#FFFFFF'
				},
				title : {
					text : ''
				},
				xAxis : {
					categories : date_value,
					labels : {
						rotation : 75
					}
				},
				yAxis : [ { // Primary yAxis
					labels : {
						format : '{value}',
						style : {
							color : '#89A54E'
						}
					},
					title : {
						text : '銷量',
						style : {
							color : '#89A54E'
						}
					}
				}, { // Secondary yAxis
					title : {
						text : 'PV',
						style : {
							color : '#4572A7'
						}
					},
					labels : {
						format : '{value}',
						style : {
							color : '#4572A7'
						}
					},
					opposite : true
				} ],
				tooltip : {
					shared : true
				},
				credits : {
					enabled : false
				},
				series : [ {
					name : 'PV',
					color : '#4572A7',
					type : 'column',
					yAxis : 1,
					data : pv_value,
					tooltip : {
						valueSuffix : ''
					}

				}, {
					name : '銷量',
					color : '#89A54E',
					type : 'column',
					data : suc_value,
					tooltip : {
						valueSuffix : ''
					}
				}, {
					name : '轉化率',
					color : '#AA4643',
					type : 'spline',
					data : zhl_value,
					tooltip : {
						valueSuffix : ''
					}
				}, ]
			});
		}
	});