2013-04-26 53 views
1

我正在尋找一種方法,根據下拉列表中的更改事件動態更新高圖餅圖中的數據。我見過幾個例子,但我真的無法弄清楚爲什麼我無法得到這個工作。這裏是我的整個代碼,我把我的東西包裝在一個函數中,所以我可以用下拉列表的Change()事件調用函數,但是我得到CRIPT438的錯誤:對象不支持屬性或方法'setData'SetData()不適用更改事件HighCharts餅圖

function showClass(){ 
    var total = 0; 
var options = { 
     chart:{type:'pie', 
     renderTo: 'ctl00_ContentPlaceHolder1_Overview1_tcAssetAllocation_body', 
       events: { 
       load: function(event) { 
       $('.highcharts-legend-item').last().append('<br/><div style="width:220px"><hr/> <span style="float:left"> Total </span><span style="float:right">100%</span> </div>')      
       } 
       } 
     }, 
     credits:{enabled: false}, 
     colors:[ 
      '#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319',  '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375' 
      ], 
     title:{text: null}, 
     tooltip:{ 
      enabled: true, 
      animation: true 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       animation: true, 
       cursor: 'pointer', 
       showInLegend: true, 
       dataLabels: { 
        enabled: false,       
        formatter: function() { 
         return this.percentage.toFixed(2) + '%'; 
        } 
       }         
      } 
     }, 
     legend: { 
      enabled: true, 
      layout: 'vertical', 
      align: 'right', 
      width: 220, 
      verticalAlign: 'top', 
      borderWidth: 0, 
      useHTML: true, 
      labelFormatter: function() { 
      total += this.y; 
       return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y + '%</span></div>'; 
      }, 
      title: { 
       text: 'Primary', 
       style: { 
        fontWeight: 'bold' 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      data: [['Domestic Equity', 38.5],['International Equity', 26.85],['Other', 15.70],['Cash and Equivalents', 10.48],['Fixed Income', 8.48]] 
     }] 
} 
var chart = new Highcharts.Chart(options); 
$("#ctl00_ContentPlaceHolder1_Overview1_AccountList1_ddlAccounts").change(function(){ 
    var selVal = $("#ctl00_ContentPlaceHolder1_Overview1_AccountList1_ddlAccounts").val(); 
    if(selVal == '1124042'){ 
     chart.series[0].setData([['Domestic Equity', 18.5], ['International Equity', 46.85], ['Other', 5.70], ['Cash and Equivalents', 20.48], ['Fixed Income', 8.48]]);    } 
}); 

}

是不是因爲我嵌套在另一個函數內部是誰?這是所有的小提琴使用document.ready函數,並加載正確調用document.ready()中的函數,但在更改事件中獲取它與我混淆。 任何幫助,不勝感激。 Tahnk you very, NickG

回答

2

將對象options作爲Highcharts API的一部分使用是錯誤的。找到該行:options.series[0].setData並更改爲chart.series[0].setData()。然後刪除創建新的圖表(你不需要 - 圖表已經創建)。

+0

感謝您的洞察力,當我將該行更改爲chart.series [0] .setData()我收到錯誤無法獲取屬性'0'的未定義或空引用 – 2013-04-29 12:47:18

+0

請確保您的變量「圖表'存在。 – 2013-04-29 12:50:04

+0

你能編輯我的代碼給我一個想法你是什麼意思?當我使用var chart = new Highcharts.Chart(options)行上的原始選項渲染圖表時,聲明瞭我的變量圖表。在更改事件代碼之前。我是否重新聲明變更事件內的變化圖表,然後執行var chart = {set new data ......}?對不起,我是新來的,我非常感謝你的幫助 – 2013-04-29 12:52:37