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

Question

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

我的情况是，每个堆栈的标签基本上不取决于每个系列，而是取决于多种因素。因此，客户希望将任意值设置到每个堆积条的末尾。到目前为止，我所拥有的是这个 ( http://jsfiddle.net/yybLxgkd/ )，但到目前为止，我一直未能成功地尝试在每个堆叠条的末尾显示自定义标签。

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

如果我能在尝试解决此问题时获得任何帮助，我将不胜感激。

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

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

非常感谢，杰瑞

我的代码如下:$(函数(){

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

已更新 fiddle .