highcharts - Coloring a region programmatically based by user selection with Highmaps

Question

I have an application where user can select a region by clicking. Then the map rewrites itself and zoomsTo() to the selected area. So far everything else works, but I haven't get any idea how to color the selected area programmatically. The area (or different statistics) may also be selected from a drop-down list, so I have to redraw the map in any case.

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

I have tried things along the line:

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

but so far no breakthrough :/

Any ideas?

hank

标签： highchartstheming

Answer 1

使用 jquery 选择点不是最好的解决方案。Highcharts 提供点事件，例如click您可以访问单击点实例的位置，或者您可以使用chart.get()方法通过点 id 选择一个点。

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

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

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

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

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

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