使用highcharts.js绘制时，标签会偏离中心，而不是居中

Question

我正在使用highcharts（highcharts.js）创建一个使用'bands'特性的图。频段配置如下：

"plotBands": [{
                "color": "#E5F6F6",
                "from": -0.5,
                "to": 4.5,
                "label": {
                    "text": 'January',
                    "align": "center",
                    "verticalAlign": "top"
                }
            }, {
                "color": "#FFFFFF",
                "from": 3.5,
                "to": 8.5,
                "label": {
                    "text": "February",
                    "align": "center",
                    "verticalAlign": "top"
                }
            }]

此配置在标签上使用align：center,因此它们应该水平居中。不幸的是，它们正在偏离中心。

您可以在这里找到一个演示这个问题的工具：http://jsfidle.net/mpvsa/。

“一月”标签应该是水平居中的，但它在65%处显示得比在50%处显示得更多。这个问题在我尝试过的所有浏览器中都可靠地重现了。

有什么想法为什么标签偏离中心和如何纠正这一点吗？

Answer 1

这是因为你有两个图带，白色（右）先重叠，因为太宽。（缩放至7，但标带至8.5)

因此您可以将zIndex设置为first（蓝色）,然后problem消失。http://api.highcharts.com/highcharts#xaxis.plotbands.zindex