Question

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

然后我尝试创建一个包含该数据的表。它工作得很好但是我的第二段代码是渲染一个HighCharts图，它使用后一个表创建一个图。

这是我用来渲染表格的东西（它不漂亮）：

  $.getJSON('data.json', function(data) {
       var items = [];

       $('.contn').append("<table id='datatable'>");                


       $('.contn').append("<thead><tr><th></th> <th>Take</th> <th>Accrue</th></tr></thead><tbody>");
       $.each(data.wlc_lieu_time, function(key, val) {

            $('.contn').append("<tr><th>" + val.Month + "</th><td>"+ val.Take + "</td><td>" + val.Accrue + "</td></tr>"); 
        })
         $('.contn').append("</tbody></table>");

    });

然后我渲染图表：

 $('#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();
                    }
                }
                });

首先，图表没有拿起我假设是加载订单的表格。如何在图表查找表之前确保创建表？

以下是HighCharts的官方文档，可以从表中提取数据以生成图表here

Answer 1

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

渲染表jQuery奇怪的加载顺序

1 个答案: