Estoy usando un mapa en HighCharts y, a veces, solo necesito mostrar una sección del mapa, no el mapa completo. Creo que podría hacer esto manualmente haciendo zoom en una parte del mapa, pero idealmente me gustaría especificar un cuadro delimitador con coordenadas de latitud/longitud, por ejemplo. Estoy seguro de que esto debe ser posible: en la API se menciona mapTransforms, pero no sé cómo usarlo. https://api.highcharts.com/highmaps/chart.mapTransforms
Lo mejor en mi caso sería que HighCharts solo muestre las partes del mapa con datos; hay una opción en la API para no mostrar todas las áreas ( https://api.highcharts.com/highmaps/series.map.allAreas ) pero esto no es lo que quiero. Esa opción simplemente no representa las partes del mapa sin datos y definitivamente no quiero hacer eso.
Un ejemplo de un JSFiddle oficial está aquí:
// Prepare demo data // Data is joined to map using value of 'hc-key' property by default. // See API docs for 'joinBy' for more info on linking data and map. var data = [ ['eu', 0], ['oc', 1], ['af', 2], ['as', 3], ['na', 4], ['sa', 5] ]; // Create the chart Highcharts.mapChart('container', { chart: { map: 'custom/world-continents' }, title: { text: 'Highmaps basic demo' }, subtitle: { text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.js">World continents</a>' }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, colorAxis: { min: 0 }, series: [{ data: data, name: 'Random data', states: { hover: { color: '#BADA55' } }, dataLabels: { enabled: true, format: '{point.name}' } }] });¿Qué haría para que el mapa inicial se cargue, por ejemplo, principalmente en Europa?
¡Gracias a cualquiera que pueda ayudar con esto!
Eche un vistazo a los documentos, donde puede encontrar el ejemplo: https://api.highcharts.com/class-reference/Highcharts.MapView#setView
Sin embargo, creo que para su caso debería usar la función zoomBy : https://api.highcharts.com/class-reference/Highcharts.MapView#zoomBy
Puede usar zoomTo() para hacer zoom en un punto específico de sus datos.
modifique algunas cosas
Código
var data = [ ['eu', 0], ['oc', 1], ['af', 2], ['as', 3], ['na', 4], ['sa', 5] ]; var mapData = Highcharts.maps["custom/world-continents"].features // Create the chart var chart = Highcharts.mapChart('container', { chart: { map: 'custom/world-continents', }, . . . series: [{ data: data, mapData: mapData, allowPointSelect: true, states: { hover: { color: '#BADA55' } }, dataLabels: { enabled: true, format: '{point.name}' } }] }); function loadto() { chart.get('EU').zoomTo(); } loadto()Puede copiar estas partes, funcionará en el violín.