HIGHCHARTS PIE - 應用AJAX，刷新圖表

Question

我在JS/AJAX/JSON中新建了一個，我想將ajax應用到我的代碼中，以便我的圖表可以重新依賴數據庫中的數據獲取。這行代碼沒有錯誤，但不是自己刷新。請幫助我使這張圖表充滿活力。幫助/意見/建議表示讚賞。

這裏是我的代碼： data.php

$<?php 
$con = mysql_connect("localhost","root",""); 

if (!$con) { 
die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db("survey_processor", $con); 

$result = mysql_query("select msv_variants.var_text, B.Count from msv_variants, (SELECT   ans_var_id ,count(*) AS Count FROM (select ans_var_id from msv_answers where ans_que_id = '11') as A group by ans_var_id) AS B where msv_variants.var_opt_id = B.ans_var_id AND msv_variants.var_que_id = '11' "); 

$rows = array(); 
while($r = mysql_fetch_array($result)) { 
$row[0] = $r[0]; 
$row[1] = $r[1]; 
array_push($rows,$row); 
} 

print json_encode($rows, JSON_NUMERIC_CHECK); 

mysql_close($con); 
?> 

pie.js

$(document).ready(function() { 
     var options = { 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Web Sales & Marketing Efforts' 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
       } 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [] 
      }] 
     } 

     $.getJSON("data.php", function(json) { 
      options.series[0].data = json; 
      chart = new Highcharts.Chart(options); 
     }); 



    }); 

請幫我在我的項目。三江源

Answer 1

你需要一個圖表中的數據更新，例如：

$(document).ready(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      // add code below: 
      events: { 
       load: function() { 
        var series = this.series[0]; 
        setTimeout(function() { 
         $.getJSON("data.php", function(json) { 
          series.setData(json); 
         }); 
        } 
       } 
      } 
     }, 
     //rest of options and code 
    }; 
});