SetData() ne fonctionne pas dans le graphique à secteurs

Question

Je suis à la recherche d'un moyen de mettre à jour dynamiquement des données dans un diagramme à secteurs en fonction de l'événement de changement dans une liste déroulante. J'ai vu quelques exemples, mais je suis vraiment incapable de comprendre pourquoi je ne peux pas obtenir ce travail. Voici mon code entier, j'emballe mes trucs dans une fonction pour que je puisse appeler la fonction avec l'événement Change() de la liste déroulante, mais j'obtiens l'erreur de CRIPT438: Objet ne supporte pas la propriété ou la méthode 'setData'

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

}

est-ce parce que je suis imbriqué dans une autre fonction? c'est jsut que tous les fiddles utilisent la fonction document.ready et se chargent correctement en appelant la fonction dans le document.ready() mais l'obtenir sur l'événement change me dérange. Toute aide est grandement appréciée. Tahnk vous beaucoup, NickG

Answer 1

Vous avez tort d'utiliser l'objet options dans le cadre de Highcharts API. Recherchez cette ligne: options.series[0].setData et passez à chart.series[0].setData(). Ensuite, supprimez la création d'un nouveau graphique (vous n'avez pas besoin de cela - le graphique est déjà créé).