2

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

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

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

先谢谢各位了！

在此处输入图像描述

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

在此处输入图像描述

4

3 回答 3

4

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});
        }
    });

加载图表后调用此方法。

这是参考的小提琴链接。

于 2012-09-19T10:28:00.217 回答
2

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

我认为该解决方案将满足您的需求。

于 2012-09-25T10:48:32.060 回答
1

你可以试试这个，

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)

android中的数据标签

于 2012-09-25T13:13:59.837 回答