javascript - 条形 Highcharts 中 stackLabels Formatter 中的 X 轴值

Question

我想在条形图顶部显示自定义标签。

下面是我的 stacklabel 代码，这里的问题是我想在 stacklabel 的格式化程序中使用堆栈的类别名称，我该如何访问它。

stackLabels: {
                enabled: true,
                align: 'right',
                style: {
                  color: 'green',
                  fontWeight: 'bold'
                }


                formatter: function () {
                   return usedInfoArray[category name];

                 },


                align: 'right'
              }
            },

/**********************************************************/


    Highcharts.chart('chartContainer', {
            chart: {
              type: 'bar'
            },
            title: {
              text: ''
            }

            legend: {
              maxHeight: 40,
              itemWidth: 100,
              itemStyle: {
                color: '#FFF',
                fontWeight: 'bold',
                fontSize: 10
              }
            },
            xAxis: {
              categories: categories
            },
            yAxis: {
              min: 0,
              title: {
                text: ''
              },
              stackLabels: {
                enabled: true,
                align: 'right',
                style: {
                  color: 'green',
                  fontWeight: 'bold'
                }


                formatter: function () {
                   return usedInfoArray[xaxis value];

                 },


                align: 'right'
              }
            },

            plotOptions: {
              series: {
                stacking: 'normal',
                pointWidth: 10,
                groupPadding: 0.2


              },
              dataLabels: {
                formatter: function () {
                  var dataLabel = this.x;
                  if (dataLabel.length > 10) {
                    dataLabel = dataLabel.substring(0, 10);
                  }
                  return dataLabel;
                },
                enabled: true
              }
            },
            tooltip: {
              headerFormat: '<b>{point.x}</b><br/>',
              pointFormat: function () {
                return usedInfoArray[point.x];
              }
            },
            series: [{
              name: 'Free',
              'color': '#FFCC66',
              data: freeData
            }, {
              name: 'Used',
              'color': '#663399',
              data: usedData
            }]
          });

Answer 1

您可以通过图表间接访问x轴类别名称:

yAxis: {
  stackLabels: {
    enabled: true,
    align: 'right',
    formatter: function() {
      var xValue = this.x,
        xAxis = this.axis.chart.xAxis[0];

      return xAxis.categories[xValue];
    }
  }
}

现场演示:https://jsfiddle.net/BlackLabel/g68xphmf/