时间戳

首页 > 解决方案 > 如何使某些事件可点击或其他事件不在 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',
}];

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

我想要一些可点击的事件或其他不符合我的条件的事件。例如：如果标签名称是“第一颗人造卫星到达月球”和“第一次在月球上软着陆”，则无法点击，其他可点击。

截图供参考： 在此处输入图像描述

标签： highcharts

解决方案

您可以在点击处理（ JSFiddle）中检查它是否“不可点击” 。首先定义那些不可点击的标签：

var unclickable = ["First artificial satellite to reach the Moon", "First soft landing on the Moon"];

然后执行签入click以防止处理，以及default在将点悬停时显示光标mouseOver：

series: [{
  point: {
    events: {
      mouseOver: function() {
        if(unclickable.includes(this.label)) {
          this.dataLabel.element.style.setProperty('cursor', 'default');
          this.dataLabel.text.element.style.setProperty('cursor', 'default');
        }
      },
      click: function(data) {
        if(!unclickable.includes(this.label)) {
            // ...
        }
      }
    }
  }
}]

请注意，您的示例 JSFiddle&nbsp;在标签中有一些字符，这意味着在检查includes. 确保您只有常规空格，或者在将标签与另一个字符串匹配时必须非常精确。

推荐阅读