2015-01-05 28 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