2

いくつかの OHLC データを取り込み、3 つのシリーズ (ローソク足 1 つ、ボリューム 1 つ、フラグ 1 セット) でチャートを作成する HighStock チャートがあります。これはすべてうまくいきます。

カスタム トレンド ラインをチャートに追加したいと考えています。ポイントを決定し、カスタム ロジックに基づいてパスを実行します。

問題はRenderer、チャートから を使用してパスを描画すると、パスが基になるチャートに接続されないことです。チャートの日付範囲が変更されたり、新しいポイントがプライマリseriesに追加されたりしても、カスタム パスの配置とサイズは変更されません。一定です。

SVG 描画の座標ではなく、チャートのデータポイントに関連付けるカスタム パスの場所/エンドポイントが必要です。これを達成する方法はありますか？

pointaからへの単純なパスを追加するコードの部分を次に示しますpointb。パスは期待どおりにレンダリングされますが、静的です。

    buildPath: function(pointa, pointb){
        this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
            .attr({
                'stroke-width': 2,
                stroke: 'red'
            }).add();
    },
    buildPathArray: function(pointa, pointb){
        var pathArray = [];
        pathArray.push('M');
        pathArray.push(pointa.plotX);
        pathArray.push(pointa.plotClose);
        pathArray.push('L');
        pathArray.push(pointb.plotX);
        pathArray.push(pointb.plotClose);
        pathArray.push('Z');
        return pathArray;
    }

リクエストに応じて、一般的な問題を示す JS Fiddle を作成しました。

どんな助けでも大歓迎です。

4

1 に答える 1

1

解決した

これは、Highcharts では無料ではないようです。または、もしそうなら、私はテクニックを見つけませんでした.

に含まれるオブジェクトのloadとredrawイベントの両方を使用する必要がありました。chartStockChart

では、トレンド ラインに含まれるオブジェクトにload合わせて最初のパスを描画します。Pointこれらのpathオブジェクト (SVGElement本物の SVGpath要素を含むオブジェクト) を構築するとき、それらを配列で追跡します。

ではredraw、古いトレンド ラインを破棄し、新しいトレンド ラインを作成する必要があります。そのため、古い要素の配列をループして、それぞれの要素からそれぞれを削除しますparentNode。次に、関連する各オブジェクトの新しくプロットされた位置に基づいて、トレンド ラインの新しいバージョンを描画しPointます。

最終結果は、各redrawイベントで、線が実際に破壊されて再作成されているときに、線がチャートと共に動いているように見えることです。

于 2012-12-16T02:25:55.323 に答える