Javascript 如何动态加载highcharts

我正努力做到这一点：

---

基本上，我点击一个按钮，一个加载微调器就会显示出来，一旦highchart准备好，它就会显示出来。那么，我如何才能实现这种动态highcharts功能呢

使用ajax从数据库加载数据并调用charts函数

    $("#btn").click(function(){ //function called on button click.

      $.ajax({ 
            url: "dataURL", 
            success: function(result){
                //result should be a array of json and the format of data should be similar to what Highcharts uses.

                drawChart(result); //calling highcharts function to draw chart.

            }
          });
    });



    function drawChart(data)
    {
       $('#container').highcharts({ //html body should have div with id container.
            title: {
                 text: 'Monthly Average Temperature',
                 x: -20 //center
            },
            subtitle: {
                 text: 'Source: WorldClimate.com',
                 x: -20
            },
            xAxis: {
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                 title: {
                     text: 'Temperature (°C)'
                 },
                 plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                 }]
            },
            tooltip: {
                  valueSuffix: '°C'
            },
            legend: {
                 layout: 'vertical',
                 align: 'right',
                 verticalAlign: 'middle',
                 borderWidth: 0
            },
            series: data //this is where you pass the data to create the chart.
       });
      }
    }

我制作了一个fiddle示例来说明这一点，但由于我无法动态加载数据，因此我创建了一个局部变量json，它只需单击一个按钮即可创建图表

添加图表数据时，可以使用chart.showLoading（）显示微调器。您可以使用ajax将系列添加到图表中。在这里，您可以看到一个示例，它是如何工作的：