highcharts heatmap items opacity变为0

Question

我在我的应用中使用Heat Map Highcharts库，我开始面对一个奇怪的场景。地图不显示某些行数据，请看下面的屏幕截图：

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

我的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？

Answer 1

由于图表的高度不足，此问题仅在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中的问题。

希望它有所帮助。