在百分比堆叠列高图中禁用 legendItemClick 上的百分比堆叠答案

【问题标题】：Disable percent stacking on legendItemClick in percent stacked column highchart在百分比堆叠列高图中禁用 legendItemClick 上的百分比堆叠
【发布时间】：2013-03-05 07:12:05
【问题描述】：

我有一个来自 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'
    }
}

【问题讨论】：

标签： javascript jquery highcharts highstock

【解决方案1】：

一种方法是将您的系列数据重新计算为百分比，然后使用 stacking:stacking.有点痛苦，但计算每对的百分比应该不会太难。

 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/

【讨论】：

是的，感谢您的回复，但这会限制我在其他地方使用原始数字，例如在工具提示中
点了。如果只是您担心的工具提示，您可以通过在数据点中指定额外信息并自定义工具提示来解决这个问题。否则，我无法在百分比堆叠图表中看到您想要的方法。

【解决方案2】：

您可以通过翻译函数和保留组/系列位置的附加参数来实现它。 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]
    }]

【讨论】：