如何将数据添加到自定义HighChart的HighMaps地图?加入? [英] How to add data to a custom HighChart's HighMaps map? joinBy?

问题描述

我按照HighMaps文档页面上的说明使用Inkscape创建了一个自定义地图: http://www.highcharts.com/docs/maps/custom-maps

I created a custom map using Inkscape as described on the HighMaps docs pages at: http://www.highcharts.com/docs/maps/custom-maps

第16步之前的所有操作似乎都很顺利.

Everything up to step 16 seems to go smoothly.

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

Step 16 says that the only remaining thing to do is to add data or use the MapData option and this is where I am struggling.

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

How does one link the custom shapes in the map to data points? Using the shape name in a 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"
                    }
                ]
            }
        ]        
    });
});

推荐答案

有两种方法:

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

1.) The easiest is to add it into your data using the value property. This is discouraged because it hardcodes the value for the map paths:

"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 中的值.这将使您的地图路径可重复使用:

2.) Seperate your mapData from your data. Map the values in mapData to the values in data with a joinBy. This makes your map paths reusable:

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

更新小提琴此处.

这篇关于如何将数据添加到自定义HighChart的HighMaps地图?加入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！