highcharts - Highcharts 3.0 - 渲染器覆盖导出按钮

Question

我刚刚将一个应用程序升级到 Highcharts 3.0，看起来新的导出按钮现在被使用图表渲染器绘制的对象所覆盖。在 2.3.3 中情况并非如此。

请参阅http://jsfiddle.net/YcJ6U/1/

这是生成情节的代码：

$(function () { $('#container').highcharts({

    chart: {
        events: {
            load: function(event) {
                drawBox(this);
            }
        }
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        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]        
    }],

    exporting: {
        buttons: {
            contextButton: {
                symbol: 'circle',
                symbolStrokeWidth: 1,
                symbolFill: '#bada55',
                symbolStroke: '#330033',
                align: 'left'
            }
        }
    }

}, function(chart) {
    //drawBox(chart)
});

function drawBox(chart) {
    chart.renderer.rect(25, 0, 100, 100, 5)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow'               
        }).add();        
}

}); 任何人都可以提供解决方案吗？

Answer 1

不确定何时更改，但 Highcharts 正在使用 SVG 渲染按钮和矩形。元素的堆叠顺序是基于它们被绘制的顺序。通过绘制rectonload，您在按钮之后绘制它。我相信解决此问题的唯一方法是在绘制图表后将按钮带回顶部：

chart.exportSVGElements[0].toFront()

或者回到没有 zIndex 的初始链接中的状态:)

在这里更新了小提琴。

Answer 2

这可能是一个 z-index 问题。在 highcharts 中，z-index 由 zIndex 表示。你应该试试这个

exporting: {
    buttons: {
        contextButton: {
            theme: {
                 zIndex: 10
             }
        }
    }
}

嘿，这是作品。我检查过了

Answer 3

使用 highchart 6.0.4：

   exporting: {
                buttons: {
                    contextButton: {
                        theme: {
                            style: {
                                zIndex: 9999
                            }
                        }
                    }
                }
  }