highcharts - 如果未选中,如何在 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',
}];
我希望当用户在任何标签上选择该标签时,该标签会突出显示,而其他所有标签都会褪色。当我将光标移动到褪色标签上时,我也想要这样做,它正在改变标签颜色,以便用户可以点击该标签。
我在下面添加了 Fiddle 链接: 在此处输入链接描述
供你参考。请帮帮我。
解决方案
您可以使用Custom-Events
插件实现它: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,
}]
演示:
推荐阅读
- python - 当我运行应用程序时,我收到此错误 ModuleNotFoundError: No module named 'preferences' in django
- android - Kotlin 改造错误:“应为 BEGIN_OBJECT 但为字符串”
- python - 如何在写入 Excel 时格式化数据框
- android - Dagger -Android 中构造函数注入和@Provides 的区别,举个简单的例子
- php - Symfony 5 如何为 argon2 存储盐?
- sql - SQL Server内部连接查询从多对多关系表
- jq - 使用 |= update-assignment 时 jq 管道中间需要身份运算符
- django - 有比这个更短/更简单的查询吗?
- tcp - TCP 上的类 GATT 协议
- javascript - 如何显示列表
使用 v-for 方法?