Блог

Я настроил карту США с помощью HighMaps с несколькими сериями точек данных. Я отключил поведение onmouseover по умолчанию и вместо этого использую onclick для обеспечения доступности и мобильного использования. Однако, когда я нажимаю на точку карты, карта увеличивается. Как мне отключить это?

Я не хочу отключать все масштабирование, потому что некоторые точки находятся довольно близко. Проблемы, похоже, находятся в разделе plotoptions кода (когда я удаляю его, он не увеличивает масштаб, но onclick также не работает)

Смотрите код скрипки JS здесь:https://jsfiddle.net/sfjeld/znd03gxL/47

 var tooltipEnabled = true;
// Create the chart
Highcharts.mapChart('container', {
chart: {
    map: 'countries/us/us-all'
},

title: {
    text: 'InSPIRE Project Sites'
},
legend: {
        title: {
            text: 'Select from the options below to display all sites using that technology.'
        }
},
credits: {
    enabled: false
},
mapNavigation: {
    enabled: false,
    buttonOptions: {
        verticalAlign: 'top'
    }
},

tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:#0079C2;font-weight:bold; font-size:110%"><b>{point.name}</b></span><br><b>Primary Research:</b> {point.research}<br>{point.desc}<br><br><b>Partners:</b> {point.partners}',
    useHTML: true,
    enabled: false
},

plotOptions: {
    series: {
      events: {
      click: function() {
        this.chart.update({
          tooltip: {
            enabled: tooltipEnabled
          }
        });
        tooltipEnabled = tooltipEnabled ? false : true;
        disableHover = false;
      }

  },
        dataLabels: {
            enabled: false
        },
        marker: {
            states: {
                hover: {
                    enabled: true
                }
            }
        }
    }
},
  

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

Вы можете достичь того, чего ожидаете, обновив саму всплывающую подсказку, а не обновляя всю диаграмму. Проверьте демонстрацию и код, размещенные ниже.

   plotOptions: {
    mappoint: {
      events: {
        click: function() {
          this.chart.tooltip.update({
            enabled: tooltipEnabled
          });

          tooltipEnabled = tooltipEnabled ? false : true;
          disableHover = false;
        }
      },
      dataLabels: {
        enabled: false
      },
      marker: {
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  }
  

ДЕМОНСТРАЦИЯ:

• https://jsfiddle.net/BlackLabel/6ps8bk2q/