Question

我有这样的数据：

var data = [{
    x: Date.UTC(1951, 5, 22),
    name: 'First dogs in space',
    label: 'fds',
    dataLabels: {
        allowOverlap: false,
        format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
            '</span><br/>{point.label}'
    },
}, {
    x: Date.UTC(1957, 9, 4),
    name: 'First artificial satellite',
    label: 'First artificial satellite',
}, {
    x: Date.UTC(1959, 0, 4),
    name: 'First artificial satellite to reach the Moon',
    label: 'First artificial satellite to reach the Moon',
}, {
    x: Date.UTC(1961, 3, 12),
    name: 'First human spaceflight',
    label: 'First human spaceflight',
}, {
    x: Date.UTC(1966, 1, 3),
    name: 'First soft landing on the Moon',
    label: 'First soft landing on the Moon',
}, {
    x: Date.UTC(1969, 6, 20),
    name: 'First human on the Moon',
    label: 'First human on the Moon',
}, {
    x: Date.UTC(1971, 3, 19),
    name: 'First space station',
    label: 'First space station',
}, {
    x: Date.UTC(1971, 11, 2),
    name: 'First soft Mars landing',
    label: 'First soft Mars landing',
}, {
    x: Date.UTC(1976, 3, 17),
    name: 'Closest flyby of the Sun',
    label: 'Closest flyby of the Sun',
}, {
    x: Date.UTC(1978, 11, 4),
    name: 'First orbital exploration of Venus',
    label: 'First orbital exploration of Venus',
}, {
    x: Date.UTC(1986, 1, 19),
    name: 'First inhabited space station',
    label: 'First inhabited space station',
}, {
    x: Date.UTC(1989, 7, 8),
    name: 'First astrometric satellite',
    label: 'First astrometric satellite',
}, {
    x: Date.UTC(1998, 10, 20),
    name: 'First multinational space station',
    label: 'First multinational space station',
}];

以下是小提琴链接供您参考：Fiddle

屏幕截图供参考：

如果日期接近，那么我想立即显示所有标签，而没有重叠。

我尝试过：

dataLabels: {
      allowOverlap: false,
      format: '<span style="color:{point.color}">● </span><span style="font-weight: bold; white-space:nowrap;" > ' +
      '{point.x:%d-%b-%Y}</span><br/>{point.label}'
    },

但是重叠时只显示点而不是标签。

Answer 1

您可以通过更改极端值来为标签留出更多空间：

Highcharts.chart('container', {
    ...
}, function() {
    const min = Math.max(this.series[0].points.length - 3, 0);
    const max = Math.max(this.series[0].points.length - 1, 0);
    this.xAxis[0].setExtremes(
        this.series[0].points[min].x, 
        this.series[0].points[max].x
    );
});

实时演示： https://jsfiddle.net/BlackLabel/e82jtrsw/

或覆盖distributeDL时间轴系列方法以更多地利用可用空间：

示例：

(function(H) {
    H.seriesTypes.timeline.prototype.distributeDL = function() {
        var series = this,
            dataLabelsOptions = series.options.dataLabels,
            options,
            pointDLOptions,
            newOptions = {},
            visibilityIndex = 1,
            j = 2,
            distance;

        series.points.forEach(function(point, i) {
            distance = dataLabelsOptions.distance;

            if (point.visible && !point.isNull) {
                options = point.options;
                pointDLOptions = point.options.dataLabels;

                if (!series.hasRendered) {
                    point.userDLOptions = H.merge({}, pointDLOptions);
                }

                if (i === j || i === j + 1) {
                    distance = distance * 2.5

                    if (i === j + 1) {
                        j += 4
                    }
                }

                newOptions[series.chart.inverted ? 'x' : 'y'] =
                    dataLabelsOptions.alternate && visibilityIndex % 2 ?
                    -distance : distance;

                options.dataLabels = H.merge(newOptions, point.userDLOptions);
                visibilityIndex++;
            }
        });
    }
}(Highcharts));

实时演示： https://jsfiddle.net/BlackLabel/fa2obzwq/

文档： https://www.highcharts.com/docs/extending-highcharts

如何显示所有时间轴Highcharts数据而没有任何重叠？

1 个答案: