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

debugcn 发表于 Dev

盖尔特

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

直到第16步的一切似乎都进行得很顺利。

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

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

$(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"
                    }
                ]
            }
        ]        
    });
});

标记

有两种方法：

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。地图中的值mapData中的值data用joinBy。这使您的地图路径可重复使用：

 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"
        }
    ...
}]

~~在这里更新小提琴。~~

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。