Question

我有一个图表，其属性column.grouping设置为false，我想只在最高的列上显示数据标签。 Here is an example

dataLabels: {
    enabled: true
}

我已经尝试了几个小时的解决方案，我将不胜感激。

Answer 1

您可以为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;
    }
  }
}

Answer 2

你可以使用

chart.yAxis[0].max;

或

this.dataMax

获得最大价值。比较一下，在格式化函数中比较两者并重新计算较大的一个。

Answer 3

我认为使用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
    }]

Answer 4

这是我的解决方案：

$(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/

（Highcharts）如果有更高的列，如何使dataLabel消失？

4 个答案: