highcharts热图项目不透明度变为0

我使用Heat MapHighcharts图书馆在我的应用程序，我已经开始面临一个奇怪的场景。地图不显示某些行的数据，PLZ看看下面的屏幕截图：highcharts热图项目不透明度变为0

enter image description here

我在列中看到数据时，我Inspect Element细胞。我注意到所有的行单元格的不透明度设置为0.在chrome中将其更改为1显示该项目。

enter image description here

我的JS代码如下：

$highchart1.highcharts({ 
      exporting: false, 
      credits: false, 

      chart: { 
       type: 'heatmap', 
       marginTop: 40, 
       marginBottom: 120 
      }, 


      title: { 
       align: 'left', 
       text: 'Some chart title', 
       style: { color: 'red' } 
      }, 

      xAxis: { 
       categories: pillarOrClusters, 
       labels: { 
        style: { color: '#000' } 
       } 
      }, 

      yAxis: { 
       categories: locations, 
       title: summary.locationType, 
       labels: { 
        style: { color: '#000' } 
       } 
      }, 

      colorAxis: { 
       min: 0, 
       minColor: '#FFFFFF', 
       maxColor: Highcharts.getOptions().colors[0] 
      }, 

      legend: { 
       enabled: false 
      }, 

      tooltip: { 
       formatter: function() { 
        return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> has <br><b>' + 
         this.point.value + '</b> items in <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; 
       } 
      }, 

      series: [{ 
       name: 'Pillars per' + summary.locationType, // Loaded from Service 
       borderWidth: 1, 
       data: data, 
       dataLabels: { 
        enabled: true, 
        color: '#000000' 
       } 
      }] 

     });

为什么会在地图设置不透明度为0整行的元素？

来源

2015-04-04 Aamir

您可以使用jsfiddle.net重新编制问题 – 2015-04-04 20:58:06

将'allowOverlap'选项设置为true。请参阅[API]（http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.allowOverlap）。 – 2015-04-07 09:08:25

感谢@PawełFus，但问题是因为图表高度不足，因为它的高度会根据yAxis数据增加。所以我会动态计算图表高度，然后在运行时设置它。 Plz在下面发布的答案中查看我的解决方法。没有内置的东西来确定yAxis数据值的数量，然后自动计算图表高度？ – Aamir 2015-04-07 09:40:14

由于图表高度不足，此问题仅在Chrome中提出，有时在IE中提出。我对yAxis计算图表高度按项目如下：

//locations is an array of strings to be shown on yAxis 
var chartHieght = locations.length * 35; 
if (chartHieght < 350) chartHieght = 350;

然后将其设置如下：

 chart: { 
       type: 'heatmap', 
       marginTop: 40, 
       height: chartHieght, 
       marginBottom: 130, 
       backgroundColor: '#F0F0F0', 
       borderColor: '#E5E5E5', 
       borderWidth: 2, 
       borderRadius: 4, 
       events: { 
        load: function() { 
         //THIS WAS A DIRTY WORKAROUND I WAS USING TO MAKE IT RENDER PROPERLY 
         /* $(".highcharts-data-labels g").attr("opacity", 1); */ 
        } 
       } 
      }

开启高度计算为locations.length * 30开始呈现在Chrome同样的问题。 locations.length * 25也会导致IE中的问题。

希望它可以帮助别人。

来源

2015-04-07 09:32:53 Aamir

highcharts热图项目不透明度变为0

回答

相关问题