1

我正在尝试使用单选按钮在 highchart 上添加一个额外的系列。

这可行，但是当我再次选择单选按钮时，它会给我另一个系列，因为我只希望数据显示一次..

我的代码：

 html
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <input class="test" name="g" type="radio" value="a"> A </input>
  <input class="test" name="g" type="radio" value="b"> B </input>
  <input class="test" name="g" type="radio" value="c"> C </input>
  <div id="container" style="height: 400px; width: 500px"></div>

javascript中的代码

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
                           type: 'column'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});

$(".test").change(function() {
               var value = this.getAttribute("value");


               if (value == 'a') 
               {
                   chart.series[0].setData([100, 200, 300, 400, 100, 200]);
      ***tryin to add data here******* chart.series[1].setData([1000, 100, 370, 200, 900, 230]);****
                   chart.yAxis[0].setTitle({ text: "kHw" });


               }

        name: 'Rainfall',
        type: 'column',
        color: '#08F',  
       data: [194.1, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]              
        });                                                 
              }

               else if (value == 'b') 
                {
                    chart.series[0].setData([100, 500, 300, 100, 100, 200]);
                    chart.yAxis[0].setTitle({ text: "Raw" });
               }

               else if (value == 'c') 
                {
                   chart.series[0].setData([100, 300, 400, 200, 200, 100]);
               }

                else {
                   alert("Error!");   
    }
});
});

当我点击一个（单选按钮）时，它会不断添加系列，而我只想添加一次。如您所见，*这里是我尝试添加另一系列数据的地方，但它也不允许我这样做。

这让我很困惑：

  else if (value == 'c') {
                   if (chart.series.length >= 3)

                       chart.series[1].remove();

                   chart.addSeries({
                   data: [100, 200, 300, 400, 100, 200] 
                   });
               }

这是做什么的

  if (chart.series.length >= 3)

  chart.series[1].remove();

我的代码不断变化，一旦我点击单选按钮

4

1 回答 1

3

参考javascript代码

    $(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
                           type: 'column'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});

$(".test").change(function() {
               var value = this.getAttribute("value");

               if (value == 'a') 
               {
                   chart.series[0].setData([100, 200, 300, 400, 100, 200]);
                   chart.yAxis[0].setTitle({ text: "kHw" });
        chart.series[0].remove();
        chart.addSeries({

        name: 'Rainfall',
        type: 'column',
        color: '#08F',  
       data: [194.1, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]              
        });                                                 
              }

               else if (value == 'b') 
                {
                    chart.series[0].setData([100, 500, 300, 100, 100, 200]);
                    chart.yAxis[0].setTitle({ text: "Raw" });
             chart.series[0].remove();
        chart.addSeries({

        name: 'Rainfall2',
        type: 'column',
        color: '#08F',  
       data: [194.1, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]              
        });   }

               else if (value == 'c') 
                {  chart.series[0].remove();
        chart.addSeries({

        name: 'Rainfall3',
        type: 'column',
        color: '#08F',  
       data: [194.1, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]              
        }); 
                   chart.series[0].setData([100, 300, 400, 200, 200, 100]);
               }

                else {
                   alert("Error!");   
    }
});
});

参考演示http://jsfiddle.net/Bhaarat/Qkzx6/2/

于 2013-07-02T14:21:44.700 回答