JavaScript，Highcharts - 通过下拉菜单更改图表数据？

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>