当我点击一个点时,如何阻止高图放大?

时间:2019-04-02 20:29:03

标签: highcharts

我已经使用带有多个数据点系列的HighMaps建立了美国地图。我已禁用onmouseover的默认行为,而是使用onclick来实现可访问性和移动用途。但是,当我单击一个地图点时,地图会放大。如何禁用此功能?

我不想禁用所有缩放功能,因为某些点非常接近。问题似乎在代码的plotoptions部分中(当我将其删除时,它不会缩放,但是onclick也不起作用)

在此处查看JS Fiddle代码: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
                }
            }
        }
    }
},

我希望当我单击一个点时它不会缩放。

1 个答案:

答案 0 :(得分:0)

您可以通过对工具提示本身进行更新而不更新整个图表来实现您的期望。查看下面发布的演示和代码。

  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
          }
        }
      }
    }
  }

演示: