Question

对于第二个提琴，我看不到第二个堆栈中的绿色条，即X轴为Q3 19时。我一直在尝试调试一段时间，但没有任何线索。请帮忙。我认为可能是由于堆栈中的值相同，并且正在使用minPointLength，而Highcharts API变得混乱了。

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

       marginBottom: 50,
       marginTop: 150,
       height: 700,

       events: {
         load: function() {
            var stacks = this.yAxis[0].stacks.column,
            stack,
            point;

           for(var prop in  this.yAxis[0].stacks.column) {
                stack = stacks[prop];
             if (stack.total === 0) {
               this.series.forEach(function(series) {
                 point = series.points.find((point) => point.x === stack.x);
                 if(point) {
                  point.graphic.hide();
                 }

               }, this);
             }
           }
         }
       }


     },
     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: false,
         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, 3, 40, 70],
       pointWidth: 30,

     }, {
       name: 'FTE-CapEx',
       data: [null, 2, 30, 20],
       pointWidth: 30
     }, {
       name: 'AWF-OpEx',
       data: [null, 4, 40, 20],
       pointWidth: 30
     }, {
       name: 'AWF-CapEx',
       data: [null, 4, 40, 20],
       pointWidth: 30
     }, {
       name: 'HW/SW',
       data: [null, 4, 40, 20],
       pointWidth: 30
     }, {
       name: 'Other',
       data: [null, 4, 40, 20],
       pointWidth: 30
     }].map(function(series) {
       series.data = series.data.map((val) => val === null ? 0 : val);
       return series;
     })
   });
 });

Answer 1

在您的图表中，配置minPointLength引起了问题。它限制了钢筋的高度，因此存在高图表的计算问题。

plotOptions: {
   ...
   series: {
     /* minPointLength: 20, */
     pointWidth: 30
   }
 },

此处删除minPointLength解决了此问题，绿色条现在可见。

请查看minPointLength here

高图表堆栈图形堆栈不可见

1 个答案: