我试图实现像这个例子中的东西。JSFiddle图表示例.然而, 我使用的是地图 不是线图。我做了解决方法,它是工作与以下问题,我需要解决。
this.config.plotOptions = {
map: {
allAreas: false,
nullColor: "#d6d6d6",
},
series: {
cursor: "pointer",
stickyTracking: false,
marker: {
enabled: false,
states: {
hover: {
enabled: false,
},
},
},
events: {
click: function() {
this.selectedCountry = this.chart.hoverPoint.name;
this.selectedValue = this.chart.hoverPoint.value;
console.log(this.chart);
var x = a.checkCountry.length;
if (x > 0) {
a.clone[0].remove();
a.clone.splice(0, 1);
a.checkCountry.splice(0, 1);
}
var cloneToolTip = this.chart.tooltip.label.element.cloneNode(true);
this.chart.container.firstChild.appendChild(cloneToolTip);
a.checkCountry.push(this.selectedCountry);
a.clone.push(cloneToolTip);
/*Action goes here*/
},
},
},
};
我试过网和高图问答,但没有找到合适的解决方案。
最后,我又想实现的是
一个工具提示,在点击高图地图上的一个国家时显示,并且不会消失,直到点击另一个国家。另外,我想在选择一个国家时触发一个动作,不知道我目前是否从正确的地方触发。
感谢您的帮助
下面的插件应该可以解决你的两个问题。
(function(H) {
H.Tooltip.prototype.hide = function() {};
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, point, e) {
if (e && e.type !== 'mouseover' && e.type !== 'mousemove') {
this.updatePos = true;
proceed.call(this, point, e);
}
});
H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, pos) {
if (this.updatePos) {
this.updatePos = false;
proceed.call(this, pos);
}
});
H.addEvent(H.Point.prototype, 'click', function(e) {
e.point.series.chart.tooltip.refresh(e.point, e);
});
}(Highcharts));
现场演示。 https:/jsfiddle.netBlackLabel3e4cvz2m的。
文件。 https:/www.highcharts.comdocsextending-highchartsextending-highcharts