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>

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

$("#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以获取刷新方法。您不需要创建新实例。 编辑： 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();
});

使用单选按钮更改高清数据

2 个答案: