Highcharts：如何在 stackLabel 格式化程序中的 highcharts 条形图中提供自定义堆栈标签？

Question

在过去的两天里，我一直在努力寻找一种如何提供自定义堆栈标签而不是使用 this.stackTotal 选项的方法。

我的场景是，每个堆栈的标签基本上不取决于每个系列，而是取决于多种因素。因此，客户希望为每个堆叠条的末尾设置一个任意值。到目前为止，我所拥有的是（http://jsfiddle.net/yybLxgkd/），但到目前为止尝试在每个堆叠条的末尾显示自定义标签都没有成功。

我试图通过提供一个名为 QTotal 的系列选项从系列中传入我需要在每个堆栈末尾显示的值，但后来我意识到 stackLabel 不支持 (this.point.series)。所以我试着玩弄并获得至少显示在每个条形末尾的类别名称，但这也完全是徒劳的。

我非常感谢我在尝试解决此问题时所能获得的任何帮助。

再一次，我想要完成的是为每个堆栈显示一个自定义标签，而不是 (this.stackTotal) 选项。

我的逻辑可能是我可以从 stackLabel 格式化程序中为所有类别启动一个循环，这些类别存在并取决于类别 - 显示所需的任意值。

非常感谢，杰瑞

我的代码如下： $(function () {

var categoriesVal = {
    'Term 1':'Term 1',
    'Term 2':'Term 2',
    'Term 3':'Term 3',
    'Term 4':'Term 4',
    'Term 5':'Term 5'        
};
    $('#container').highcharts({
        chart: {
            defaultSeriesType: 'bar',
                    style: {
                                      fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
                                }                       
        },
        title: {
            text: 'Serious AEs',
                    style: {
                    fontSize:'1.2em',
                    fontWeight:'bold'
                    }    
        },
        xAxis: {
            categories: ['Term 1','Term 2','Term 3','Term 4','Term 5'],
              //    lineColor:'#000',
                    lineWidth:.5,
                    tickWidth:.5,
                    tickLength:3,
                    tickColor:'#000',
                    title: {  
        text: '',
        style: {
            color:'#000',
            fontSize:'.8em'
        }
    },
    labels: {
        style: {
            fontWeight:'bold'
        }
    }
},
        yAxis: {
            min: 0,
                    //lineColor:'#000',
                    lineWidth:.5,
                    tickWidth:.5,
                    tickLength:3,
                    tickColor:'#000',
                    //gridLineWidth:0,
                    //gridLineColor:'#eee',                   
            title: {
                text: 'Total',
                          rotation:0,
                          style: {
                                      color:'#000',
                                      fontSize:'.8em'
                                      }
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold'
                   // color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                },
                          formatter: function() {
                         // var s = this.series.options.QTotal;
                          //      return Highcharts.numberFormat(Math.round(s*100)/100,2)+'%';

                return categoriesVal[this.value]+' Test';
                          }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
                    //shared: true,
                    crossHairs: true,
                    //useHTML: true,
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y + this.point.dtLabel; /*+'<br/>'+
                    'Total: '+ this.point.stackTotal*/;
            }
        },
        plotOptions: {
            bar: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                                /*formatter:function(){
                                      return this.point.dtLabel;
                                },*/
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        series: [
              {
            name: 'Not Serious',
                  data: [{y:2,dtLabel:'<br />Subject(s):0012001,006007'},6, 3, 3, {y:4,dtLabel:'<br />Subject(s):0012001,006007'}], 
                    color: '#000000',
                    QTotal:0.79
        },
              {
            name: 'Serious Severe',
            data: [0,0,0,2, 5], 
                    color: '#FF0000',
                    QTotal:0.79
              },
              {
            name: 'Serious Moderate',
            data: [2, 2, 3, 2, 1], 
                    color: '#00FF00',
                    QTotal:0.79
        },
              {
            name: 'Serious Mild',
            data: [5, 3, 4, 7, 2], 
                    color: '#0000FF',
                    QTotal:0.79
        }                 
              ]
    });
});

Answer 1

堆栈标签this不包含对其系列的引用，因为它是所有系列的组合；所以我不确定您如何将系列 QTotal 映射到每个堆栈。

最简单的方法是将自定义属性直接放入stackLabel选项中：

stackLabels: {
    qTotals: ['This','is','a','qTotal','!'],
    enabled: true,
    style: {
        fontWeight: 'bold'
    },
    formatter: function() {            
        return this.options.qTotals[this.x];
    }
}

更新了小提琴。