0

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

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

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

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

在此处输入图像描述

4

3 回答 3

2

有几个选项可以帮助你。

首先，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 轴点。

-EDIT- 如果将 startOnTick 设置为 false，并将 y 轴最小值设为 -1.9，则虚假的 -2 点消失。

min: -1.9,
startOnTick:false,

http://jsfiddle.net/V6Cp2/

于 2013-07-24T07:58:50.460 回答
1

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

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

它在列的顶部显示标签。

例子

于 2013-07-24T07:19:30.927 回答
0

您可以使用分组类别插件。

于 2013-07-24T08:12:51.813 回答