Question

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

以下是制作情节的代码：

$（function（）{ $（ '＃容器'）。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呈现按钮和矩形。元素堆叠顺序基于order they were drawn。通过绘制rect onload，您将在按钮后绘制它。我认为解决这个问题的唯一方法是在绘制图表以使按钮回到顶部之后：

chart.exportSVGElements[0].toFront()

或者回到没有zIndex的初始链接中的情况：）

更新了小提琴here。

Answer 2

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

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

嘿，这是有效的。我查了一下

Answer 3

使用highchart 6.0.4：

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

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

3 个答案: