Javascript HighCharts新しいデータを追加するのではなく、データを変更する

Question

HighChartsを使用していますが、現在新しいデータを追加するaddSeriesを使用していますが、選択ボックスを変更するときに既存のデータを置き換えて新しいデータを追加する必要があります。ここ

コードである：

JS：

VARチャート。

$(function() { 

    dat1 = [ 

     { 
      "chall": [ 
       { 
        "id": "8062", 
        "name": "name 1", 
        "desc": "desc 1", 
        "vfield": 250, 
        "cfield": 100 
       }, 
       { 
        "id": "8061", 
        "name": "name 2", 
        "desc": "desc 2", 
        "vfield": 120, 
        "cfield": 110 

       }, 
       { 
        "id": "8060", 
        "name": "name 3", 
        "desc": "desc 3", 
        "vfield": 76, 
        "cfield": 90 

       } 
      ] 
     } 

    ]; 


    dat2 = [ 

     { 
      "chall": [ 
       { 
        "id": "8062", 
        "name": "name 4", 
        "desc": "desc 4", 
        "vfield": 250, 
        "cfield": 100 
       }, 
       { 
        "id": "8061", 
        "name": "name 5", 
        "desc": "desc 5", 
        "vfield": 120, 
        "cfield": 110 

       }, 
       { 
        "id": "8060", 
        "name": "name 6", 
        "desc": "desc 6", 
        "vfield": 76, 
        "cfield": 90 

       } 
      ] 
     } 

    ]; 

    var mainData = dat1; 
    var cList=[]; 
    var vList=[]; 
    var comList=[]; 

    for (var i = 0; i < mainData[0].chall.length; i++) { 

     var obj = mainData[0].chall[i]; 

     var chlst = obj.name + " [" + obj.id + "]"; 
     var vl = obj.vfield; 
     var cl = obj.cfield; 

     cList.push(chlst); 
     vList.push(vl); 
     comList.push(cl); 

    } 


    $('#container').highcharts({ 

     chart: { 
      type: 'column' 
     }, 

     title: { 
      text: 'Title Here' 
     }, 

     xAxis: { 
      categories: cList 
     }, 

     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Left Title' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      }, 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.x + '</b><br/>' + 
         this.series.name + ': ' + this.y + '<br/>' + 
         'Total: ' + this.point.stackTotal; 
      } 
     }, 

     plotOptions: { 
      series: { 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          alert(''); 
         }, 
        }, 

       }, 
      }, 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       } 
      } 
     }, 

     series: [{ 
      name: 'V List', 
      data: vList 

     }, { 
      name: 'C List', 
      data: comList 
     }] 
    }); 

    $('#myselectoptions').change(function() { 

     var chart = $('#container').highcharts(); 

     chart.addSeries({ 
      data: dat2 
     }); 

    }); 


}); 

HTML

<div class="form-group"> 
    <br><label for="sel">Select:</label> 
    <select class="form-control" id="myselectoptions"> 
     <option value="1">Dat1</option> 
     <option value="2">Dat2</option> 

    </select> 
</div> 

<div id="container" style="height: 400px"></div> 

選択を変更するとき、どのように私は他の1つのデータから切り替えることができますか？

Answer 1

chart.series[0].setData(dat2); 

http://api.highcharts.com/highcharts/Series.setData