Highcharts:根据悬停在标记上淡化 plotLines
Highcharts: Fade plotLines based on hover on marker
我有一个带有系列的散点图。一些观察结果具有相应的极限值,我已将其添加为 PlotLines。假设有 2 个独特的 PlotLines,每个散点观察仅属于其中一个。作为一个额外的并发症,有多个散点系列,所以这必须适用于所有这些。
如果图表上有 2 条绘图线,当用户将鼠标悬停在任何系列的散点之一上时,我只希望属于该点的绘图线保持可见,而其他的则淡出。
我知道这有很多要求,但可能无法实现。我已经开始摆弄这个,从我在这里找到的一个例子:。我针对我的问题修改了 fiddle,显示了 2 个数据系列,'plotline' 变量中的数据指示 1 或 2。我不知道如何 link 这个数据但是到 plotLines,并按照说明使它们淡出。
JSFiddle:http://jsfiddle.net/7nghfemb/1/
var chart = Highcharts.chart('container', {
yAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
value: 50.5,
color: 'red',
width: 2,
id: 'plot-line-1'
},{
value: 130.5,
color: 'blue',
width: 2,
id: 'plot-line-2'
}]
},
series: [{
events: {
show: function() {
chart.yAxis[0].addPlotLine({
value: 50.5,
color: 'red',
width: 2,
id: 'plot-line-1'
});
},
hide: function() {
chart.yAxis[0].removePlotLine('plot-line-1')
}
},
data: [
{
y: 29.9,
plotline: 1
}, {
y: 71.5,
plotline: 2
}, {
y: 106.4,
plotline: 1
}, {
y: 129.2,
plotline: 1
}],
type: 'scatter'
},
{
data: [
{
y: 145.9,
plotline: 2
}, {
y: 111.5,
plotline: 2
}, {
y: 167.4,
plotline: 1
}, {
y: 101.2,
plotline: 2
}],
type: 'scatter'
}]
});
您可以使用 mouseOver
和 mouseOut
事件来显示或隐藏情节线:
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var plotLines = this.series.yAxis.plotLinesAndBands;
plotLines.forEach(function(el, i) {
if (i === this.plotline - 1) {
el.svgElem.show();
} else {
el.svgElem.hide();
}
}, this);
},
}
},
events: {
mouseOut: function() {
var plotLines = this.yAxis.plotLinesAndBands;
plotLines[0].svgElem.show();
plotLines[1].svgElem.show();
}
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/vh1z97yr/
API参考:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
我有一个带有系列的散点图。一些观察结果具有相应的极限值,我已将其添加为 PlotLines。假设有 2 个独特的 PlotLines,每个散点观察仅属于其中一个。作为一个额外的并发症,有多个散点系列,所以这必须适用于所有这些。
如果图表上有 2 条绘图线,当用户将鼠标悬停在任何系列的散点之一上时,我只希望属于该点的绘图线保持可见,而其他的则淡出。
我知道这有很多要求,但可能无法实现。我已经开始摆弄这个,从我在这里找到的一个例子:
JSFiddle:http://jsfiddle.net/7nghfemb/1/
var chart = Highcharts.chart('container', {
yAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
value: 50.5,
color: 'red',
width: 2,
id: 'plot-line-1'
},{
value: 130.5,
color: 'blue',
width: 2,
id: 'plot-line-2'
}]
},
series: [{
events: {
show: function() {
chart.yAxis[0].addPlotLine({
value: 50.5,
color: 'red',
width: 2,
id: 'plot-line-1'
});
},
hide: function() {
chart.yAxis[0].removePlotLine('plot-line-1')
}
},
data: [
{
y: 29.9,
plotline: 1
}, {
y: 71.5,
plotline: 2
}, {
y: 106.4,
plotline: 1
}, {
y: 129.2,
plotline: 1
}],
type: 'scatter'
},
{
data: [
{
y: 145.9,
plotline: 2
}, {
y: 111.5,
plotline: 2
}, {
y: 167.4,
plotline: 1
}, {
y: 101.2,
plotline: 2
}],
type: 'scatter'
}]
});
您可以使用 mouseOver
和 mouseOut
事件来显示或隐藏情节线:
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var plotLines = this.series.yAxis.plotLinesAndBands;
plotLines.forEach(function(el, i) {
if (i === this.plotline - 1) {
el.svgElem.show();
} else {
el.svgElem.hide();
}
}, this);
},
}
},
events: {
mouseOut: function() {
var plotLines = this.yAxis.plotLinesAndBands;
plotLines[0].svgElem.show();
plotLines[1].svgElem.show();
}
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/vh1z97yr/
API参考:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide