使用单选按钮更改 highchart 数据

Question

我在我的网站上使用Highcharts 制作了一个图表，它运行成功。

现在我在图表上添加了一个单选按钮，并希望它在我选择单选按钮列表时更改数据。

这是我的工作图表：

   $(function() {

       $('#container1').highcharts({
           chart: {
               type: 'column'
           },

          title: {
           text: 'Information '
           },
            yAxis: {
               title: {
               text: 'data'
        } },


      series: [{

               name: '2011-2012',
               color: '#0000FF',
               data: [1, 0, 4]
     },  {   
              color: '#FF0000',
              name: '2013-2014',
              data: [5, 4, 8]
   }]
       });

   });

</script>

这是我添加的单选按钮：

    <asp:RadioButtonList RepeatDirection="Horizontal" CssClass="radioList" ID="RadioButtonList1"
                AutoPostBack="true" runat="server" RepeatLayout="Flow">
                <asp:ListItem Selected="True" Value="0">data</asp:ListItem>
                <asp:ListItem Value="2">data2</asp:ListItem>
                <asp:ListItem Value="1">data3</asp:ListItem>
            </asp:RadioButtonList>

如何选择单选按钮 data3，然后显示一组新数据？
我最接近的是：

$("#change").click(function(){
if ($("#list").val() == "A")
{
options.series = [{name: 'A', data: [1,2,1]}]
 }
 else
 {
options.series = [{name: 'B', data: [3,2,3]}]
 } 
 var chart = new Highcharts.Chart(options);    
 });

这不起作用，为什么？

Answer 1

如果您只想为图表提供新系列，请使用以下之一：

• series.setData 使用新数据更新系列的函数
• 使用series.remove 删除所有系列系列，然后使用chart.addSeries 添加新系列

Answer 2

您需要重新计算图表。在他们的 API 中查看 refresh 方法。 您无需创建新实例。 编辑： Here you go!

EDIT2： 假设你有一个<select>，ID 为list：

$('#list').on('change', function(e){
  if ($(this).val() == 0) {
    chart.series = [{name: 'A', data: [1,2,1]}]
  } else if ($(this).val() == 1) {
    // And so on..
  }
  // Update the chart now that we have modified the series
  chart.redraw();
});