如果未选中标签，如何在Highchart时间轴中使标签褪色? [英] How can I faded label in Highchart Timeline if it's not selected?

问题描述

我有这样的数据:

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

我想要当用户在任何标签上选择该标签突出显示而其他所有都消失时. 这也是我想要的，当我将光标移到褪色的标签上时，它正在更改标签颜色，以便用户可以单击该标签.

I want when user select on any label that label is highlighted and left all other gonna faded. Also what I want in this when I move the cursor on the faded label it's changing label color so that user can click on that label.

我在下面添加了Fiddle链接: 在此处输入链接描述

I have added Fiddle link below: enter link description here

供您参考. 请帮我.

For your reference. Kindly help me out.

推荐答案

您可以使用Custom-Events插件来实现:

You can achieve it using Custom-Events plugin: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events.

代码:

series: [{
  dataLabels: {
    events: {
      mouseover: function() {
        if (!this.dataLabel.isSelected) {
          this.dataLabel.attr({
            fill: '#efefef'
          });
        }
      },
      mouseout: function() {
        if (!this.dataLabel.isSelected) {
          this.dataLabel.attr({
            fill: '#fff'
          });
        }
      },
      click: function() {
        var point = this.point,
          series = point.series;

        series.points.forEach(function(p) {
          p.dataLabel.attr({
            fill: '#fff'
          });

          p.dataLabel.isSelected = false;
        });

        this.dataLabel.attr({
          fill: 'red'
        });

        this.dataLabel.isSelected = true;
      }
    }
  },
  marker: {
    symbol: 'circle'
  },
  data: data,
}]

演示:

• https://jsfiddle.net/BlackLabel/u01hyk2x/

这篇关于如果未选中标签，如何在Highchart时间轴中使标签褪色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！