Javascript 呈现表jQuery的加载顺序

我使用jQuery从JSON文件中提取数据

然后我尝试用这些数据创建一个表。它工作得很好，但是我的第二段代码是呈现一个HighCharts图，它使用后一个表来创建一个图

下面是我用来渲染表的内容（它不漂亮）：

$.getJSON（'data.json'，函数（数据）{
var项目=[]；
$（'.contn'）。追加（“”）；
$（'.contn'）.append（“Take accounte”）；
$.each（data.wlc_lieu_时间、函数（键、值）{
$（'.contn'）.append（“+val.Month+”+val.Take+“+val.accounte+”）；
})
$（'.contn'）。追加（“”）；
});

然后我渲染图形：

 $('#container').highcharts({
        data: {
                    table: document.getElementById('datatable')
                },
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Data extracted from a HTML table in the page'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: 'Units'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toLowerCase();
                    }
                }
                });

$（“#容器”）。高图({
数据：{
表：document.getElementById（'datatable'）
},
图表：{
类型：“行”
},
标题：{
text:“从页面中的HTML表提取的数据”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“单位”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.y+''+this.point.name.toLowerCase（）；
}
}
});

首先，图表没有显示在表上，我认为这是一个加载顺序。 如何确保在图表查找表之前创建表

---

下面是HighCharts的官方文档，其中包含从表中提取数据以生成图形的功能，可以找到

可能是因为您使用ajax获取数据，所以在data.json完全加载之前调用HighCharts方法。您应该等到getJson完成后再尝试渲染图表。

您是否尝试在getJson函数的成功回调中调用图表代码？我现在正在家中的计算机上重建页面（我在工作中完成了此操作），完成后我会给您回复。实际上，只需在getJson回调中创建图表，在桌子被渲染之后。

 $('#container').highcharts({
        data: {
                    table: document.getElementById('datatable')
                },
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Data extracted from a HTML table in the page'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: 'Units'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toLowerCase();
                    }
                }
                });