如何在数据栏的基础上定位数据标签

时间:2011-12-20 07:32:40

标签: highcharts

我有一个(水平)条形图,我想在系列栏的基础(或最左边部分)添加dataLabel。

与此类似:http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/

有没有办法使用formatter函数来设置这个值?

plotOptions: {
    bar: {         
        dataLabels: {
            formatter: function() {
                this.series.options.dataLabels.x =  ?????????????
                return this.y;
            },

1 个答案:

答案 0 :(得分:12)

格式化程序功能的任务是格式化标签文本。它为您提供了一种修改图表内部状态的方法,但这实际上只是一个黑客攻击,因此可能会或可能不会起作用。

将标签放置在底座的一种方法是使用堆栈标签而不是数据标签(数据标签将放置在栏的顶部,向左或向右对齐)。要在基础上配置堆栈标签,请执行以下操作:

yAxis: {                         // The y axis is horizontal 'bar' layout
    stackLabels: {
        style: {
            color: 'white'       // Make the labels white
        },
        enabled: true,           // Enable stack labels
        verticalAlign: 'middle', // Position them vertically in the middle
        align: 'left'            // Align them to the left edge of the bar
    }
}

您还需要将堆叠设置为'normal'

jsfiddle上的示例:

enter image description here

更新:stack-totals的标签将显示特定类别(堆栈)的所有系列的总和,因此仅​​在图表中包含一个系列的情况下才会显示堆栈标签和数据 - 标签显示相同的值。