自定义 GeoJSON 地图与 highcharts 地图中的饼图答案

【问题标题】：custom GeoJSON map with pie in highcharts Map自定义 GeoJSON 地图与 highcharts 地图中的饼图
【发布时间】：2020-07-07 11:59:22
【问题描述】：

我在 HighCharts 中使用带有饼图的 GeoJSON 地图有问题，实际上我有一个类型为多边形的几何文件，并显示带有如下数据的地图

var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]

];

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/germany.geo.json', function (geojson) {

// Initiate the chart
Highcharts.mapChart('container', {
    chart: {
        map: geojson
    },

    title: {
        text: 'GeoJSON in Highmaps'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        tickPixelInterval: 100
    },

    series: [{
        data: data,
        keys: ['code_hasc', 'value'],
        joinBy: 'code_hasc',
        name: 'Random data',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.properties.postal}'
        }
    }]
});

});

map with custom GeoJSON

但我们想在此地图中添加额外的图表，例如带有饼图的地图，例如此链接显示带有饼图的地图

Highcharts map with pie

我搜索了所有文档和示例，但没有找到任何显示带有饼图的自定义 GeoJSON 的示例请指导我非常感谢。

【问题讨论】：

标签： javascript dictionary highcharts polygon geojson

【解决方案1】：

恐怕使用自定义 GeoJSON 地图是不可能的。这是我的尝试：https://jsfiddle.net/BlackLabel/d1vxgqt9/，正如您在控制台中看到的那样，错误发生了：https://www.highcharts.com/errors/22/。

但您可以使用 Highcharts 官方地图集合中的地图，一切正常。

地图收藏：https://code.highcharts.com/mapdata/

简化演示：https://jsfiddle.net/BlackLabel/ocx7L6ks/

  series: [{
    mapData: Highcharts.maps['countries/de/de-all'],
    data: data,
    showInLegend: false,
    joinBy: 'hc-key',
    keys: ['hc-key', 'demVotes', 'repVotes', 'libVotes', 'grnVotes',
      'sumVotes', 'value', 'pieOffset'
    ],
    id: 'us-all',
  }]

【讨论】：