Highcharts 未更新 ajax 响应数据上的数据

Question

我已经创建了带有 ajax 调用按钮的 highchart 样条图，响应数据没有创建图表，但是当我将这些响应数据放入它时！！！！

它适用于 static 数据，但与 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，例如：

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作为cats ，使用resultObj.callDetails作为ser arguments。

 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"/>

更改您的$.ajax如下：

var sel = "container";
$.ajax({
       url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id,
       method: "GET",
       success: function (result) {
           var resultObj = JSON.parse(result);
           drawHighchar(sel, resultObj.inserted_at, resultObj.callDetails); 
       }
})

如果您到目前为止还有问题，那么您可以尝试使用Promise 。 您的 JS 代码将是下一个：

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

       var tenant_id = $('#tenantId').val();
       var trunk_id = $('#trunkId').val();
       var sel = "container";

       var prom1 = new Promise((resolve, reject)=>{ 

       var ar = [];

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

              var resultObj = JSON.parse(result);

              ar.push(resultObj.inserted_at);
              ar.push(resultObj.callDetails);

              resolve(ar);
            }
        })   // ajax end
    })       // promise end

   prom1.then((val)=>drawHighchar(sel,val[0],val[1]))

}); // click end

 var 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); $("#gobtn").click(function () { // var tenant_id = $('#tenantId').val(); // var trunk_id = $('#trunkId').val(); var prom1 = new Promise((resolve, reject)=>{ var ar = []; /* $.ajax({ url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id, method: "GET", success: function (result) { var resultObj = JSON.parse(result); ar.push(resultObj.inserted_at); ar.push(resultObj.callDetails); resolve(ar); } }) */ // ajax end ar.push(cats); ar.push(ser2); resolve(ar); }) // promise end prom1.then((val)=>drawHighchar(sel,val[0],val[1])) }); // click end 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="gobtn" value="button_click"/>

这两种方式都运作良好。 我猜你对$.ajax的GET方法有问题，尝试使用POST并通过POST检索数据。