Highcharts切换多轴图表的堆叠

时间:2016-07-15 08:59:46

标签: javascript highcharts

我正在尝试切换多轴图表的堆叠,但似乎我一次只能切换一个系列。

有谁知道如何解决这个问题?这是jsfiddle的链接: 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]
    },{
    		stack: 1,
        name:'Series 2 Name',
        data: [2,3,6,5,7]
    },{
    		stack: 1,
        name:'Series 3 Name',
        data: [1,4,6,8,9]
    }]
},function(chart){
    $('button').click(function(){
    		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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我认为您可以在更改系列堆栈时使用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();
  })

在这里,您可以看到使用Series.update()的图表如何工作的示例: http://fiddle.jshell.net/kz7wbykx/1/

此致