0

ハイストック チャートの plotLine ラベルの背後に背景を描画したいと考えています。Highstock API の例を使用して、次のコードを作成しました (crt はチャート オブジェクトです)。

        var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
        var box = textbox.getBBox();
        crt.renderer.rect(box.x - 3, box.y + 1, box.width + 6, box.height, 3).attr({
            fill: '#0c0',
            id: 'labelBack',
            opacity: .7,
            'stroke-width': 0,
            zIndex: 4
        }).add();

これにより、意図したとおりにラベルの後ろに半透明のボックスが描画されます (ラベルの zIndex は 5 です)。ただし、チャートのサイズを変更すると、ボックスはチャートの左上に対して同じ位置を維持するため、ラベル テキストとの位置ずれが発生します (チャートのサイズ変更によりラベルの位置が変わります)。これにチャートの再描画イベントを使用してみましたが、イベントが発生し、関数が再度実行されていることがわかりますが、他のボックスは描画されません (各再描画でより多くのボックスを表示しようとしていたため、次の反復で廃止されたボックスを削除して解決します)。どうすればこれを解決できますか?

4

1 に答える 1

2

それは本物の解決策というよりはハックのように感じますが、私は今のところ私の問題を解決する回避策を考え出しました、私は以下の機能を持っています：

var labelBackground = null;
function labelDrawBack(crt) {
    if ( isIntraDay ) {
        var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
        if ( !!labelBackground ) {
            labelBackground.attr({ y: textbox.y - 10 });
        } else {
            var box = textbox.getBBox();
            labelBackground = crt.renderer.rect( box.x - 3, box.y + 1, box.width + 6, box.height, 3 ).attr( {
                fill: '#fff',
                id: 'labelBack',
                opacity: .65,
                'stroke-width': 0,
                zIndex: 4
            }).add();
        }
    }
}

チャートが初期化された直後にこの関数が実行されることを確認し、さらに、StockChart呼び出しから返されるチャートオブジェクトに関数をアタッチします。

var chartObj = new Highcharts.StockChart( chartConfig, function ( crt ) {
        labelDrawBack( crt );
} );
chartObj.labelDraw = labelDrawBack;

そして、チャートオプションでこれをchart.redrawイベントに追加しました：

events: {
    redraw: function() {
        this.labelDraw(this);
    }
}

これは意図したとおりに機能し、透明な背景をラベルとともに移動します（チャートのサイズが変更されると垂直方向に移動します）。チャートの再描画イベントで呼び出しをリダイレクトした理由は、labelDrawBack関数が、チャートオプションが定義されている関数とは別の関数で定義されているため、labelDrawBack関数がスコープ外にあるためです。

于 2013-03-21T11:08:53.253 に答える