Highcharts 中的中心渲染标签

Question

我的图表如下所示：

x 轴上的绘图线分别如图所示（刚好在 1993 年和 2001 年之后）。我需要让标签的线条在两条绘图线之间并相对于彼此居中。我首先制作了一个与情节线相对应的隐藏系列，然后使用这些点来放置标签：

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: 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();
});

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

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

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

Highcharts 中的中心渲染标签

center rendered label in High Charts

css

highcharts