Highcharts无法使用ajax数据绘制

问题描述 投票:0回答:1

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响应提供的。是否需要重绘或其他内容,我试过但没用。我也尝试过窗口加载事件,并且...

javascript highcharts yii2
1个回答
0
投票

[您不需要在每次收到ajax响应时都重新初始化,只需尝试用新数据调用chart.redraw()。

© www.soinside.com 2019 - 2024. All rights reserved.