更新jqplot餅圖通過JS不工作

Question

我想從昨天起通過JS更新jqplot PieChart，我沒有任何突破。我在網上搜索，似乎無法獲得任何解決方案

圖表數據保存在會話中，並且此會話不斷由應用程序更新。

這就是JSON看起來像

[ ['Take home pay', 44228.33], ['Tax', 8771.67], ['Super', 4162.5 ], ['Regular expenses', 0 ], ['Unallocated', 44228.33], ['Testing', 8000] ] 

圖表加載罰款當用戶導航到該頁面第一次。

這是DIV在圖表負載

<div id="savings_expense" class="jqplot-target"></div> 

這是jqplot JS加載頁面時，工作正常

$(document).ready(function() { 

    var storedData = <?php echo $_SESSION['chart_data'] ?>; 

    var plot1; 
    jQuery.jqplot.config.enablePlugins = false; 
    plot1 = jQuery.jqplot('savings_expense', [storedData], 
     { 
      seriesDefaults: { 
       renderer: jQuery.jqplot.PieRenderer 

      }, 
      legend: { 
       show: true, 
       rendererOptions: { 
        numberRows: 6 
       }, 
       placement: 'outside', 
       location: 's', 
       marginTop: '15px' 
      } 
     } 
    ); 
}); 

這是用戶點擊更新圖表按鈕。

<li onclick="updateGraph()"><a href="#pay">YOUR TAKE-HOME PAY</a></li> 

我已經嘗試了兩種方法來更新餅圖

解決方案1 ​​ 在此方案中，我得到了錯誤Uncaught TypeError: Cannot read property 'replot' of undefined。

var storedData = <?php echo $_SESSION['chart_data'] ?>; 
    var plot1; 
    function renderGraph() { 
     plot1.replot({ 
      seriesDefaults: { 
       renderer: jQuery.jqplot.PieRenderer 
      }, 
      legend: { 
       show: true, 
       rendererOptions: { 
        numberRows: 6 
       }, 
       placement: 'outside', 
       location: 's', 
       marginTop: '15px' 
      } 
     }); 
    } 

    function updateGraph() { 
     alert('updateGraph'); 
     var newVal = <?php echo $_SESSION['chart_data'] ?>; 
     storedData.push(newVal); 
     renderGraph(); 
    } 

方案2 此方案中，餅圖一片空白，但傳說留

var storedData = <?php echo $_SESSION['SMP']['chart_data'] ?>; 
var plot1; 
function renderGraph() { 
    if (plot1) { 
     plot1.destroy(); 
    } 

    jQuery.jqplot.config.enablePlugins = false; 
    plot1 = jQuery.jqplot('savings_expense',[storedData], 
     { 
      seriesDefaults: { 
       renderer: jQuery.jqplot.PieRenderer 

      }, 
      legend: { 
       show: true, 
       rendererOptions: { 
        numberRows: 6 
       }, 
       placement: 'outside', 
       location: 's', 
       marginTop: '15px' 
      } 
     } 
    ); 
} 

我真的會在這裏得到任何幫助。請不要共享任何鏈接，因爲我已經通過大約每解決了我能找到的StackOverflow和淨

Answer 1

你必須保持對document.ready代碼，因爲它是，然後添加功能updateGraph外document.ready（保持在全球範圍內的所有變量）。同時修改updateGraph，這裏你需要調用.replot()對plot1變量，因爲你只是在改變數據而不是其他設置。

放id來li這樣的：<li id="updateGraph"><a href="#pay">YOUR TAKE-HOME PAY</a></li>

請參見下面的代碼：

// declare variable outside document.ready 
var plot1; 
var storedData; 

$(document).ready(function() { 

    storedData = <?php echo $_SESSION['chart_data'] ?>; 


    jQuery.jqplot.config.enablePlugins = false; 
    plot1 = jQuery.jqplot('savings_expense', [storedData], 
     { 
      seriesDefaults: { 
       renderer: jQuery.jqplot.PieRenderer 

      }, 
      legend: { 
       show: true, 
       rendererOptions: { 
        numberRows: 6 
       }, 
       placement: 'outside', 
       location: 's', 
       marginTop: '15px' 
      } 
     } 
    ); 

    $('#updateGraph').click(function(){updateGraph();}); 
}); 

function updateGraph() { 
    var newVal = <?php echo $_SESSION['chart_data'] ?>; 
    plot1.destroy(); 
    plot1.series[0].data = newVal; 
    plot1.replot(true); 
}