Highcharts 数据标签重叠柱形图问题

Question

我在图表中遇到了数据标签重叠柱形的问题。

$('#container').highcharts({
        chart: {
            type: 'column'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169], 
                  [Date.UTC(2013, 4, 1, 0, 0, 0), 176], 
                  [Date.UTC(2013, 5, 1, 0, 0, 0), 470], 
                  [Date.UTC(2013, 6, 1, 0, 0, 0), 346], 
                  [Date.UTC(2013, 7, 1, 0, 0, 0), 252], 
                  [Date.UTC(2013, 8, 1, 0, 0, 0), 138]],
            dataLabels: {
                enabled: true
            }
        }]
    });
});

你可以在这里看到一个示例：http://jsfiddle.net/J6WvR/1/ 我的图表应该有固定的高度，但我不理解为什么最高柱子的高度不能被计算出来以适应其数据标签。我该如何解决这个问题？

- hank

---

需要固定高度吗？因为如果从容器中删除高度，则应该可以工作。 - Nikhil N

Answer 1

根据官方API文档：overflow属性

如需在绘图区域外显示数据标签，请将crop设为false，将overflow设为"none"。

            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }

- Ivan Chau

Answer 2

你可以尝试使用yAxis的最大值， 从你的数据中计算最大值并添加一些缓冲，比如100，将其设置为yAxis的最大值。

yAxis:{
                max: 600,
            },

使用http://jsfiddle.net/J6WvR/3/更新您的小样，以便在y轴上使用最大值。

希望这对您有所帮助。

- Strikers

Answer 3

一种选择是移动标签的位置。例如，这将把它们移动到条形图内部：

plotOptions: {
        column: {
            dataLabels: {
                y: 20,
                color:'white'
            }
        }
    },

http://jsfiddle.net/TBfLS/

另一种方法是手动设置最大的 y 值，以便为标签腾出空间：

  yAxis: {
        max: 600,
        endOnTick: false
    },

http://jsfiddle.net/2AhVT/

希望这些选项中的一个能够帮到您。

另外，Ivan Chau 发布了第三个（也许更好的）选项。

- SteveP

Answer 4

在启用数据排序的情况下，堆叠柱状图中的数据标签显示不正确。

- Pal