Question

我在显示堆栈标签值（直方图）时遇到问题，实际上不显示堆栈的列标签，当列的总和在yAxis上具有接近的值时，我上传了（屏幕截图和代码）：

 Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',

        }
    },
    series: [{
        name: 'John',
        data: [54701, 56762, 42544, 94446, 20473],
        stack: 'x'
    }, {
        name: 'Jane',
        data: [54701, 52762, 36879, 68872, 82761],
        stack: 'y'
    }]
});

Answer 1

这是因为默认情况下为stackLabels.allowOverlap = false。将此属性设置为true，您将看到所有标签：

stackLabels: {
  enabled: true,
  allowOverlap: true,
  rotation: 0,
  style: {
    fontWeight: 'bold',
    fontSize: '9px',
    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
  }
}

演示：

https://jsfiddle.net/BlackLabel/xbp5c61s/

API参考：

https://api.highcharts.com/highcharts/yAxis.stackLabels.allowOverlap

在Highcharts中显示标签堆栈

1 个答案: