Question

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

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

我尝试通过提供一个名为QTotal的系列选项来传递我需要在系列中的每个堆栈末尾显示的值，但后来我意识到stackLabel不支持（this.point。系列）。所以我试着玩一下并至少得到每个栏末尾显示的类别名称，但这也是徒劳的。

我真的很感激我在尝试解决此问题时可以获得的任何帮助。

再一次，我想要完成的是为每个堆栈显示自定义标签而不是（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];
    }
}

更新了fiddle。

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

1 个答案: