Question

如何基于条件隐藏热图的数据标签，即我想隐藏所有（== 0或<50）的数据标签。由于Highcharts api中存在一个错误，当我恢复浏览器时，零点会以异常的顺序显示。 Bug Link

到目前为止，我找到了一个解决方法，将0替换为＆＃39; 0＆＃39;但我不想在热图上显示。这是小提琴jsfiddle，它在工作中起作用，但在应用程序上实现时，它会复制该错误。

$(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;}}}

Answer 1

简单的方法是使用datalabels formatter来添加条件。

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

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

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

根据条件隐藏热图数据标签

1 个答案: