Question

我在下拉列表中有一个县列表供您选择。我试图弄清楚如何在选中该县时在地图上突出显示该县。我在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功能通过下拉菜单触发地图上的选择。在这里，我将国家/地区代码添加为该点的ID，以便我们可以使用chart.get来获取它们。

一个最小的示例，带有两个按钮，可以分别选择挪威或瑞典（JSFiddle）：

$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/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();
  });
});

如何以编程方式在地图上选择点？

1 个答案: