Как добавить данные на пользовательскую карту HighChart HighMaps? joinBy?

Я создал пользовательскую карту, используя 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 ответ

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

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 a numerical value for this path
 }

2.) Отделите свою mapData data от ваших 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"
 }
 ...
}]

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

licensed under cc by-sa 3.0 with attribution.