javascript - highcharts 热图元素不透明度变为 0

Question

我在我的应用程序中使用 Highcharts 库的 Heat Map，我开始面临一个奇怪的场景。 map 没有显示一些行数据，请看下面的截图:

当我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'
                }
            }]

        });

为什么 map 会将整个行元素的不透明度设置为 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 出现问题。

希望对大家有帮助。