javascript - 数据标签对齐在 Highchart 时间线中不起作用

Question

我尝试使用 dataLabels 在 Highchart 水平时间轴中将数据左右对齐:{align: 'right'} 但这不起作用。

代码:

Highcharts.chart('container', {
    chart: {
        type: 'timeline',
        inverted: true
    },
    title: {
        text: 'Timeline of Space Exploration'
    },
    subtitle: {
        text: 'Info source: <a href="https://en.wikipedia.org/wiki/Timeline_of_space_exploration">www.wikipedia.org</a>'
    },
    xAxis: {
        visible: false
    },
    yAxis: {
        visible: false
    },
    plotOptions: {
        series: {
            dataLabels: {
                align: 'right',
                enabled: true
            }
        }
    },
    series: [{
        data: [{
            name: 'First dogs',
            label: '1951: First dogs in space',
            description: '22 July 1951 First dogs in space (Dezik and Tsygan) '
        }, {
            name: 'Sputnik 1',
            label: '1957: First artificial satellite',
            description: '4 October 1957 First artificial satellite. First signals from space.'
        }, {
            name: 'First human spaceflight',
            label: '1961: First human spaceflight (Yuri Gagarin)',
            description: 'First human spaceflight (Yuri Gagarin), and the first human-crewed orbital flight'
        }, {
            name: 'First human on the Moon',
            label: '1969: First human on the Moon',
            description: 'First human on the Moon, and first space launch from a celestial body other than the Earth. First sample return from the Moon'
        }]
    }]
});

预期:左右移动数据。

Answer 1

您需要使用距离属性:

series: {
  dataLabels: {
    alternate: false,
    distance: -100,
    enabled: true
  }
}

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4942/

API引用: https://api.highcharts.com/highcharts/series.timeline.dataLabels.distance