1

ラジオボタンを使用して、ハイチャートにシリーズを追加しようとしています。

これは機能しますが、ラジオボタンをもう一度選択すると、データを一度だけ表示したいので、別のシリーズが表示されます..

私のコード:

 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 に答える