Javascript （Highcharts）如果存在更高的列，如何使数据标签消失？

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

---

我已经尝试了几个小时来寻找解决方案，如果有任何帮助，我将不胜感激。

您可以为dataLabel编写一个格式化程序，检查它是否是该yAxis的最高值，以下是API文档：

注释后：您可以从图表对象中取出数据，并使用格式化程序选择最大的一个，fiddle:

数据标签代码：

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

你可以用

chart.yAxis[0].max;

或

---

以获得最大值。要进行比较，请在formatter函数中比较两者并重新运行较大的一个。

我认为使用point.dataLabels.enabled选项最简单。只需在渲染图表之前预处理数据，即可确定哪些点应显示值，请参见：

和代码：

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

高图表中的示例：

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

以下是我的解决方案：

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

---

您要在最高点显示数据标签，还是要在最高点显示stacklabel？Datalable位于列内，stacklabel位于列的顶部OK，但从api引用来看，可用数据仅来自当前对象，因此如何比较不同系列的数据？将图表制作成一个对象，例如var chart=new Highcharts.chart{…}；实际上，我不确定图表对象在运行时是否已创建，您可以通过将数据移到图表之外来实现，这里有一个不是最好但有效的解决方案：我已经有了与您相同的解决方案，但问题是当您单击图例并隐藏具有最高值的列时，值完全消失，我需要在最高可见列上显示值，这是一个更大的挑战，因为我认为绘制后您无法更改这些值。这与所问的问题也不同，也许可以重新表述您的问题？值得一看系列中的隐藏和显示事件：感谢您的回答，但正如我在Andrew post下所写的，我已经有了解决方案，我想要的是显示最高可见列的值，因此它必须动态更改。但对于最高可见列，您只需要显示一个标签，或者对于同一位置的最高列，如下所示：？对于同一位置的同一列，我必须删除以前的注释，因为这不是正确的解决方案，在您的版本中，如果您要更改利润值，它将不再正常工作。示例：对，请参阅更新的演示：-我希望避免if-else语句；现在好多了，但仍然不正确，好像要隐藏所有列，数据标签仍然可见。

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

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

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