Javascript Highcharts:如何缩小图例项悬停时的气泡半径? 我想实现的目标是:
我试图在图例中表示气泡大小(z值)。当该图例项悬停或关闭时,气泡应收缩至相同大小,如正常散点图 到目前为止,我所尝试的: 通过添加一个没有数据的新系列,我能够获得一个图例项来表示尺寸。我将有数据的2个系列链接到这个新系列。然后我重写了Highcharts图例悬停函数,以便在“大小”图例项悬停时,链接的系列保持完全可见 像这样:Javascript Highcharts:如何缩小图例项悬停时的气泡半径? 我想实现的目标是:,javascript,css,highcharts,Javascript,Css,Highcharts,我试图在图例中表示气泡大小(z值)。当该图例项悬停或关闭时,气泡应收缩至相同大小,如正常散点图 到目前为止,我所尝试的: 通过添加一个没有数据的新系列,我能够获得一个图例项来表示尺寸。我将有数据的2个系列链接到这个新系列。然后我重写了Highcharts图例悬停函数,以便在“大小”图例项悬停时,链接的系列保持完全可见 像这样: series: [ { type: "bubble", name: HotSpotResources.Positive, color: "#2
series: [
{
type: "bubble",
name: HotSpotResources.Positive,
color: "#2699FB",
data: points[0], //example data like -> {x: 10, y: 12, z: 150, id: "some_id"}
linkedTo: "nsize",
showInLegend: true
},
{
type: "bubble",
name: HotSpotResources.Negative,
color: "#F8A6A6",
data: points[1],
linkedTo: "nsize",
showInLegend: true
},
{
id: "nsize",
type: "bubble",
name: HotSpotsResources.nSize,
color: "#4A4A4A",
marker: {
symbol: `url(${LayoutResources.AppRoot}/assets/images/nsize-icon.svg)`
},
}
],
和图例悬停覆盖:
(function (H) {
H.Legend.prototype.setItemEvents = function (item, legendItem, useHTML) {
const legend = this,
boxWrapper = legend.chart.renderer.boxWrapper,
activeClass = 'highcharts-legend-' + (item.series ? 'point' : 'series') + '-active',
hasLinkedSeries = item.linkedSeries && item.linkedSeries.length ? true : false,
setLinkedSeriesState = (item, state) => {
item.linkedSeries.forEach((elem) => (elem.setState(state)));
};
// Set the events on the item group, or in case of useHTML, the item itself (#1249)
(useHTML ? legendItem : item.legendGroup).on('mouseover', () => {
if (item.visible) {
item.setState('hover');
// Add hover state to linked series
if (hasLinkedSeries) {
setLinkedSeriesState(item, 'hover');
}
// A CSS class to dim or hide other than the hovered series
boxWrapper.addClass(activeClass);
legendItem.css(legend.options.itemHoverStyle);
}
}).on('mouseout', () => {
legendItem.css(H.merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle));
// A CSS class to dim or hide other than the hovered series
boxWrapper.removeClass(activeClass);
item.setState();
}).on('click',(event) => {
const strLegendItemClick = 'legendItemClick',
fnLegendItemClick = () => {
item.setVisible ? item.setVisible() : "";
};
// Pass over the click/touch event. #4.
event = {
browserEvent: event
};
// click the name or symbol
if (item.firePointEvent) { // point
item.firePointEvent(strLegendItemClick, event, fnLegendItemClick);
}
else {
H.fireEvent(item, strLegendItemClick, event, fnLegendItemClick);
}
});
};
})(Highcharts)
到目前为止还不错
我试着只用css缩小大小,但作为svg是不可能的/它产生了不良的结果。缩放它们也改变了它们的位置,所以这是不可能的
.highcharts-series-hover {
transform: scale(1.5);
transition: transform 250ms;
}
我可以通过更改标记状态来缩小悬停时的气泡(气泡本身而不是图例项):
plotOptions: {
bubble: {
marker: {
states: {
hover: {
radius: 4
}
}
}
}
}
但我希望在悬停大小图例项时得到相同的结果,而不是在悬停气泡时
最后,这里是我创建的供参考的图表的屏幕截图:
有人能找到一种方法来操纵Highcharts来完成这项任务,或者帮我指出正确的方向吗?你可以在
renderItem
方法的包装中添加onmouseover
和onmouseout
事件,并将取消覆盖的序列类型更改为scatter
(function(H) {
H.wrap(H.Legend.prototype, 'renderItem', function(proceed, item) {
proceed.call(this, item);
var chart = this.chart,
series = chart.series,
element = item.legendGroup.element;
element.onmouseover = function() {
series.forEach(function(s) {
if (s !== item) {
s.update({
type: 'scatter'
}, false);
}
});
chart.redraw();
}
element.onmouseout = function() {
series.forEach(function(s) {
if (s !== item) {
s.update({
type: 'bubble'
}, false);
}
});
chart.redraw();
}
});
}(Highcharts));
现场演示: API参考:
文档:这为我指明了正确的方向,而不是使用
更新
然后重新绘制
的方法,我在每个点上循环并设置其状态:点。设置状态(“选择”)代码>。这使得图表可以动画化,但我会检查你的答案,因为它让我在那里。