在高层图中的堆积列图中显示顶部的数据标签 [英] Show data labels on top in stacked column graph in highcharts

问题描述

是否可以在堆栈图的列顶部显示数据标签？
Fiddle

Is it possible to show datalabels on top of columns in stacked graph ? Fiddle is here

I want to show the labels on the top of column.

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

EDIT

Basically I want to show each column as percent show I kept stacked columns , One in gray with value fixed as 100 and one in orange to show percent.

I want final output something which is similar to

解决方案

You can use a loop over each point and translate position by attr() function.

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

Example: http://jsfiddle.net/sbochan/L02awbfe/7

这篇关于在高层图中的堆积列图中显示顶部的数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！