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对象，它不起作用。

你可以这样做：

   private void closeInvs() {
    for (Player p : Bukkit.getOnlinePlayers()) {
        p.closeInventory();
    }
}

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>

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

2 个答案: