0

HighCharts 折れ線グラフのデータ ラベルが重ならないように再配置しようとしています。

loadイベントに再配置関数を追加することで、最初にこれを行うことができます。

var repositionLabels = function(series) {
    var s1 = series[0].data;
    var s2 = series[1].data;
    var i=0, l=s1.length, higher;

    for(; i<l; i++) {
        higher = s1[i].y > s2[i].y;
        s1[i].dataLabel.attr('y', higher ?  s1[i].dataLabel.y-10 :  s1[i].dataLabel.y+30 );
        s2[i].dataLabel.attr('y', !higher ?  s2[i].dataLabel.y-10 :  s2[i].dataLabel.y+30 );
    }
}

上の線の場合、データ ラベルは線の上に配置されます。下の行では、データ ラベルが下に配置されます。したがって、それらは重複しません。

問題

問題は、凡例項目をクリックして線を表示/非表示にすると、データ ラベルがデフォルトの位置 (不適切な重複) に戻ることです。ここにデモがあります： http://jsfiddle.net/supertrue/QbGPV/984/

同じ関数をイベントにアタッチすると、redraw新しいラベルの位置がそのまま維持されると思いますが、そうではありません。に取り付けることもありませんplotOptions.line.events.legendItemClick。

凡例項目をクリックした後、適切なラベル位置をそのまま維持するにはどうすればよいですか?

4

2 に答える 2

2

これが最善の解決策かどうかはわかりません。ポジショニングを遅らせたところ、ちょっとうまくいきました。

フィドルを見る

setTimeout(function () {
   positionLabels(chart.series);
}, 500);


編集

更新されたフィドル

于 2013-04-04T08:10:20.117 に答える
1

シリーズのアニメーションがラベルの配置に干渉しているようです。設定した場合:

 chart: { renderTo: 'container', type: 'line', animation:false,

その後、すべて正常に動作します。ラベルを配置した後にアニメーションが実行され、ラベルを再配置していると思います。

アニメーションをオフにするか、@anpsmn によって投稿された setTimeout メソッドを使用する必要があるようです。

于 2013-04-04T08:29:01.903 に答える