是否可以在2种不同类型的图表中链接/同步2个图表数据,以便一次显示工具提示?
例如,我有一个饼图和面积图。
饼图表示特定浏览器的百分比,面积图显示每个浏览器每年的下载量。
我需要做的是,如果有人点击或悬停在饼图的某个部分,则应突出显示相关行和区域图表的工具提示......
所以当有人点击/悬停在派对上的firefox时,与该区域相关的行应该显示,反之亦然......
这可能与highcharts有关吗?
到目前为止,我所做的工作是https://jsfiddle.net/livewirerules/a9tntdam/1/
我注意到的一件事是我在区域图表中添加了event
以显示工具提示悬停时的颜色。
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
当我在区域图表上悬停一条线并移动到饼图时,工具提示的背景颜色会发生变化。
答案 0 :(得分:1)
当您将鼠标悬停在馅饼上时,我不确定您希望在工具提示中显示什么。你有一个点,所以很难在另一个图表上显示整个系列的工具提示。
您可以使用mouseOver和mouseOut事件回调函数突出显示系列(因此它们在悬停时看起来像):
point: {
events: {
mouseOver: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('hover');
}
});
},
mouseOut: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('');
}
});
}
}
},
您可以使用tooltip.refresh(point)刷新特定点上的工具提示:
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
var name = this.name;
Highcharts.each(chart.series[0].data, function(p) {
if (name === p.name) {
p.setState('hover');
chart.tooltip.refresh(p)
}
});
},
在这里你可以看到一个如何工作的例子: http://jsfiddle.net/a9tntdam/4/