2015-04-16 2 views
0

H,Остановившись только выбранные регионы highmaps

Мы пытаемся использовать следующие highmaps,

http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/in/custom/in-all-disputed 

Меня беспокоит то, что мы хотим карту, чтобы показать имена только в регионах, которые мы хотим, и не все регионы, как это происходит в настоящее время. Мы хотим, чтобы имена таких регионов, как Дели, Махараштра, были отображены и не все.

$(function() { 
 

 
    // Prepare demo data 
 
    var data = [ 
 
     { 
 
      "hc-key": "in-an", 
 
      "value": 0 
 
     }, 
 
     { 
 
      "hc-key": "in-wb", 
 
      "value": 1 
 
     }, 
 
     { 
 
      "hc-key": "in-ld", 
 
      "value": 2 
 
     }, 
 
     { 
 
      "hc-key": "in-5390", 
 
      "value": 3 
 
     }, 
 
     { 
 
      "hc-key": "in-py", 
 
      "value": 4 
 
     }, 
 
     { 
 
      "hc-key": "in-3464", 
 
      "value": 5 
 
     }, 
 
     { 
 
      "hc-key": "in-mz", 
 
      "value": 6 
 
     }, 
 
     { 
 
      "hc-key": "in-as", 
 
      "value": 7 
 
     }, 
 
     { 
 
      "hc-key": "in-pb", 
 
      "value": 8 
 
     }, 
 
     { 
 
      "hc-key": "in-ga", 
 
      "value": 9 
 
     }, 
 
     { 
 
      "hc-key": "in-2984", 
 
      "value": 10 
 
     }, 
 
     { 
 
      "hc-key": "in-jk", 
 
      "value": 11 
 
     }, 
 
     { 
 
      "hc-key": "in-hr", 
 
      "value": 12 
 
     }, 
 
     { 
 
      "hc-key": "in-nl", 
 
      "value": 13 
 
     }, 
 
     { 
 
      "hc-key": "in-mn", 
 
      "value": 14 
 
     }, 
 
     { 
 
      "hc-key": "in-tr", 
 
      "value": 15 
 
     }, 
 
     { 
 
      "hc-key": "in-mp", 
 
      "value": 16 
 
     }, 
 
     { 
 
      "hc-key": "in-ct", 
 
      "value": 17 
 
     }, 
 
     { 
 
      "hc-key": "in-ar", 
 
      "value": 18 
 
     }, 
 
     { 
 
      "hc-key": "in-ml", 
 
      "value": 19 
 
     }, 
 
     { 
 
      "hc-key": "in-kl", 
 
      "value": 20 
 
     }, 
 
     { 
 
      "hc-key": "in-ap", 
 
      "value": 21 
 
     }, 
 
     { 
 
      "hc-key": "in-ka", 
 
      "value": 22 
 
     }, 
 
     { 
 
      "hc-key": "in-mh", 
 
      "value": 23 
 
     }, 
 
     { 
 
      "hc-key": "in-or", 
 
      "value": 24 
 
     }, 
 
     { 
 
      "hc-key": "in-dn", 
 
      "value": 25 
 
     }, 
 
     { 
 
      "hc-key": "in-dl", 
 
      "value": 26 
 
     }, 
 
     { 
 
      "hc-key": "in-hp", 
 
      "value": 27 
 
     }, 
 
     { 
 
      "hc-key": "in-rj", 
 
      "value": 28 
 
     }, 
 
     { 
 
      "hc-key": "in-up", 
 
      "value": 29 
 
     }, 
 
     { 
 
      "hc-key": "in-ut", 
 
      "value": 30 
 
     }, 
 
     { 
 
      "hc-key": "in-jh", 
 
      "value": 31 
 
     }, 
 
     { 
 
      "hc-key": "in-ch", 
 
      "value": 32 
 
     }, 
 
     { 
 
      "hc-key": "in-br", 
 
      "value": 33 
 
     }, 
 
     { 
 
      "hc-key": "in-sk", 
 
      "value": 34 
 
     }, 
 
     { 
 
      "hc-key": "in-tn", 
 
      "value": 35 
 
     } 
 
    ]; 
 

 
    // Initiate the chart 
 
    $('#container').highcharts('Map', { 
 

 
     title : { 
 
      text : 'Highmaps basic demo' 
 
     }, 
 

 
     subtitle : { 
 
      text : 'Source map: <a href="http://code.highcharts.com/mapdata/countries/in/custom/in-all-disputed.js">India with disputed territories</a>' 
 
     }, 
 

 
     mapNavigation: { 
 
      enabled: true, 
 
      buttonOptions: { 
 
       verticalAlign: 'bottom' 
 
      } 
 
     }, 
 

 
     colorAxis: { 
 
      min: 0 
 
     }, 
 

 
     series : [{ 
 
      data : data, 
 
      mapData: Highcharts.maps['countries/in/custom/in-all-disputed'], 
 
      joinBy: 'hc-key', 
 
      name: 'Random data', 
 
      states: { 
 
       hover: { 
 
        color: '#BADA55' 
 
       } 
 
      }, 
 
      dataLabels: { 
 
       enabled: true, 
 
       format: '{point.name}' 
 
      } 
 
     }] 
 
    }); 
 
});
#container { 
 
    height: 500px; 
 
    min-width: 310px; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 
.loading { 
 
    margin-top: 10em; 
 
    text-align: center; 
 
    color: gray; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/maps/highmaps.js"></script> 
 
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script> 
 
<script src="http://code.highcharts.com/mapdata/countries/in/custom/in-all-disputed.js"></script> 
 

 
<div id="container"></div>

С уважением, Ayush

+0

этот вопрос - непонятный ... просьба пояснить подробности. Вы имеете в виду, когда парят регионы, что не все из них становятся зелеными? – Dwza

+0

@Dwza. Мы обеспокоены тем, что мы хотим, чтобы на карте отображались имена только для регионов, которые мы хотим, и не для всех регионов, как сейчас. Мы хотим, чтобы имена таких регионов, как Дели, Махараштра, были отображены и не все. –

ответ

1

Я иллюстрируют два подобных способа сделать это, в зависимости от количества очков, которые вы хотите, чтобы показать/не показывать заголовок.

Вы можете указать имя самостоятельно, но только для точек, которые вы хотите показать, а затем измените series.dataLabels.format, чтобы вместо этого использовать это имя. Это лучше всего подходит для отображения нескольких имен или пользовательских имен. Например (JSFiddle):

var data = [ 
    { 
     "hc-key": "in-an", 
     "value": 0, 
     "name": "My name" 
    }, 
    //... 
]; 

$('#container').highcharts('Map', { 
    //... 

    series : [{ 
     //... 
     dataLabels: { 
      enabled: true, 
      format: '{point.options.name}' 
     } 
    }] 
}); 

В качестве альтернативы, используйте логическое значение в вашем data массиве, чтобы указать, что вы хотите, чтобы скрыть это имя и использовать formatter, чтобы скрыть их. Это лучше всего подходит для отображения большинства имен по умолчанию и скрытия нескольких. Например (JSFiddle):

var data = [ 
    { 
     "hc-key": "in-an", 
     "value": 0, 
     "hide-name": true 
    }, 
    //... 
]; 

$('#container').highcharts('Map', { 
    //... 

    series : [{ 
     //... 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       if(this.point.options["hide-name"]) 
        return; 
       return this.point.name; 
      } 
     } 
    }] 
}); 

Обратите внимание, что некоторые названия метки скрыты без указания его здесь. Это связано с тем, что по умолчанию allowOverlap установлен на false. Просто добавьте series.dataLabels.allowOverlap: true, чтобы показать перекрывающиеся метки.

Смежные вопросы