使用 Highmaps 根据用户选择以编程方式为区域着色

Question

我有一个应用程序，用户可以通过单击 select 一个区域。然后地图将自身和 zoomsTo() 重写到 selected 区域。到目前为止，其他一切都有效，但我不知道如何以编程方式为 selected 区域着色。该区域（或不同的统计数据）也可以从下拉列表中 select 编辑，因此无论如何我都必须重新绘制地图。

var mapChart=$('#mapcontainer').highcharts(); mapChart.get(jQuery( "#selected-region" ).val()).zoomTo(); mapChart.mapZoom(5);

我尝试过以下方法：

mapChart.get(jQuery( "#selected-region" ).val()).color="rgb(255,0,0)";

但至今没有突破:/

有什么想法吗？

汉克

Answer 1

用jquery到select点不是最好的办法。 Highcharts 提供像 click 这样的点事件，您可以在其中访问单击的点实例，或者您可以 select 使用 chart.get() 方法按点 id 的点。

要更改 selected 区域颜色，您必须在点（区域）被 selected 时定义颜色属性：

series: [{
  states: {
    select: {
      color: '#a4edba'
    }
  }
}]

现在您必须在单击或 select 点上调用 select() 方法，以及调用 zoomTo() 方法：

  series: [{
      point: {
        events: {
          click: function() {
            var point = this;

            point.zoomTo();
            point.select();
          }
        }
      },
      states: {
        select: {
          color: '#a4edba'
        }
      }
    }]
  });

演示： https://jsfiddle.net/wchmiel/yzco1023/

使用 Highmaps 根据用户选择以编程方式为区域着色

Coloring a region programmatically based by user selection with Highmaps

theming

highcharts