在 Highcharts 的分组条形图中标记单个条形图答案

【问题标题】：Label individual bars in a grouped bar chart in Highcharts在 Highcharts 的分组条形图中标记单个条形图
【发布时间】：2013-07-24 16:12:51
【问题描述】：

是否有编程方式为 HighCharts 中分组条形图中的各个条形提供轴标签？

用例：用例是在处理分组和堆叠的图形时。使用这些图表很难直观地传达（没有工具提示）各个条形代表什么，除非它们具有单独的标签。

默认行为： 作为示例，请参阅堆叠和分组柱形图的 HC 演示，其中最初可能不清楚每个集群中的各个条形代表不同的性别：http://www.highcharts.com/demo/column-stacked-and-grouped

目标：这是我正在努力实现的目标的图示。是否可以以编程方式执行此操作，例如使用第二个 x 轴？也许另一个想法是巧妙地放置堆栈总数，但这当然会妨碍显示实际堆栈总数。

【问题讨论】：

标签： highcharts

【解决方案1】：

有几个选项可能对您有所帮助。

首先，stackLabels 格式化程序允许您确定标签中的内容。

其次，veticalAlign:"bottom" 允许您将标签定位在堆栈的底部。

第三，“y”选项允许您相对于其默认位置移动标签。

问题是您似乎无法将标签移到图表绘图区域之外。解决此问题的一种方法是将 y 轴从负值开始，以便为标签留出空间。然后您可以将 x 轴的位置移动到图表区域中。

http://jsfiddle.net/WY6QB/

xAxis: {
            offset:-43,
            labels:{
                y:40
            },
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },


stackLabels: {
                verticalAlign:"bottom",
                y:20,
                enabled: true,
                formatter: function() {
                    return  this.stack;
                }
            }

唯一剩下的就是尝试移除虚假的 '-2' y 轴点。

-编辑- 如果将 startOnTick 设置为 false，并将 y 轴 min 设置为 -1.9，则虚假的 -2 点消失。

min: -1.9,
startOnTick:false,

http://jsfiddle.net/V6Cp2/

【讨论】：

非常酷的解决方法。只要不需要正常的堆栈标签（即条形的数字总数），这就是完美的。你能想出一种方法来适应这种情况，即除了下面的堆栈标题之外，你还需要数字堆栈标签（在顶部）？
我能想到的唯一其他选择是直接使用渲染开始注释图表以在您想要的位置添加文本。 api.highcharts.com/highcharts#Renderer

【解决方案2】：

它的结果与您的图像不完全相同，但它显示stackLabels：

yAxis: {
    ...
    stackLabels: {
        enabled: true,
        formatter: function() {
            return  this.stack;
        }
    }
},

它在列的顶部显示标签。

Example

【讨论】：

太棒了！谢谢

【解决方案3】：

你可以使用grouping categories插件。

【讨论】：