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

在此，我想显示我可以通过回滚访问的最后10个索引时间轴和左索引。而且我还想在单击任何标签div时将div大小更改为随机大小，所以我希望它是redraw（）图表并根据div大小进行调整。

Answer 1

如果具有静态值，则可以通过将x轴分别设置为min和max来确保显示最后10个索引。如果您知道数据，则可以在设置图表选项之前进行计算。对于您的情况（JSFiddle）：

xAxis: {
    type: 'datetime',
    min: Date.UTC(1961, 3, 12),
    max: Date.UTC(1998, 10, 20),
    visible: false,
},

如果它是动态的，则可以在图表的后处理中通过查看序列中的点找到轴的min和max来进行。例如（JSFiddle）：

Highcharts.chart('container', {
    // ...
}, function() {
    const min = Math.max(this.series[0].points.length - 10, 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);
});

如何在Highcharts时间轴中显示最后10个索引，并使用滚动键向左移动？

1 个答案: