javascript - Highcharts 不更新 ajax 响应数据的数据

问题描述

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

它适用于静态数据，但与 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]},]

                  });
                }
            });
        }
    });

标签： javascriptphphighcharts

至于我最好使用一些分离的 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_atascats和resultObj.callDetailsasser参数。

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.

javascript - Highcharts 不更新 ajax 响应数据的数据

问题描述

解决方案

推荐阅读