web-dev-qa-db-ja.com

値に応じてHighchartsdataLabelsを配置することは可能ですか？

Highchartsを使用して棒グラフを表示しています。2本の棒が重なり合っており、その右側にdataLabelsがあり、正確な値が表示されています。

ここでの問題は、値が80％を超えると、ラベルがグラフからフレームにオーバーフローし、他のテキストを超えて、両方が判読できなくなることです。

これが私のplotOptionsです：

plotOptions: {
            bar: {
                groupPadding: 0.5,
                pointWidth : 30,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    y:-5,
                    color:"black",
                    style: {
                        fontSize: "12px"
                    },
                    formatter: function(){
                        if(this.y > 80)
                        {
                            this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;
                        }
                        if(this.series.name == "Tests OK")
                            return "Tests OK : <strong>"+Math.round(this.y*10)/10+"%</strong>";
                        else
                            return "<br/>Tests Executed : <strong>"+Math.round(this.y*10)/10+"%</strong>";
                    }
                }
            }
        }

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;を使用して、外出先でグラフのオプションを編集できると思いましたが、これは機能しません。

確かに、私はそのような問題に遭遇した最初の人ではありません。何か案が ？

ありがとう

javascripthighcharts
13
3rgo

formatter内からそれを行うことは不可能のようです。

ただし、チャートがレンダリング（ロード）された後に設定できます。このようなものを試してください

$.each(chartObj.series[0].data, function(i, point) {
    if(point.y > 100) {
        point.dataLabel.attr({x:20});
    }
});

load callbackで（またはredraw callbackで必要な場合）。

例を参照してください ここ 。

14
Bhesh Gurung

これが私が最終的に得たものです。 setTimeoutが必要であるか、dataLabelプロパティがポイントに存在しません。

formatter: function () {
    var point = this.point;
    window.setTimeout(function () {
        if (point.s < 0) {
            point.dataLabel.attr({
                y: point.plotY + 20
            });
        }
    });
    //this.series.options.dataLabels.y = -6;
    var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
    return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>';
}
5
jvenema

Bheshの答えはx/y配置の問題を解決しますが、HighchartsはdataLabelsのstyleプロパティへの変更を無視します（ ここで問題を参照 ）。ただし、データオブジェクトを通過させることで、個々のポイントのスタイルをオーバーライドできます。

series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }]

Highchartsドキュメントの例

オブジェクト全体をHighchartsに渡してレンダリングする前に、データを反復処理することで動的なスタイルを取得することができました。

4
simpixelated

私はこれのいくつかを自分で理解しようとしてきました...それは代わりのように見えます

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;

使用できますか...

this.series.options.dataLabels.x = -20;

...この時点で、必要に応じて再配置できるように、dataLabelの場所を識別できるかどうかを理解しようとしています。

0
Travis