Highcharts无法使用Ajax数据进行绘制,而无法与静态数据一起使用,这是Ajax响应提供的。是否需要重绘或其他内容,我试过但没用。我也尝试了窗口加载事件,还尝试了json stringify。
====================视图=========================== ========
<script type="text/javascript"> $(document).ready(function () {
/****************** Get ur parameters *********************************/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
/***************************************************/
var tm_id = getUrlVars()["tm_id"];
var trunk_id = getUrlVars()["trunk_id"];
var chart = $('#container').highcharts();
$.ajax({
url: "completedcallgraph?tenant_id=" + tm_id + "&trunk_id=" + trunk_id,
method: "GET",
success: function (result) {
var resultObj = JSON.parse(result);
setTimeout(function(){drawHighchart(resultObj.currentcalls,resultObj.inserted_at,resultObj.maxcallpath);
}, 1000);
}
});
function drawHighchart(currentcalls,inserted_at,maxcallpath){
$('#container').highcharts({
chart: {
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
title: {
text: 'CallPath Current Utilization',
x: -20 //center
},
xAxis: {
title: {
text: 'Time'
},
categories: [inserted_at]
},
yAxis: {
title: {
text: 'CallDetails'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
showInLegend: false
},
series:[{name: 'tioc_total_current_calls',data: [currentcalls]},{name: 'tioc_max_call_paths',data: [maxcallpath],dashStyle: 'shortdot',color: 'red'}]
});
}
});
</script>
===============控制器========================>
public function actionCompletedcallgraph($tenant_id, $trunk_id)
{
$completedCallCount = (new Query())
->from('ntc.callpath_utilizationreport_data')
->where(['tm_id' => $tenant_id])->andWhere(['trunk_id' => $trunk_id])
->all();
// Completed Calls Code
$callDetails = '';
$inserted_at = '';
$tioc_max_call_paths = '';
$tioc_total_current_calls = '';
$tioc_inbound_calls = '';
$tioc_outbound_calls = '';
foreach ($completedCallCount as $key => $value) {
$tioc_max_call_paths .= $value['tioc_max_call_paths'].',';
$tioc_total_current_calls .= $value['tioc_total_current_calls'].',';
$tioc_inbound_calls .= $value['tioc_inbound_calls'].',';
$tioc_outbound_calls .= $value['tioc_outbound_calls'].',';
$inserted_at .= $value['inserted_at'] * 1000 . ',';
}
$inserted = rtrim($inserted_at,',') ;
$maxcallpath =rtrim($tioc_max_call_paths,',') ;
$currentcalls =rtrim($tioc_total_current_calls,',') ;
return $result = json_encode(['currentcalls' => $currentcalls,'maxcallpath' => $maxcallpath, 'inserted_at' => $inserted]);
}
Highcharts无法使用Ajax数据进行绘制,而无法与静态数据一起使用,这是Ajax响应提供的。是否需要重绘或其他内容,我试过但没用。我也尝试过窗口加载事件,并且...
[您不需要在每次收到ajax响应时都重新初始化,只需尝试用新数据调用chart.redraw()。