Highcharts：只显示地图的一部分

Question

我在 HighCharts 中使用地图，有时我需要只显示地图的一部分，而不是整个地图。我想我可以通过放大地图的一部分来手动执行此操作，但理想情况下我想指定一个带有 lat/lon 坐标的边界框。我确信这一定是可能的 — API 中提到了 mapTransforms，但我不知道如何使用它。 https://api.highcharts.com/highmaps/chart.mapTransforms

在我的情况下，最好的办法是让 HighCharts 仅显示带有数据的地图部分 — API 中有一个选项可以不显示所有区域 (https://api.highcharts.com/highmaps/series.map.allAreas)，但这这不是我想要的。该选项根本不会渲染没有数据的地图部分，我绝对不想这样做。

这里有一个官方 JSFiddle 的例子：

https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/world-continents

// 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}'
        }
    }]
});

我该怎么做才能让初始地图加载到例如主要欧洲？

感谢任何可以提供帮助的人！

Answer 1

查看文档，您可以在其中找到示例：https://api.highcharts.com/class-reference/Highcharts.MapView#setView

不过我认为对于您的情况，您应该使用 zoomBy 功能：https://api.highcharts.com/class-reference/Highcharts.MapView#zoomBy

Answer 2

您可以使用 zoomTo() 来放大数据的特定点。

我修改了一些东西

mapData = Highcharts.maps["custom/world-continents"].features 这是来自您的数据 js 的数据。这为地图提供了相关数据
添加了一个loadto函数，你可以在任何地方调用它，这只是为了演示，我试图在图表下调用它但没有成功。因此您可以使用文档加载或就绪或图表加载后。
chart.get('EU').zoomTo() 这里的图表是变量，EU“大写”是地图数据中的数据点。你可以使用任何大陆 AS AF 等

代码

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()

您可以复制这些部分，它将在 fiddle 中使用。

Highcharts：只显示地图的一部分

Highcharts: only show part of a map

javascript

highcharts