Javascript Highcharts无法使用ajax数据绘制
Highcharts无法使用ajax数据绘制,它使用静态数据时会以ajax响应的形式出现。 是否需要重新绘制或其他什么,我尝试过,但没有成功。 我也尝试过窗口加载事件,也尝试过json stringify ============================查看=================================Javascript Highcharts无法使用ajax数据绘制,javascript,highcharts,yii2,Javascript,Highcharts,Yii2,Highcharts无法使用ajax数据绘制,它使用静态数据时会以ajax响应的形式出现。 是否需要重新绘制或其他什么,我尝试过,但没有成功。 我也尝试过窗口加载事件,也尝试过json stringify ============================查看================================= <script type="text/javascript"> $(document).ready(function () { /***
<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]);
}
您不需要每次收到ajax响应时都重新初始化,只要尝试使用新数据调用chart.redraw()。看看你使用的是js版本的插件而不是任何Yi2扩展的代码,对吗?你能展示一些ajax调用返回的json值示例吗?@MuhammadOmerAslam是的,我没有使用任何扩展。这是一个用于分类:[157682629800157682786700015773448010001577344801000]和用于=====X轴===============================系列:[{名称:'tioc_总计_当前_呼叫数,[2,3,4,5]},{名称:'tioc_max_呼叫数,'3,4',数据点:'3,4},颜色:'我不确定你的数据在你得到它时是什么样子的,但是我试着从你提供的信息中复制它,这里是输出:数据:可能会有用。如果没有,你能在这个演示上重现你的案例吗?