基于条件隐藏热力图数据标签

Question

如何根据条件隐藏热图的数据标签，即我想隐藏所有等于0或小于50的数据标签。由于Highcharts api存在一个bug，每当我恢复浏览器时，0会以异常顺序显示出来。 Bug Link 目前，我找到了一个解决方法，将0替换为'0'，但我不想在热图上显示它。这是jsfiddle的链接 jsfiddle，在fiddle中它可以工作，但在应用程序中实现时会复制该错误。

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,
            plotBackgroundColor: {
                linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0.03, 'rgb(247, 88, 45)'],
                    [0.5, 'rgb(255, 224, 80)'],
                    [0.67, 'rgb(54, 64, 207)'],
                    [0.99, 'rgb(13, 163, 35)'],
                    [1, 'rgb(217, 186, 50']
                ]
            }
        },


        title: {
            text: 'Sales per employee per weekday'
        },

        xAxis: {
            categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
        },

        yAxis: {
            categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
            title: null
        },

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

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

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

        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [[0,0,0],[0,1, 0],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]],
            dataLabels: {
                enabled: true,
                color: 'black',
                style: {
                    textShadow: 'none'
                }
            }
        }]

    });
});

我正在使用Jasper Studio，解决方法片段是

series.dataLabels.formatter:{function(){ if(this.point.value == 0) { return '0';} else { return this.point.value;}}}

- GeekExplorer

Answer 1

最简单的方法是使用 数据标签格式化函数，它允许添加条件。

    plotOptions:{
        series:{
            dataLabels:{
                formatter:function(){

                    if(this.point.value >=50)
                        return this.point.value;
                }
            }
        }
    },

例子：http://jsfiddle.net/4aqhB/246/

- Sebastian Bochan

---

你好Sebastian，我之前尝试过这个解决方案，这是一个下钻图表，所以当我点击空白区域/单元格时，它会给我一个“null uri”异常。我在jasper studio中使用它。所以我想到的解决方法是，在条件不满足时显示标签，并使标签颜色透明/无色...这样就不会给我那个异常了... - GeekExplorer

是的，Sebastian，我已经这样做了，我得到的异常来自Jasper。因此，解决方法是根据条件呈现数据标签，并使数据标签透明。我无法在jsfiddle中复制相同的异常...所以你能帮忙根据条件使“数据标签透明”吗？ - GeekExplorer

fiddle，看一下它就可以了解我想要实现的内容。 - GeekExplorer