如何将数据添加到自定义 HighChart 的 HighMaps 地图？加入？

Question

我使用 Inkscape 创建了一个自定义地图，如 HighMaps 文档页面所述：http://www.highcharts.com/docs/maps/custom-maps

第 16 步之前的一切似乎都很顺利。

第 16 步说剩下要做的就是添加数据或使用 MapData 选项，这就是我苦苦挣扎的地方。

如何将地图中的自定义形状链接到数据点？在 JoinBy 中使用形状名称？

http://jsfiddle.net/GeertClaes/aWJ2D/

$(function () {

    // Initiate the chart
    $('#container').highcharts('Map', {
        title:{text:''},
        subTitle:{text:''},
        credits:{enabled:false},
        legend:{enabled: false},

        series:         
        [
            {
                "type": "map",
                "data": [
                    {
                        "name": "Status1-CurrentPeriod",
                        "path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z"
                    },
                    {
                        "name": "Status1-Period-1",
                        "path": "M0,-684,1,-633C15,-635,26,-646,26,-658,26,-672,14,-682,0,-684z"
                    },
                    {
                        "name": "Status2-CurrentPeriod",
                        "path": "M178,-695,178,-682C179,-682,180,-683,181,-683,193,-683,203,-672,203,-658,203,-645,193,-634,181,-634,180,-634,180,-634,179,-634L179,-622,286,-622,285,-694,178,-695z"
                    },
                    {
                        "name": "Status2-Period-1",
                        "path": "M178,-684,179,-633C193,-635,204,-646,204,-658,204,-672,193,-682,178,-684z"
                    },
                    {
                        "name": "Status3-CurrentPeriod",
                        "path": "M357,-695,357,-682C358,-682,359,-683,360,-683,372,-683,382,-672,382,-658,382,-645,372,-634,360,-634,359,-634,359,-634,358,-634L358,-622,465,-622,464,-694,357,-695z"
                    },
                    {
                        "name": "Status3-Period-1",
                        "path": "M357,-684,358,-633C372,-635,383,-646,383,-658,383,-672,372,-682,357,-684z"
                    },
                    {
                        "name": "Status4-CurrentPeriod",
                        "path": "M535,-695,535,-682C536,-682,537,-683,538,-683,550,-683,560,-672,560,-658,560,-645,550,-634,538,-634,537,-634,536,-634,536,-634L536,-622,643,-622,642,-694,535,-695z"
                    },
                    {
                        "name": "Status4-Period-1",
                        "path": "M535,-684,536,-633C550,-635,561,-646,561,-658,561,-672,549,-682,535,-684z"
                    },
                    {
                        "name": "Status5-CurrentPeriod",
                        "path": "M713,-695,713,-682C714,-682,715,-683,716,-683,728,-683,738,-672,738,-658,738,-645,728,-634,716,-634,715,-634,715,-634,714,-634L714,-622,821,-622,820,-694,713,-695z"
                    },
                    {
                        "name": "Status5-Period-1",
                        "path": "M713,-684,714,-633C728,-635,739,-646,739,-658,739,-672,728,-682,713,-684z"
                    },
                    {
                        "name": "Status6-CurrentPeriod",
                        "path": "M892,-695,892,-682C893,-682,894,-683,895,-683,907,-683,917,-672,917,-658,917,-645,907,-634,895,-634,894,-634,893,-634,893,-634L893,-622,1000,-622,999,-694,892,-695z"
                    },
                    {
                        "name": "Status6-Period-1",
                        "path": "M892,-684,893,-633C907,-635,918,-646,918,-658,918,-672,907,-682,892,-684z"
                    }
                ]
            }
        ]        
    });
});

Answer 1

有几种方法：

1.) 最简单的方法是使用value 属性将其添加到您的数据中。不鼓励这样做，因为它会硬编码地图路径的值：

"data": [
    {
        "name": "Status1-CurrentPeriod",
        "path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z",
        "value": 6 // <-- here's a numerical value for this path
     }

2.) 将您的 mapData 与您的 data 分开。使用joinBy 将mapData 中的值映射到data 中的值。这使您的地图路径可重复使用：

 series: [{
    "type": "map",
    "joinBy": ['name', 'name'], // <- mapping 'name' in data to 'name' in mapData
    "data": [
        {
            "name": "Status1-CurrentPeriod",
            "value": 6
        }                    
     ],
    "mapData": [
        {
            "name": "Status1-CurrentPeriod",
            "path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z"
        }
    ...
}]

更新小提琴here。