highcharts HighMaps -需要使数据标签可点击

ha5z0ras  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(153)

我正在使用HighMaps中的小美国Map,我希望每个州和它的数据标签在单击时打开一个新的URL。我有州的工作,但标签不工作。
这就是我所尝试的:

plotOptions: {
                series: {
                    allowPointSelect: true,
                    point: {
                        events: {
                            click: function(e) {
                                const url = e.target.point.value;
                                window.open(url);
                            }
                        }
                    },
          datalabels: {
                        events: {
                            click: function(e) {
                                const url = e.target.point.value;
                                window.open(url);
                            }
                        }
                    }
                }
            },

有关代码,请参见https://jsfiddle.net/sfjeld/zcsxobfa/12/

os8fio9y

os8fio9y1#

使用this.value而不是e.target.point.value

plotOptions: {
  series: {
    point: {
      events: {
        click: function() {
          const url = this.value;
          window.open(url);
        }
      }
    }
  }
}

演示:https://jsfiddle.net/BlackLabel/6gpL57nf/

pobjuy32

pobjuy322#

在您的示例中,您可以用途:

e.point.properties.hasc

用于从单击的点获取值。
编码:

plotOptions: {
  series: {
    allowPointSelect: true,
    point: {
      events: {
        click: function(e) {
          const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
          window.open(url);
        }
      }
    },
  }
},

您可以使用以下路径检查其他值:

console.log(e.point.properties);

完整代码位于this forked jsfiddle

相关问题