javascript - 使用 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，因此它们应该水平居中。不幸的是，它们正在偏离中心。

您可以在这里找到演示该问题的 fiddle :http://jsfiddle.net/MpvSA/ .

“一月”标签应该水平居中，但它在 65% 时的显示效果比在 50% 时的显示效果要好。这个问题在我尝试过的所有浏览器中都能可靠地重现。

知道为什么标签偏离中心以及如何纠正这个问题吗？

Answer 1

这是因为你有两个绘图带，白色(右)首先重叠，因为太宽了。 (比例为 7，但绘图范围为 8,5)

因此，您可以将 zIndex 设置为第一个(蓝色)，问题就会消失。 http://api.highcharts.com/highcharts#xAxis.plotBands.zIndex