Highcharts不更新有关ajax响应数据的数据

Question

我已经创建了highchart样条图，并在按钮上进行了ajax调用，响应数据没有创建图，但是当我将那些响应数据放进去时，它就起作用了！

它可以处理静态数据，但不能与ajax响应完全相同，我也尝试过重绘它，但是没有用，响应数据在代码中显示为注释

//    categories: [1574411460000,1574418104000,1574421704000,]
 // series: [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},]



   $(document).ready(function () {
        var chart = $('#container').highcharts();

        $("#gobtn").click(function () {

            var tenant_id = $('#tenantId').val();
            var trunk_id = $('#trunkId').val();
            completedCallGraph(tenant_id, trunk_id);
        });

        function completedCallGraph(tenant_id = '', trunk_id = '') {
            $.ajax({
                url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id,
                success: function (result) {

                    var resultObj = JSON.parse(result);

                    console.log(resultObj.inserted_at);
                    console.log(resultObj.callDetails);

                    var inserted_at = resultObj.inserted_at;
                    var callDetails = resultObj.callDetails;


                  $('#container').highcharts({
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: inserted_at
                          //    categories: [1574411460000,1574418104000,1574421704000,]

                            ,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: callDetails
                       // series: [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},]

                  });
                }
            });
        }
    });

Answer 1

对我来说，最好使用一些单独的Highchart绘图功能，例如：

function drawHighchar(selector, cates, sers){

Highcharts.chart(selector, {
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: cates,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: sers
                        });
} 

这里selector取一个DOM元素的id，将图表放在该元素之后，cates类别数组和sers对象数组与数据。

我已经使用了您的数据集和其他数据集：

let ser1 = [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},],
    ser2 = [{data: [11,22,33,44]},{data: [33,44,22,11]},{data: [111,333,500,600]},],
    cats1 = [1574411460000,1574418104000,1574421704000,],
    sel = 'container'; 

在第一次加载期间它将显示为ser1，在单击某些按钮后将显示第二个数据ser2：

drawHighchar(sel, cats, ser1);

$('#cli').click(()=>{ 
 drawHighchar(sel, cats, ser2);  
});

在这里您应该将resultObj.inserted_at用作cates，将resultObj.callDetails用作ser自变量。

let ser1 = [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},],
    ser2 = [{data: [11,22,33,44]},{data: [33,44,22,11]},{data: [111,333,500,600]},],
    cats = [1574411460000,1574418104000,1574421704000,],
    sel = 'container';
 
drawHighchar(sel, cats, ser1);

$('#cli').click(()=>{ 
 drawHighchar(sel, cats, ser2);  
});

function drawHighchar(selector, cates, sers){

Highcharts.chart(selector, {
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: cates,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: sers
                        }); 

}    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

<input type="button" id="cli" value="button_click"/>