2

我使用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);    
 });

这不起作用，为什么？

4

2 回答 2

2

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

于 2013-07-02T12:25:57.453 回答
1

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

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();
});
于 2013-07-02T11:39:42.590 回答