2013-04-26 4 views
1

Я ищу способ динамического обновления данных в круговой диаграмме высоких диаграмм на основе события изменения в выпадающем списке. Я видел пару примеров, но я действительно не могу понять, почему я не могу заставить это работать. Вот мой весь код, я переношу свои вещи внутри функции, поэтому я могу вызвать функцию с событием Change() в раскрывающемся списке, но я получаю ошибку CRIPT438: Object не поддерживает свойство или метод 'setData'SetData() не работает в Change Event HighCharts Pie Chart

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]]);    } 
}); 

}

это потому, что я вложен внутри другой функции? это jsut, что все скрипты используют функцию document.ready, и она правильно загружает функцию в document.ready(), но получение ее на событии изменения возится со мной. Любая помощь очень ценится. Tahnk you very much, NickG

ответ

2

Вы ошибаетесь, используя объект options как часть API Highcharts. Найдите эту строку: options.series[0].setData и измените на chart.series[0].setData(). Затем удалите создание нового графика (вам это не понадобится - диаграмма уже создана).

+0

Благодарим вас за понимание, когда я меняю эту строку на chart.series [0] .setData() Я получаю сообщение об ошибке «Невозможно получить свойство« 0 »неопределенной или нулевой ссылки –

+0

Убедитесь, что ваша переменная' chart 'существует. –

+0

Вы могли бы изменить мой код, чтобы дать мне представление о том, что вы имеете в виду? моя переменная диаграмма объявляется при рендеринге диаграммы с исходными параметрами в строке var chart = new Highcharts.Chart (options); перед кодом события изменения. Повторно объявить var chart внутри события изменения и просто сделать var chart = {установить новые данные ......}? жаль, что я новичок в этом, и я действительно ценю вашу помощь. –

Смежные вопросы