简体   繁体   English

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

[英]How can I set different distance of each points in highchart timeline?

I saw Highchart's timeline chart that customize each point dataLabel .我看到了自定义每个点dataLabel的 Highchart 的timeline chart
I want to add dataLabel option to set different distance for each points(data).我想添加dataLabel选项来为每个点(数据)设置不同的distance So I added option like below code.所以我添加了如下代码的选项。

But when I use this code, it looks like distance option is not working.但是当我使用这段代码时,看起来distance选项不起作用。 all of the dataLabel's distance is same.所有dataLabel's距离都是相同的。

How can I solve it?我该如何解决? Did I use something wrong?我是不是用错了什么?

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
           }
        }]
    }]
});

Instead of distance that is set for all data labels you can use y property:您可以使用y属性,而不是为所有数据标签设置的distance

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

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM