如何定位数据标签在酒吧系列的基础上 [英] How to position datalabel at the base of bar series

问题描述

我有一个（水平）条形图，我想在该系列的底部（或最左边）添加dataLabel's。

类似于这： http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-welrested-in/

有没有使用格式化函数来设置这个值的方法？

  plotOptions：{
 bar：{
 dataLabels：{
 formatter：function（） {
 this.series.options.dataLabels.x = ????????????? 
返回this.y; 
}，
  

解决方案

功能是格式化标签文本。它提供了一种方法来修改图表的内部状态，但这实际上只是一种破解，因此可能或不可行。

放置标签的一种方法在底部是使用堆栈标签，而不是数据标签（数据标签将放置在栏的顶部，左对齐或右对齐）。要在底座上配置堆叠标签，请执行以下操作：

  yAxis：{// y轴为水平'bar'布局
 stackLabels：{
 style：{
 color：'white'//将标签设为白色
}，
启用：true，//启用堆叠标签
 verticalAlign：'middle'，//将它们垂直放置在中间
 align：'left'//将它们对齐到栏的左边缘
} 
} 
  

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



jsfiddle 上的示例：

更新：堆栈总计的标签将显示特定类别（堆栈）的所有系列的总和，因此只有在有一个单一图表中的e系列将使堆栈标签和数据标签显示相同的值。

I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.

similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/

Is there a way using the formatter function to set this value?

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

解决方案

The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.

One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:

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

You will also need to set stacking to 'normal':

Example on jsfiddle:

Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.

这篇关于如何定位数据标签在酒吧系列的基础上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！