stack栏中如何显示stack的个数？

Question

我正在为我的应用程序使用 highcharts，根据我的要求，我需要在列堆栈图中显示堆栈的数量。

我的密码是

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        stackLabels: {
            style: {
                color: 'black'
            },
            enabled: true,
            y: 0,
             formatter: function () {             
                return this.total +"-"+this.touched;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0,
            dataLabels: {
                enabled: false
            }
        }
    },

    series: [{
        data: [129.9, 71.5, 106.4]
    },{
        data: [144.0, null, null]
    },{
        data: [800, null, 135.6]
    }]
});

在 StackLabels 中我使用“this.touched”，但我需要显示可见堆栈的数量

请看下面的例子

Answer 1

不幸的是，它并没有那么简单，因为在

stackLabels.formatter()

函数中没有堆栈中点的总和的属性，并且不可能在这个函数中引用点来计算它。但是，您可以使用

chart.events.render()

回调函数自己将这样的属性添加到标签对象。

Highcharts.chart('container', {
  chart: {
    type: 'column',
        events: {
            render: function() {
                const chart = this;
                
                chart.yAxis.forEach(function(axis) {
                    Object.values(axis.stacking.stacks["column,,,"]).forEach(function(stack, i) {
                        let sum = 0;
                        chart.series.forEach(function(series) {
                            if (series.data[i].y && series.visible) sum++;
                        });
                        stack.sum = sum;
                    });
                })
                chart.render();
            }
        }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
  },
  yAxis: {
    stackLabels: {
      enabled: true,
      formatter: function() {
        return this.sum;
      }
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: false
      }
    }
  },

  series: [{
    data: [129.9, 71.5, 106.4]
  }, {
    data: [144.0, null, null]
  }, {
    data: [800, null, 135.6]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

演示：https://jsfiddle.net/BlackLabel/1seubjon/
API：https://api.highcharts.com/highcharts/chart.events.render

Answer 2

不知道对不对。可能还有另一种更简单的方法。但这适用于您的情况。请检查。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        stackLabels: {
            style: {
                color: 'black'
            },
            enabled: true,
            y: 0,
            formatter: function () {
              let count = 0;
              for (let i=0; i<this.touched; i++) {
                if (this.points[i] !== null) count++;
              }
              return count;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0,
            dataLabels: {
                enabled: false
            }
        }
    },

    series: [{
        data: [129.9, 71.5, 106.4]
    },{
        data: [144.0, null, null]
    },{
        data: [800, null, 135.6]
    }]
});