2015-01-05 75 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,設置allAreastrue將呈現所有的 的區域,從而也沒有任何價值的一個(如空值)。另一個 選項是nullColor默認情況下,它是一種灰色陰影,並且設置要由空值使用的顏色 。

因此,如果您設置allAreastrue,則每個系列將繪製 所有區域和那些空值將被填充爲灰色(在 nullColor)。因爲後面的系列有更高的z-index這些是在其他系列之上的 ,導致灰色形狀覆蓋其下的形狀。

如果你想設置allAreastrue,但仍然看到通過 不同的系列,你必須設置nullColor透明:

rgba(0,0,0,0)

Working JSFiddle here