Блог

Я создал пользовательскую карту с помощью 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"
                    }
                ]
            }
        ]        
    });
});
  

Есть несколько способов:

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

Обновите скрипку здесь.