如何加載highcharts動態

Question

我試圖做到這一點：

基本上我點擊一個按鈕，加載微調將顯示，一旦highchart就緒時，它就會顯示出來。那麼，我該如何去實現這個動態的highcharts功能呢？

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