如何在点击一个国家/地区时在 highcharts 地图中创建工具提示...？答案

【问题标题】：How to create tooltip in highcharts map on click over a country...?如何在点击一个国家/地区时在 highcharts 地图中创建工具提示...？
【发布时间】：2020-06-03 16:37:54
【问题描述】：

我试图在这个例子中实现类似的东西：JSFiddle chart example。但是，我使用的是地图，而不是折线图。我已经解决了，它正在解决我需要解决的以下问题：

当我单击一个国家/地区时，会显示工具提示，但是一旦我将指针移开内容或文本消失。但是，工具提示的轮廓保持不变。您可以在这里看到，文本随着光标移出而移开（这是工具提示的基本功能）。
其次，我要触发一个动作，该动作将采用国家/地区的值和名称，用于更新其他图表组件。一旦发送操作并且商店更新，应该保留在它被点击的国家/地区的工具提示就会消失。您可以在下面找到配置的 plotOptions：我在点击事件结束时触发操作的位置

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*/
      },
    },
  },
};

我尝试了 net 和 highcharts Q&A，但没有找到合适的解决方案。

最后，我想要实现的是

在高图地图上点击一个国家时显示的工具提示，并且在点击另一个国家之前不会消失。另外，我想触发一个选择国家的动作，不知道我目前是不是从正确的地方触发。

感谢您的帮助！

【问题讨论】：

图表类似问题的链接：JSFiddle JSFiddle
这能回答你的问题吗？ Highcharts - Keep tooltip showing on click
嗯，这不是我正在寻找的解决方案。我已经找到并附上了类似的解决方案，但我需要一些带有地图的东西。另外，我在点击事件中触发操作时遇到问题。

标签： reactjs dictionary highcharts react-highcharts

【解决方案1】：

下面的插件应该可以解决你的两个问题：

(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.net/BlackLabel/3e4cvz2m/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

【讨论】：