Highcharts - 使用 setSize 向下钻取会导致图表损坏答案

【问题标题】：Highcharts - Drilldown with setSize causes chart corruptionHighcharts - 使用 setSize 向下钻取会导致图表损坏
【发布时间】：2015-04-09 18:24:41
【问题描述】：

当我向下钻取数据时，我需要能够调整图表的大小，因为例如，我的顶层可能只有 3 个系列，而我的向下钻取可能是 10 个系列，反之亦然。但是，我对此有疑问。

使用这个小提琴我可以重现错误：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/

  type: 'bar',
  events: {
            drilldown: function(e) {
           this.setSize( this.chartWidth, ( e.seriesOptions.data.length * 50 ) + 150 );

            },
            drillup: function(e) {
           this.setSize( this.chartWidth, ( e.seriesOptions.data.length * 50 ) + 150 );
        }
     }                 
  },

注意：如果您深入到 Internet Explorer，底部会显示“专有或不可检测”，这是顶层“品牌”图表的剩余部分。

如果我删除 this.setSize 的东西，图表将正常工作。

这是我的图表，上面有上述变化。

http://jsfiddle.net/7oatr7xe/

问题图片：http://i.imgur.com/RrjvLRI.png

【问题讨论】：

我认为这是由于重绘图表两次造成的，所以在应用原始重绘之前，您调用第二个。我会将 redraw 设置为 false，请参阅：jsfiddle.net/7oatr7xe/2

标签： jquery highcharts

【解决方案1】：

不知道这是否是一个错误，但如果您使用超时调用 setSize 似乎可以解决它（即使 1ms 似乎也可以）

        drilldown: function(e) {
            setTimeout(function () {
                    this.setSize( this.chartWidth, ( e.seriesOptions.data.length * 50 ) + 150 );
            }, 1);
        }

http://jsfiddle.net/7oatr7xe/1/

【讨论】：

这似乎可行，但我讨厌必须添加这样的计时器。
我也讨厌那些计时器：/ 你可以在 highcharts 论坛中发布这个问题，如果这是一个错误，我肯定想知道它......

【解决方案2】：

问题在于，在 DrillDown 中您重绘图表，而在 setSize 中您尝试做同样的事情。解决方法是将flag redraw (in setSize) 设置为false。

            drilldown: function(e) {
                this.setSize( this.chartWidth, ( e.seriesOptions.data.length * 50 ) + 150,false );

            },
            drillup: function(e) {
                this.setSize( this.chartWidth, ( e.seriesOptions.data.length * 50 ) + 150,false );
            }

示例：http://jsfiddle.net/7oatr7xe/3/

【讨论】：

谢谢，这似乎对那个小提琴有用。然而，我的实际工作有一个额外的深入研究，并且不知何故问题仍然存在。我会看看我是否可以添加一个向下钻取级别来重现我所看到的。