2016-07-15 5 views
0

多軸チャートのスタッキングをトグルしようとしていますが、一度に1つのシリーズのみを切り替えることができます。ハイチャート複数軸チャートのスタッキングをトグル

誰もこれを解決する方法を知っていますか? http://fiddle.jshell.net/kz7wbykx/

var chart = new Highcharts.Chart({ 
 
    chart: { 
 
     renderTo:'container', 
 
     defaultSeriesType:'column', 
 
     borderWidth:1, 
 
     borderColor:'#ccc', 
 
     marginLeft:110, 
 
     marginRight:50, 
 
     backgroundColor:'#eee', 
 
     plotBackgroundColor:'#fff', 
 
    }, 
 
    title:{ 
 
     text:'Chart Title' 
 
    }, 
 
    legend:{ 
 
             
 
    }, 
 
    tooltip:{ 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
      stacking:'normal', 
 
      fillColor:'rgba(255,255,255,0)', 
 
     }, 
 
    }, 
 
    xAxis:{ 
 
     lineColor:'#999', 
 
     lineWidth:1, 
 
     tickColor:'#666', 
 
     tickLength:3, 
 
     title:{ 
 
      text:'X Axis Title' 
 
     } 
 
    }, 
 
    yAxis:{ 
 
     lineColor:'#999', 
 
     lineWidth:1, 
 
     tickColor:'#666', 
 
     tickWidth:1, 
 
     tickLength:3, 
 
     gridLineColor:'#ddd', 
 
     title:{ 
 
      text:'Y Axis Title', 
 
      rotation:0, 
 
      margin:50, 
 
     } 
 
    }, 
 
    series: [{ 
 
     stack: 1, 
 
     name:'Series 1 Name', 
 
     data: [5,8,7,4,6] 
 
    },{ 
 
    \t \t stack: 1, 
 
     name:'Series 2 Name', 
 
     data: [2,3,6,5,7] 
 
    },{ 
 
    \t \t stack: 1, 
 
     name:'Series 3 Name', 
 
     data: [1,4,6,8,9] 
 
    }] 
 
},function(chart){ 
 
    $('button').click(function(){ 
 
    \t \t chart.series[0].options.stack = +!chart.series[0].options.stack; 
 
     chart.series[1].options.stack = +!chart.series[1].options.stack; 
 
     //chart.series[2].options.stack = +!chart.series[2].options.stack; 
 
     chart.series[0].hide(); 
 
     chart.series[1].hide(); 
 
     chart.series[2].hide(); 
 
     chart.series[0].show(); 
 
     chart.series[1].show(); 
 
     chart.series[2].show(); 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 400px"></div> 
 
<button>toggle stacking</button>

+0

私はと思いますここでは、この方法についての情報を見つけることができますあなたのケースでは、Series.updateメソッドを使用することをお勧めします。 http://fiddle.jshell.net/kz7wbykx/1/ –

+0

あなたは間違いなし!ありがとうございました! – Bryan

+0

私の解決策があなたのために働いたことを読んだことをうれしく思います。 :)私は答えとしてそれを掲示しました。 –

答えて

1

私はあなたがあなたのシリーズのスタックを変更する場合にはSeries.update()メソッドを使用することができると思います。ここではjsfiddleへのリンクです。あなたのチャートがSeries.update()を使用して作業できるかの例を見ることができます。ここhttp://api.highcharts.com/highcharts#Series.update

$('button').click(function() { 
    chart.series[0].update({ 
     stack: chart.series[0].options.stack == '1' ? '0' : '1' 
    }, false); 
    chart.series[1].update({ 
     stack: chart.series[1].options.stack == '1' ? '2' : '1' 
    }, false); 
    chart.redraw(); 
    }) 

http://fiddle.jshell.net/kz7wbykx/1/

よろしく、

+0

これは3つのカラムで動作するようですが、別のカラムを追加すると、2つのカラムがスタックしたままになります。 http://fiddle.jshell.net/baberuth22/9w2md7t3/ – Bryan

+0

私はそれを理解しました。スタックの値は、スタック番号と似ていますが、ブール値true/falseではありません。 http://fiddle.jshell.net/baberuth22/Lrq4e9j5/ – Bryan

関連する問題