Question

是否可以在堆叠图中的列顶部显示数据标签？小提琴是here

我想在列顶部显示标签。

$(document).ready(function(){
   var test = [100,0,0,0,0];
   plotDataGroupedByAge(test);
})

function plotDataGroupedByAge(data)
{
   $('#graph_agerange').highcharts({
        chart: {
            type: 'column',
            backgroundColor:'#EFEFEF'
        },
        title: {
            align : "left",
            style:{
               'color':'#26DBA9',
               fontSize   : '20',
               fontWeight :'bold'
            },
            text: 'Age Range'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '15-30',
                '30-45',
                '45-60',
                '60-75',
                '75+',
            ],
            labels: {
                  style: {
                        fontSize   : '15',
                        fontWeight :'bold'
                     }
              },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',  
            minorTickLength: 0,  
            gridLineWidth: 0,
            tickColor: '#EFEFEF',
        },
        yAxis: {
            max: 100,
            title: {
                text: ''
            },
             labels: {
                  enabled: false
              },
                stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                }
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0
        },
        credits:false,

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                stacking: 'normal',     
                pointWidth: 45
            },

        },
        series: [{
                  name: '',
                  data: [100, 100, 100, 100,100],
                  color:'#E1E3E3',
                  showInLegend: false
                },
                {
                  name: '',
                  data: data,
                  color:'#FE9B00',
                  dataLabels:{enabled:true},
                  showInLegend: false,               
                }
             ]
    });
}

修改

基本上我想将每列显示为百分比显示我保持堆积列，一个灰色，值固定为100，一个橙色显示百分比。

我想要最终输出类似于

的东西

enter image description here

Answer 1

您可以在每个点上使用循环并通过attr（）函数转换位置。

    var max = chart.yAxis[0].toPixels(chart.series[0].data[0].y, true);

    $.each(chart.series[1].data, function (i, d) {
        d.dataLabel.attr({
            y: max - 20
        });
    });

示例：http://jsfiddle.net/sbochan/L02awbfe/7

Answer 2

比功能更简单，您只需将verticalAlign property设置为顶部，然后将y property设置为-20。

将verticalAlign设置为“top”会将数据标签移向列的顶部，但它仍然在列本身内。但是，这与所有列的相对位置相同，因此将y设置为-20会将数据标签向上移动20，将其放在列的正上方。您可以根据需要调整y值。

这对我来说也适用于带有折线图叠加的堆积柱形图。我每列有一个数据标签，显示每列的{point.stackTotal}。

Answer 3

这对你的例子没有用，但它确实适用于我的栏目范围，我试图做同样的事情而且它更容易，所以我想我会添加它供人们在尝试搞乱自定义之前尝试格式。

添加yAxis属性并将其设置为true对我有用。不幸的是，当你在小提琴中尝试它时，它并没有在这个特定的例子中工作。

yAxis:{
  opposite: true,
}

在高层图表中的堆积柱形图中显示数据标签

3 个答案: