如何在highcharts地图中创建工具提示,点击一个国家...?

问题描述 投票:0回答:1

我试图实现像这个例子中的东西。JSFiddle图表示例.然而, 我使用的是地图 不是线图。我做了解决方法,它是工作与以下问题,我需要解决。

  1. 当我点击一个国家的时候,工具提示会显示出来,但是一旦我把指针移开,内容或文字就会消失。但是,工具提示的轮廓仍然是静态的。你可以看到,文本随着光标的移动而移动(这是工具提示的基本功能)。Tooltip error
  2. 其次,我有一个动作要触发,它将取值和国家名称,用于更新其他图表组件。一旦动作被派发,商店更新,应该留在它被点击的国家上空的工具提示就消失了。你可以在下面找到配置的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*/
      },
    },
  },
};

我试过网和高图问答,但没有找到合适的解决方案。

最后,我又想实现的是

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

感谢您的帮助

reactjs dictionary highcharts react-highcharts
1个回答
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.netBlackLabel3e4cvz2m的。

文件。 https:/www.highcharts.comdocsextending-highchartsextending-highcharts

© www.soinside.com 2019 - 2024. All rights reserved.