Question

我遇到了一个问题，即当启用了反转时，我的yAxis上没有显示stackLabels。见小提琴; https://jsfiddle.net/mattscotty/vhv8p77v/2/

$(function () {
    var chart = new Highcharts.chart( {
        chart: {
                renderTo :'container',
            type: 'column'
        },
        title: {
            text: 'Stacked bar chart'
        },
        exporting:{enabled:false},
        credits:{enabled:false},
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            min: 0,
            max:100,
            reversed:true, //Removing reversed fixes stack labels issue
            title: {
                text: null
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        plotOptions:{
                column:{
                    stacking:'normal'
            }
        },
        series: [{
            name: 'Category I',
            data: [
                [Date.UTC(2014, 5, 14), 20],
                [Date.UTC(2014, 5, 15), 30],
                [Date.UTC(2014, 5, 16), 25],
                [Date.UTC(2014, 5, 19), 10],
                [Date.UTC(2014, 5, 20), 15]
            ]
        }, {
            name: 'Category II',
            data: [
                [Date.UTC(2014, 5, 14), 25],
                //[Date.UTC(2014, 5, 15), 10],
                [Date.UTC(2014, 5, 16), 35],
                [Date.UTC(2014, 5, 19), 25],
                [Date.UTC(2014, 5, 20), 5]
            ]
        }, {
            name: 'Category III',
            data: [
                [Date.UTC(2014, 5, 14), 10],
                [Date.UTC(2014, 5, 15), 20],
                [Date.UTC(2014, 5, 16), 35],
                //[Date.UTC(2014, 5, 19), 25],
                [Date.UTC(2014, 5, 20), 15]
            ]
        }]
    });
});

删除＆＃39;反转＆＃39;来自yAxis，你会发现它运作良好，有没有人有工作或建议？

提前致谢。

Answer 1

我查看了API文档（请参阅http://api.highcharts.com/highcharts#yAxis.stackLabels）并找到了可能对您有用的内容。

尝试将verticalAlign: bottom添加到您的stackLabels属性中。这会将您的标签推到列的内部底部。如果您愿意，还可以向y添加一个值，以便将它们直接移到列下。

我很好奇为什么你选择以这种方式显示你的专栏，因为这个展示通常表示负值。

我希望这对你有所帮助！

stackLabels: {
    enabled: true,
    style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    },
    // verticalAlign puts the stack labels at the bottom
    verticalAlign: 'bottom',
    // the y value moves the label outside the stack; 
    // note that "15" or higher in your fiddle will push it off the chart altogether
    y: 12
}

Answer 2

如果您希望标签仍显示在轴的0标记处，您可以：

填充轴，使绘图区域中有空格，使标签可见（JSFiddle）：

yAxis: {
    min: -10, // Now there is space in the plot area for the labels to show
    // ...
}

通过设置crop值（JSFiddle），允许堆栈标签显示在绘图区域之外：

yAxis: {
    stackLabels: {
        crop: false, // Now the labels ignore being outside the plot area
        // ...
    }
}

如果您希望它们显示在列的顶部，我建议@brightmatrix详细介绍verticalAlign和y方法。

Highcharts stack column stackLabels在轴反转时不显示

2 个答案: