2

データ ラベル (この場合は現金) は、ほとんどの場合、右側のバーのすぐ内側の適切な場所に表示されます。ただし、バーの値が十分に低い場合は、軸ラベルと重なってしまいます (紫色のバーで示されています)。

私の最初の本能は、最大値を設定し、それに基づいてデータラベルの位置を変更することでした。たとえば、値が $10 未満の場合、バーのすぐ右側にラベルを配置します。しかし、その方法には大きな問題があります。グラフのサイズは可変で応答性が高いため、しきい値を可変にする必要があります。

バー自体を測定し、データ ラベルの幅と比較して位置を決定するのが理想的です。その解決策を達成することは、私を途方に暮れさせます。バーの物理的なサイズを高いチャートから取得すること、またはそのデータラベルを取得することに運がありませんでした。

よろしくお願いします！

ここに画像の説明を入力

Android 2.1 デバイスでの Jugal Thakkar のソリューションの更新

ここに画像の説明を入力

4

3 に答える 3

4

attrハイ チャートでX と Y の位置を変更できます。

デフォルトのデータ ラベルはバーの外側にプロットされます。したがって、プロパティに X と Y の位置を設定する必要があると思いますdata Labels。

このようなことができます

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 に答える