Css 在高图表中居中渲染标签

我的图表如下所示：

分别在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();

但是我不知道如何对齐文本

Fiddle:

要对齐文本，请使用attr{align:'center'}。例如：

但是，当您要在图表的维度中渲染任何内容时，请记住打印区域由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加载额外插件 附加条款2：

---

你可以考虑使用方法代替虚拟序列。< /P>提供一个活生生的样本？顺便问一下，这是用R做的吗？我会做一把小提琴，但不，不是用R。你的小提琴有错误。我不明白你想达到什么目的。小提琴对我来说很好；你看到了什么问题？呃，我觉得我尝试了对齐：中心的每一个组合和位置，除了那个非常明显的。文件里有我错过的地方吗？我觉得文档经常说支持一组有限的html，但没有告诉您是什么。我可能错过了。你对文件顺序的评论是：这对我的程序的运行方式有影响吗？或者这只是最佳实践吗？是的，这有很大的影响。你不应该在Highcharts之前加载Highcharts的插件-在大多数情况下，你的页面都无法工作。请查看问题下方的评论。。。关于API，请参见-align来自SVG支持。