JavaScript、ハイチャート - グラフのデータをドロップダウンで変更しますか？

Question

私は、データを変更したいコンテナ内の円グラフは、ドロップダウンアクションに基づいて表示してい：

<select class="selectHeaderMobile large-1 behaviourForm" id = "list"> 
       <option value="">Select Metric</option> 
       <option value="A">Difficulty</option> 
       <option value="B">Interest</option> 
    </select> 
<button class="button smallMobile show-for-all" type="button" id="change">Apply</button> 

Javascriptを：

<script> 
$(function() { 
    var options { // Build the chart 
     chart: { 
      type: 'pie', 
      renderTo: 'feedback1', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: 'Difficulty' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     credits: { 
     enabled: false 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false, 
        showInLegend: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        }, 
        connectorColor: 'silver' 
       } 
      } 
     }, 
     series: [{ 
      name: 'Difficulty', 
      data: <%= @get_difficulty_pie.to_json %> 
     }] 
    }; 
      var chart = new Highcharts.chart(options); 
$("#list").on('change', function(){ 
    //alert('f') 
    var selVal = $("#list").val(); 
    if(selVal == "A" || selVal == '') 
    { 
     options.series = [{name: 'Difficulty', data: <%= @get_difficulty_pie.to_json %> }] 
    } 
    else if(selVal == "B") 
    { 
     options.series = [{name: 'Interest', data: <%= @get_interest_pie.to_json %>}] 
    } 
    chart = Highchart.chart(options); 
}); 
)}; 

</script> 

データが返されているが、何も表示されません文法エラーをどこかに示していますが、わかりませんし、ドロップダウンをテストできません。

ページのソース：

  series: [{ 
      name: 'Difficulty', 
      data: [4,2,1,6,3,3,1,6,4,5,2,6] 
     }, 
      var chart = new Highcharts.Chart(options); 

$("#list").on('change', function(){ 
    //alert('f') 
    var selVal = $("#list").val(); 
    if(selVal == "A" || selVal == '') 
    { 
     options.series = [{name: 'Difficulty', data: [4,2,1,6,3,3,1,6,4,5,2,6] }] 
    } 
    else if(selVal == "B") 
    { 
     options.series = [{name: 'Interest', data: [4,3,null,3,null,3,4,6,6,3,5,5]}] 
    } 

    var chart = new Highcharts.Chart(options);  
}); 

任意の提案ですか？ありがとう。

Answer 1

私はあなたのコード内でいくつかの問題を参照してください。

• あなたが正しくあなたの最初の変数「オプション」を閉じないでください、あなたはHighchartある変数チャート（に渡す
• が欠落ブラケットがありますオブジェクト）でも、Highchartオブジェクトである変数オプションは動作しません。

あなたはそれを行うことができます。

var options = { /* highchart options */ } 

var chart = new Highchart.chart(options) 

$list.on('change',function() { 

    // blabla change variable options 

    chart = Highchart.chart(options) // it reload the chart with new options 

}); 

Answer 2

おかげで、すべて、固定されており、今で動作します：上記と同じ

ボタンのHTMLを。構文エラーだけでした。

<script> 
var options = { 
    chart: { 
     renderTo: 'feedback1', 
     defaultSeriesType: 'pie' 
     }, 
     title: { 
      text: 'Difficulty/Interest' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
    plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false, 
        }, 
        showInLegend: true 
       } 
      }, 
    series: [{name: 'Difficulty', data: <%= @get_difficulty_pie.to_json %>}] 
}; 
var chart = new Highcharts.Chart(options); 

$("#list").on('change', function(){ 
    //alert('f') 
    var selVal = $("#list").val(); 
    if(selVal == "A" || selVal == '') 
    { 
     options.series = [{name: 'Difficulty', data: <%= @get_difficulty_pie.to_json %>}] 
    } 
    else if(selVal == "B") 
    { 
     options.series = [{name: 'Interest', data: <%= @get_interest_pie.to_json %>}] 
    } 
    var chart = new Highcharts.Chart(options);  
}); 

</script>