时间戳

首页 > 解决方案 > 如何在 Timeline Highchart 中将鼠标悬停在鼠标悬停上聚焦或更改标签颜色？

highcharts - 如何在 Timeline Highchart 中将鼠标悬停在鼠标悬停上聚焦或更改标签颜色？

问题描述

我有这样的数据：

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',
}];

这是小提琴链接供您参考：小提琴

我想要的，即当鼠标悬停在标签上时，它会改变它的颜色或可能集中，这样我就可以很容易地理解我的指针是一个 x 标签。

我shadow在 Plotoption、Series 和 In Datalabel 中尝试过，但没有奏效。

您可以在此处查看参考API Highcharts

示例 API Highcharts

标签： highcharts

解决方案

要突出显示时间线系列中的标签，您可以将此代码添加到图表加载事件中：

chart: {
  type: 'timeline',
  events: {
    load: function() {
      var chart = this;

      chart.series[0].points.forEach(function(point) {
        point.dataLabel.on('mouseover', function() {
          point.dataLabel.box.css({
            fill: 'red'
          });
        });

        point.dataLabel.on('mouseout', function() {
          point.dataLabel.box.css({
            fill: 'white'
          });
        });
      });
    }
  }
}

演示：

API参考：

推荐阅读