禁用映射百分比堆栈列高图中的legendItemClick上的堆叠百分比

时间:2013-03-05 07:12:05

标签: javascript jquery highcharts highstock

我有来自highcharts的百分比堆积柱形图。在图例项目上单击,默认情况下该系列应该隐藏。但是,除了隐藏该系列之外,它还会通过将另一个系列重新绘制到100%来重绘图表,理想情况下它不应该影响其他系列y值并使用其原始y值重绘而不是100%。 这里是演示链接:http://jsfiddle.net/kanz3/

plotOptions: {
    series: {
        events: {
            legendItemClick: function(event) {
            var visibility = this.visible ? 'visible' : 'hidden';     
            //chart.series.stacking='normal'
            }
        },
        stacking: 'percent'
    }
}

2 个答案:

答案 0 :(得分:0)

一种方法是将系列数据重新计算为百分比,然后使用堆叠绘制它们:堆叠。有点痛苦,但计算每对的百分比应该不会太难。

 plotOptions: {
        series: {
            events: {
                legendItemClick: function(event) {
                    //console.log(this);
                    var visibility = this.visible ? 'visible' : 'hidden';
                    //this.stacking= 'normal'
                    //chart.series.yaxis.max = 70;
                 // console.log(chart);
                    //chart.redraw = false;          
                 //chart.series.stacking='normal'
                   // chart.type='line'
                }
            },
            stacking: 'stacked'
        }
    },

    series: [{
        data: [50,50,50,50]        
    },
            {
        data: [50,50,50,50]        
    }]

http://jsfiddle.net/2bWMC/

答案 1 :(得分:0)

您可以通过翻译功能和保持组/系列位置的附加参数来实现。 http://jsfiddle.net/kanz3/1/

 plotOptions: {
        series: {
            events: {
                legendItemClick: function (event) {

                    if(!this.options.hidden)
                    {
                        this.options.groupXY.x = this.group.translateX;
                        this.options.groupXY.y = this.group.translateX;
                        this.group.translate(1000,1000);
                        this.options.hidden = true;
                    }
                    else
                    {
                        this.group.translate(this.options.groupXY.x, this.options.groupXY.y);
                         this.options.hidden = false;
                    }

                    return false;

                }
            },
            stacking: 'percent'
        }
    },

    series: [{
        groupXY: {
            hidden:false,
            x: 0,
            y: 0
        },
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        groupXY: {
            hidden:false,
            x: 0,
            y: 0
        },
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]