如何在单击国家/地区时在 highcharts 地图中创建工具提示...？

Question

我正在尝试实现与此示例类似的目标：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 问答，但没有找到合适的解决方案。

最后，我要实现的又是

A tooltip that is displayed on click over a country on highcharts map, and does not disappear until another country is clicked. Plus, I want to trigger an action on selecting a country, don't know if I am triggering from the right place currently.

感谢您的帮助！

Answer 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

如何在单击国家/地区时在 highcharts 地图中创建工具提示...？

How to create tooltip in highcharts map on click over a country...?

dictionary

highcharts

reactjs

react-highcharts