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]},]

                  });
                }
            });
        }
    });

---

对于我来说，最好使用一些单独的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

as

cats

和

resultObj.callDetails

as

ser

参数

let ser1=[{data:[30,30,50100]}，{data:[50,50,80100]}，{data:[200200500600]}，]，
ser2=[{data:[11,22,33,44]}，{data:[33,44,22,11]}，{data:[111333500600]}，],，
cats=[157411460000157418104000157421704000，]，
sel=‘容器’；
drawHighchar（sel、CAT、ser1）；
$（'#cli'）。单击（（）=>{
drawHighchar（sel、CAT、ser2）；
});
函数drawHighchar（选择器、cates、sers）{
海图。海图（选择器{
图表：{
键入：“行”，
zoomType:'xy'，
平移：是的，
一键：“移位”
},
标题：{
文本：“调用路径利用率”
},
副标题:{
文本：“单击并拖动可放大。按住shift键可平移。”
},
xAxis：[{
键入：“日期时间”，
类别:美食,，
标签：{
格式化程序：函数（）{
返回Highcharts.dateFormat（“%d/%m/%Y-%H:%m”，此.value）；
}
},
}],
系列：sers
}); 
}

谢谢您的时间，但它仍然无法工作，我相信它在重新绘制时有问题。您能告诉我如何重新绘制吗。我根据你的修改了我的代码，但当变量值来自ajax调用时，同样的代码有问题，同样的响应数据工作得很好，但在ajax中它失败了。@MilanSuthar，补充了第二种方法。我建议您更改

$.ajax

的方法。您好@Milan Suthar，控制台中有错误吗？当我删除

JSON.parse

时，所有的工作都正常。例子：