条形图中的stackLabels格式化程序中的X轴值答案

【问题标题】：X axis value in stackLabels Formatter in bar highchart条形图中的stackLabels格式化程序中的X轴值
【发布时间】：2018-09-06 08:52:06
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript highcharts bar-chart

【解决方案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/

【讨论】：