如何在 highchart 时间轴中设置每个点的不同距离？答案

【问题标题】：How can I set different distance of each points in highchart timeline?如何在 highchart 时间轴中设置每个点的不同距离？
【发布时间】：2019-10-05 17:06:09
【问题描述】：

我看到了 Highchart 的 timeline chart 自定义每个点 dataLabel。
我想添加dataLabel 选项来为每个点（数据）设置不同的distance。所以我添加了如下代码的选项。

但是当我使用此代码时，distance 选项似乎不起作用。所有dataLabel's 距离都是相同的。

我该如何解决？是不是我用错了？

Highcharts.chart('container', {
    chart: {
        type: 'timeline'
    },
    series: [{
        data: [{
            date: 'Some date',
            label: 'Event label',
            description: 'Description of this event.',
            dataLabels: {
                color: '#78f',
                borderColor: 'blue',
                backgroundColor: '#444',
                connectorWidth: 2,
                connectorColor: 'blue',
                distance : 80, // I add this option for different distance
                style: {
                    textOutline: 0
                }
            }
        },{
            date: 'Another date',
            label: 'Last event label',
            description: 'Description of third event.',
            dataLabels :{
                 distance : 20
           }
        }]
    }]
});

【问题讨论】：

标签： javascript highcharts timeline

【解决方案1】：

您可以使用y 属性来代替为所有数据标签设置的distance：

series: [{
    data: [{
        ...,
        dataLabels: {
            y: -50,
            ...
        }
    }, {
        ...,
        dataLabels: {
            y: 120
        }
    }]
}]

现场演示： http://jsfiddle.net/BlackLabel/femo49gn/

API 参考： https://api.highcharts.com/highcharts/series.timeline.dataLabels.y

【讨论】：