Как добавить значок в выделенную область на карте High Charts?

Question

Я использую Highcharts для отображения карт в моем приложении.

Я хочу иметь 2 функции:

1) Когда я нажимаю на любую область, эта область должна быть выделена красным color {done}

2) Когда я нажимаю на любую область, на ней появляется значок маркера {Не выполнено: (}

Ниже приведен код, который я написал для события click ,

plotOptions: {
  series: {
      turboThreshold:3000,
      cursor: 'pointer',
      point: {
          events: {
              click: function(e){
                    e.point.series.data[e.point.index].update({
    color: 'red'
  })
              }
          }
      }
  }
 }

Здесь у меня было 2 ошибки:

1) Когда я нажимаю на состояние, оно подсвечивается, но когда я выбираю другое состояние, предыдущий цвет по-прежнему остается, который должен go вернуться к предыдущему цвету.

2) Хотите иметь значок в выбранном состоянии.

Здесь Может кто-нибудь, пожалуйста, помогите мне исправить эти 2 проблемы, и я новичок в старших чартах. Пожалуйста, помогите мне. Спасибо.

Answer 1

Вместо обновления точки вы должны включить опцию allowPointSelect и установить цвет в states.select.color.

Чтобы добавить значок в выбранную точку, вы можете создать серию mappoint с пользовательским символом маркера и обновить данные в select функциях обратного вызова из первой серии.

series: [{
  allowPointSelect: true,
  states: {
    select: {
      color: 'red'
    }
  },
  point: {
    events: {
      select: function() {
        this.series.chart.series[1].setData([{
          x: this._midX,
          y: this._midY
        }]);
      }
    }
  },
  data: data,
  keys: ['code_hasc', 'value'],
  joinBy: 'code_hasc'
}, {
  enableMouseTracking: false,
  colorAxis: false,
  type: 'mappoint',
  marker: {
    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
  },
  states: {
    inactive: {
      opacity: 1
    }
  }
}]

---

Демо-версия: https://jsfiddle.net/BlackLabel/zsp7k50w/

Ссылка API:

https://api.highcharts.com/highmaps/series.map.states.select.color

https://api.highcharts.com/highmaps/series.map.allowPointSelect

https://api.highcharts.com/highmaps/series.mappoint.marker.symbol