2013-04-26 54 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