中心渲染标签在Highcharts

Question

我的图表如下所示：

如图所示（仅在1993年和2001年之后），在x轴上有绘图线。我需要让标签的线条在两条曲线之间以及相对于彼此的中心。我开始制作一个与绘图线相对应的隐藏系列，然后使用这些点放置标签：

function(chart){

        var labelOnePos = chart.series[2].data[0],
            text1 = chart.renderer.text(
                'line #1<br>line2 different length',
                labelOnePos.plotX,
                labelOnePos.plotY + chart.plotTop - 300
            ).css({
                color: 'white',
            }).add(),
            box1 = text1.getBBox();

但我无法弄清楚如何对齐文本。

小提琴：http://jsfiddle.net/q8ef9mmk/

Answer 1

要对齐文字，请使用attr({ align: 'center' })。示例：http://jsfiddle.net/q8ef9mmk/4/

但是，当您想要在图表的维度中渲染任何内容时，请记住，绘图区域由chart.plotTop和chart.plotLeft翻译。

代码：

var labelOnePos = chart.series[1].data[0],
    text1 = chart.renderer.text(
        'line1<br>a line of diff length',
    labelOnePos.plotX + chart.plotLeft, // add chart.plotLeft!
    150).attr({
        zIndex: 55,
        align: 'center' // center label
    }).css({
        fontSize: sectionLabelFontSize,
        color: 'blue'
    }).add(),
    box1 = text1.getBBox();
});

额外：
您的文件顺序错误，正确的顺序是：

• 为Highcharts加载jQuery或独立适配器
• 加载Highcharts
• 为Highcharts加载额外的插件

Extra2：
您可以考虑使用Axis.toPixels(value, paneCoords)方法而不是虚拟系列。