highcharts - 如何以编程方式选择 map 上的点？

Question

我有一个下拉菜单，其中包含可供在 map 上选择的县列表。我试图弄清楚如何在选择 map 上的县时突出显示该县。我在 API 文档中找不到完成此操作的位置。

我尝试更改点的填充颜色，但是当您选择新颜色时，将其更改回之前颜色的代码似乎不想执行。

所以本质上，在我的更改事件代码中，我想通过 hc-key 或 id 更改所选点的颜色。

$("#county-select").change(function () {
    $('.highcharts-point-select').css('fill', 'rgb(153, 145, 164)');

    $('.county-checkbox').prop('checked', false);
    $('.metric-td').remove();

    let id = $('#county-select').val();
    let fips = $(this).find(':selected').attr('data-fips');
    let point = mapChart.get(fips);
});

Answer 1

您可以使用 allowPointSelect 功能通过下拉菜单触发 map 上的选择。这里我添加了国家代码作为点的ID，以便我们可以使用chart.get来获取它们。

一个最小的示例，有两个按钮可以专门选择挪威或瑞典( JSFiddle ):

$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe7e6e8e7ece7eefdfbfccff9b8a1bfa1bf" rel="noreferrer noopener nofollow">[email protected]</a>/samples/data/world-population-density.json', function (data) {

  for(var i = 0; i < data.length; i++) {
    // Adding ID to data, so we can use "get" to find the points
    data[i].id = data[i].code3;
  }

  // Initiate the chart
  var chart = Highcharts.mapChart('container', {
    series: [{
      data: data,
      mapData: Highcharts.maps['custom/world'],
      joinBy: ['iso-a2', 'code'],
      allowPointSelect: true,
    }]
  });

  $('#selectnor').click(function () {
    chart.get('NOR').select();
  });

  $('#selectswe').click(function () {
    chart.get('SWE').select();
  });
});