首页 > 解决方案 > 堆叠柱形图堆叠标签 Highcharts

问题描述

我正在尝试使用 Highcharts 实现堆叠条形图。我面临的问题是:当堆栈的系列数据全部为空时,我想将 0 显示为堆栈标签,但没有任何内容显示为堆栈标签。并将“minPointLength”设置为某个值,堆栈标签与堆栈图重叠。堆栈标签和堆栈之间的距离应该动态变化,但不会发生。这是我的 JSfiddle

https://jsfiddle.net/anandabhishe/6fuffmpt/10/

 $(function() {
   $('#container').highcharts({
     colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
     chart: {
       type: 'column',

       marginBottom: 50,
       marginTop: 150,
       height: 700



     },
     title: {
       text: ''
     },
     xAxis: {

       categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
       width: 700,
       tickmarkPlacement: 'on',
       labels: {
         y: 40,
         style: {
           color: '#333333',
           fontSize: '25',
           fontFamily: 'ProximaNova-Light',
           opacity: '.6'
         },

       }
     },
     yAxis: {
       gridLineWidth: 0,
       min: 0,
       tickInterval: 20,
       title: {
         text: ''
       },
       labels: {
         style: {
           color: '#333333',
           fontSize: '25',
           fontFamily: 'ProximaNova-Light',
           opacity: '.5'
         },
         formatter: function() {
           return '$' + this.value;
         }
       },
       stackLabels: {
         style: {
           color: '#555555',
           fontSize: '25',
           fontFamily: 'ProximaNova-Regular'
         },
         enabled: true,
         formatter:function() {

                                if (this.total < 1000) {
                                    return '$' + this.total;
                                } else {
                                    return '$' + (this.total / 1000).toFixed(2) + 'K';
                                };
                }
       }
     },
     legend: {

       enabled: false,
       width: 600,
       floating: false,
       x: 50,
       align: 'left',
       style: {
         color: '#555555',
         fontSize: '25',
         fontFamily: 'ProximaNova-Regular',
         opacity: '.8'
       },

       borderWidth: 0
     },
     tooltip: {
       enabled: false
     },

     plotOptions: {
       column: {
         stacking: 'normal',
         dataLabels: {
           enabled: false,
           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
         }
       },
       series: {
                            minPointLength: 20,
                            pointWidth: 30
                        }
     },

     series: [{
       name: 'FTE-OpEx   ',
       data: [null, 30, 40, 70],
       pointWidth: 30,

     }, {
       name: 'FTE-CapEx',
       data: [null, 20, 30, 20],
       pointWidth: 30
     }, {
       name: 'AWF-OpEx',
       data: [null, 40, 40, 20],
       pointWidth: 30
     }, {
       name: 'AWF-CapEx',
       data: [null, 40, 40, 20],
       pointWidth: 30
     }, {
       name: 'HW/SW',
       data: [null, 40, 40, 20],
       pointWidth: 30
     }, {
       name: 'Other',
       data: [null, 40, 40, 20],
       pointWidth: 30
     }]
   });
 });

标签: javascripthighchartshighstock

解决方案


推荐阅读