highchars多Y軸實現(Jquery post請求)
阿新 • • 發佈:2019-02-17
// 產品銷售量,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 : '' } }, ] }); } });