当值太小时，高图表数据标签位置需要改变

Question

数据标签（在本例中为现金）大部分时间出现在正确的位置，就在右侧栏内。但是，如果条的值足够低，它最终会与轴标签重叠（如紫色条所示）。

我的第一反应是设置一个最大值并以此为基础更改数据标签的位置。例如，如果价值小于 10 美元，则将标签放在栏的右侧。但这种方法存在一个大问题。图表的大小是可变的和响应的，因此阈值需要是可变的。

理想情况下，应该测量条形本身并与数据标签的宽度进行比较以确定位置。实现该解决方案让我不知所措。我没有运气从高位图表或数据标签中获取条形的物理尺寸。

提前谢谢各位！

---

在 Android 2.1 设备上更新 Jugal Thakkar 的解决方案

Answer 1

您可以在高位图表中使用attr更改 X 和 Y 位置。

按，默认数据标签绘制在条形之外。所以，我猜你应该在 data Labels 属性中设置 X 和 Y 位置。

你可以这样做

function(chartObj) {
    $.each(chartObj.series[0].data, function(i, point) {
        if(point.y <=10) {
            point.dataLabel.attr({x:point.dataLabel.x+30});
        }
    });

加载图表后调用此方法。

这里是fiddle link 供参考。

Answer 2

再次更新。将适用于 Highcharts 支持的所有设备。

---

我认为this solution 会满足您的需求。

Answer 3

你可以试试这个，

var alignDataLabels = function() {
    var chartObj = window.chart || this;
    $.each(chartObj.series[0].data, function(i, point) {
        var dataLabel = point.dataLabel;
        // Get the current X
        var x = dataLabel.translateX;
        var y = dataLabel.translateY;
        // If the goes on LHS of the axis
        if (x < 0) {
            // Set the label's X to 5 px more than the bar's height(length) in pixels
            dataLabel.translate(point.barH + 5, y);
        }
    });
};

jsFiddle@http://jsfiddle.net/jugal/TCjJy/

我的安卓屏幕截图（用户代理：Android 4.1.1 AppleWebKit/534.30 (KHTML, like Gecko)