(Highcharts)如何使数据标签消失，如果有，更高的列

我认为这将是最简单的使用point.dataLabels.enabled选项。在呈现图表之前对数据进行预处理，以确定哪些点应该显示值，请参见:http://jsfiddle.net/9f1maj3x/

和代码:

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];
}

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]);

和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
    }]

可以使用

chart.yAxis[0].max;

或

this.dataMax

获取最大值。要比较，在formatter函数中比较两者并返回较大的一个。

你可以为dataLabel编写一个格式化程序，检查它是否是yAxis的最高值，下面是API文档:http://api.highcharts.com/highcharts plotOptions.series.dataLabels.formatter

注释后:您可以从图表对象中取出数据，并使用格式化器选择最大的数据，请参阅:http://jsfiddle.net/7zc5peyf/1/

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

数据标签代码:

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

我的解决方案是:

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