当值太小时，高图表数据标记的位置需要更改。

Question

数据标签(在本例中是现金)出现在正确的位置，大多数情况下就在右边的酒吧内。但是，如果条形图的值足够低，它就会与轴标签重叠(如紫色条所示)。

我的第一反应是设置一个最大值，并在此基础上更改数据标签的位置。比如，如果价值低于10美元，就把标签放在吧台的右边。但这种做法有一个大问题。图表的大小是可变的和响应性的，因此阈值需要是可变的。

理想情况下，应该测量杆本身，并将其与数据标签的宽度进行比较以确定位置。实现这一解决方案使我不知所措。我一直没有运气，得到的生理大小的酒吧高图表，或数据标记的问题。

先谢谢各位！

​

​

Jugal Thakkar在Android2.1设备上的解决方案更新

​

​

Answer 1

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

我认为这个解决方案会满足你的需要。

Answer 2

您可以在高图表中使用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});
        }
    });

加载图表后，调用此方法。

这是供参考的琴杆。

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上的屏幕截图(Useragent：Android 4.1.1 AppleWebKit/534.30 (KHTML, like Gecko) )

​

​