简体   繁体   中英

( Highcharts ) How to make dataLabels disappear if there is, a higher column?

I have a chart which has attribute column.grouping set to false, and I would like to show data labels only on highest columns. Here is an example

dataLabels: {
    enabled: true
}

I have tried to find solution for couple hours now, I would appreciate any help.

You can write a formatter for the dataLabel that checks if it's the highest for that yAxis, here's the API documentation: http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter

After comments: You can take the data out of the chart object and use a formatter to pick the largest one, fiddle: http://jsfiddle.net/7zc5peyf/1/

var em = [150, 73, 20];
var eo = [140, 90, 40];

data label code:

data: em,
dataLabels:{
  enabled: true,
  formatter: function(){
    if(this.y > eo[this.point.index]){
      return this.y;
    }
  }
}

you can use

chart.yAxis[0].max;

or

this.dataMax

to get maximum value. to compare , in formatter function compare both and retrun larger one.

I think it would be the easiest to use point.dataLabels.enabled option. Just preprocess data before rendering the chart, to determine which points should display values, see: http://jsfiddle.net/9f1maj3x/

And code:

function enableLabels(d_1, d_2) {
    // compare two data series and enable dataLabel for a higher column:

    $.each(d_1, function (i, point) {
        if (point > d_2[i]) {
            d_1[i] = {
                dataLabels: {
                    enabled: true
                },
                y: d_1[i]
            }
        } else {
            d_2[i] = {
                dataLabels: {
                    enabled: true
                },
                y: d_2[i]
            }
        }
    });

    return [d_1, d_2];
}

Data example:

var data = [
    [150, 73, 20],
    [140, 90, 40],
    [103.6, 178.8, 198.5],
    [203.6, 198.8, 208.5]
];

var leftColumns = enableLabels(data[0], data[1]),
    rightColumns = enableLabels(data[2], data[3]);

And example in Highcharts:

    series: [{
        name: 'Employees',
        color: 'rgba(165,170,217,1)',
        data: leftColumns[0],
        pointPadding: 0.3,
        pointPlacement: -0.2
    }, {
        name: 'Employees Optimized',
        color: 'rgba(126,86,134,.9)',
        data: leftColumns[1],
        pointPadding: 0.4,
        pointPlacement: -0.2
    }, {
        name: 'Profit',
        color: 'rgba(248,161,63,1)',
        data: rightColumns[0],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.3,
        pointPlacement: 0.2,
        yAxis: 1
    }, {
        name: 'Profit Optimized',
        color: 'rgba(186,60,61,.9)',
        data: rightColumns[1],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.4,
        pointPlacement: 0.2,
        yAxis: 1
    }]

Here is my solution:

$(function () {
var something = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Efficiency Optimization by Branch'
    },
    xAxis: {
        categories: [
            'Seattle HQ',
            'San Francisco',
            'Tokyo']
    },
    yAxis: [{
        min: 0,
        title: {
            text: 'Employees'
        }
    }, {
        title: {
            text: 'Profit (millions)'
        },
        opposite: true
    }],
    legend: {
        shadow: false
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0
        },
        series: {
            events: {
                hide: function () {
                    console.log(this);
                },
                show: function () {
                    console.log(this);
                },
                legendItemClick: function () {
                    for (var i = 0; i < something.series.length; i++) {
                        if (something.series[i].name === this.name) {
                            something.series[i].visible = !this.visible;
                        }
                    }
                    console.log(this.name);
                }
            }
        }
    },
    series: [{
        name: 'Employees',
        color: 'rgba(165,170,217,1)',
        visible: true,
        data: [150, 73, 20],
        pointPadding: 0.3,
        pointPlacement: -0.2,
        dataLabels: {
            enabled: true,
            formatter: function () {
                var index = something.xAxis.categories.indexOf(this.x);
                if ((this.y > something.series[1].data[index]) || !something.series[1].visible) {
                    console.log(something.series.visible);
                    return this.y + '*';
                }
                return '';
            }
        }
    }, {
        name: 'Employees Optimized',
        color: 'rgba(126,86,134,.9)',
        visible: true,
        data: [140, 90, 40],
        pointPadding: 0.4,
        pointPlacement: -0.2,
        dataLabels: {
            enabled: true,
            formatter: function () {
                var index = something.xAxis.categories.indexOf(this.x);
                if ((this.y > something.series[0].data[index]) || !something.series[0].visible) {
                    console.log(something.series.visible);
                    return this.y + '*';
                }
                return '';
            }
        }
    }, {
        name: 'Profit',
        color: 'rgba(248,161,63,1)',
        visible: true,
        data: [193.6, 128.8, 144.5],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.3,
        pointPlacement: 0.2,
        yAxis: 1,
        dataLabels: {
            enabled: true,
            formatter: function () {
                var index = something.xAxis.categories.indexOf(this.x);
                if ((this.y > something.series[3].data[index]) || !something.series[3].visible) {
                    return this.y + '*';
                }
                return '';
            }
        }
    }, {
        name: 'Profit Optimized',
        color: 'rgba(186,60,61,.9)',
        visible: true,
        data: [123.6, 198.8, 208.5],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.4,
        pointPlacement: 0.2,
        yAxis: 1,
        dataLabels: {
            enabled: true,
            formatter: function () {
                var index = something.xAxis.categories.indexOf(this.x);
                if ((this.y > something.series[2].data[index]) || !something.series[2].visible) {
                    console.log(something.series.visible);
                    return this.y + '*';
                }
                return '';
            }
        }
    }]
};
    $('#container').highcharts(something);
});

http://jsfiddle.net/7zc5peyf/4/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM