2015-01-05 1 views
1

Я использовал пример из демо-версии на сайте Highcharts, и только модификации:только одной серии показана

  • измененная карта для world.js
  • комментарии «allAreas» свойство

$(function() { 
 

 

 
    // Instanciate the map 
 
    $('#container').highcharts('Map', { 
 
     chart: { 
 
      spacingBottom: 20 
 
     }, 
 
     title : { 
 
      text : 'Europe time zones' 
 
     }, 
 

 
     legend: { 
 
      enabled: true 
 
     }, 
 

 
     plotOptions: { 
 
      map: { 
 
       //allAreas: false, 
 
       joinBy: ['iso-a2', 'code'], 
 
       dataLabels: { 
 
        enabled: true, 
 
        color: 'white', 
 
        formatter: function() { 
 
         if (this.point.properties && this.point.properties.labelrank.toString() < 5) { 
 
          return this.point.properties['iso-a2']; 
 
         } 
 
        }, 
 
        format: null, 
 
        style: { 
 
         fontWeight: 'bold' 
 
        } 
 
       }, 
 
       mapData: Highcharts.maps['custom/world'], 
 
       tooltip: { 
 
        headerFormat: '', 
 
        pointFormat: '{point.name}: <b>{series.name}</b>' 
 
       } 
 

 
      } 
 
     }, 
 

 
     series : [{ 
 
      name: 'UTC', 
 
      id: 'UTC', 
 
      data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) { 
 
       return { code: code }; 
 
      }) 
 
     }, { 
 
      name: 'UTC + 1', 
 
      data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU', 
 
        'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) { 
 
       return { code: code }; 
 
      }) 
 
     }, { 
 
      name: 'UTC + 2', 
 
      data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) { 
 
       return { code: code }; 
 
      }) 
 
     }, { 
 
      name: 'UTC + 3', 
 
      data: $.map(['RU'], function (code) { 
 
       return { code: code }; 
 
      }) 
 
     }] 
 
    }); 
 
});

Код в JSFiddle Почему видна только одна серия?

ответ

1

Линия, вызывающая проблему, такова: //allAreas: false.

Это объяснение и как зафиксировать его (extract from the Highcharts support forum)

Согласно API, установка allAreas к true сделает все области, так еще один без значения (как нулевое значение). Другой опцией является nullColor, который по умолчанию является оттенком серого и устанавливает цвет, который будет использоваться пустым значением.

Поэтому, если вы установите allAreas в true, то каждая серия будет опираться все области и те, с нулевыми значениями будут заполнены серым цветом (The nullColor). Поскольку более поздние серии имеют более высокие z-index, это поверх других серий, в результате получается серая форма, покрывающая формы .

Если вы хотите установить allAreas к true, но по-прежнему видеть через различных серий, вы должны установить nullColor к прозрачному на:

rgba(0,0,0,0)

Working JSFiddle here