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

Question

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

用例：用例是在处理分组和堆叠的图表时。使用这些图表很难在视觉上传达（没有工具提示）单个条形图表示的内容，除非它们具有单独的标签。

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

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

Answer 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轴点。

CNC中 如果将startOnTick设置为false，并将y轴min设为-1.9，则假-2点消失。

min: -1.9,
startOnTick:false,

http://jsfiddle.net/V6Cp2/

Answer 2

它与您的图片不完全相同，但会显示stackLabels：

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

它会在列顶部显示标签。

Example

Answer 3

您可以使用grouping categories插件。