Question

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

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

我的代码：

 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();

一旦我点击单选按钮

，我的代码就会不断变化

Answer 1

参考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/

在highchart上添加额外的系列

1 个答案: