2016-04-13 4 views
1

Я использую Highmaps для создания карты на своей веб-странице. Я хочу отключить любое масштабирование, например:Удаление/уменьшение масштаба изображения Highmaps

  1. С помощью кнопок увеличения масштаба.
  2. Через свиток.
  3. Pinch для увеличения.
  4. На сенсорных устройствах.
  5. Несколько щелчков мышью, чтобы увеличить

Я попытался это:.

chart:{ 
    pinchType : 'none', 
    zoomType : 'none' 
} 

и это:

mapNavigation:{ 
     enableButton:false, 
     enableDoubleClickZoom:false, 
     enableDoubleClickZoomTo:false, 
     enableMouseWheelZoom:false, 
     enableTouchZoom:false 
     }, 

, но не повезло.

+3

Я добавил свои 'варианты mapNavigation' демо (http://jsfiddle.net/gh/get/jquery /1.7.2/highslide-software/highcharts.com/tree/master/samples/maps/mapnavigation/doubleclickzoomto/), и он отключил все масштабирование. – wergeld

ответ

0

Попробуйте демо

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) { 
 

 
    // Initiate the chart 
 
    Highcharts.mapChart('container', { 
 

 
    title: { 
 
     text: 'Zoom in on country by double click' 
 
    }, 
 

 
    mapNavigation: { 
 
     enabled: false, 
 
    }, 
 

 
    colorAxis: { 
 
     min: 1, 
 
     max: 1000, 
 
     type: 'logarithmic' 
 
    }, 
 

 
    series: [{ 
 
     data: data, 
 
     mapData: Highcharts.maps['custom/world'], 
 
     joinBy: ['iso-a2', 'code'], 
 
     name: 'Population density', 
 
     states: { 
 
     hover: { 
 
      color: '#a4edba' 
 
     } 
 
     }, 
 
     tooltip: { 
 
     valueSuffix: '/km²' 
 
     } 
 
    }] 
 
    }); 
 
});
#container { 
 
    height: 500px; 
 
    min-width: 310px; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.loading { 
 
    margin-top: 10em; 
 
    text-align: center; 
 
    color: gray; 
 
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/maps/highmaps.js"></script> 
 
<script src="https://code.highcharts.com/maps/modules/data.js"></script> 
 
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
 
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script> 
 

 

 
<div id="container" style="max-width: 1000px"></div>

jsfiddle демо: http://jsfiddle.net/geogeorge/ssh63xhb/

 Смежные вопросы

  • Нет связанных вопросов^_^