如何动态加载高级图表

Question

我正在努力实现这一目标：

基本上我单击一个按钮，将显示一个加载微调器，一旦高图准备就会显示。那么我该如何实现这种动态高图功能呢？

Answer 1

使用ajax从数据库加载数据并调用图表函数。

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

我做了一个小提琴示例来展示这一点，但由于我无法动态加载数据，因此我创建了一个局部变量json，并且只需点击一个按钮即可创建图表。

Fiddle Example Here