3

Highchartsにチャートがあり（より具体的には、Highstocksチャート、ローソク足タイプです）、SVGシェイプをいくつか追加したいと思います。

このレンダラーオブジェクトがあることは知っていますが、キャンバスを基準にしたx座標とy座標のみを受け入れます。

必要なのは、特定の時間（xAxis）にいくつかの形状を追加することです。したがって、x / y値をチャート座標（キャンバス座標ではなく）として受け入れる必要があるか（明らかに可能かどうかはわかりません）、次のようにする必要があります。チャート内の特定のポイントのx/y-canvas-position。

これを行う方法はありますか？

4

3 に答える 3

2

次の方法で既存のシンボルを拡張できます

$.extend(Highcharts.Renderer.prototype.symbols, {
    newSymbol: function() {
        return [//SVG path as Array];
    }
});

これはそれを示すフィドルです

于 2012-07-03T13:52:42.173 に答える
1

グラフィックを使用して、特定のデータポイントを置き換えることができます。次の例は、この機能を示しています。以下の例では、特定のポイントがグラフィックに置き換えられています。たまたまグラフ化する必要のある最高点です。

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
  y: 26.5,
  marker: {symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'}
}, 23.3, 18.3, 13.9, 9.6]
于 2012-07-03T12:55:03.390 に答える
1

SVG形状を描画し、ズームで移動するには、2つの方法があります。最初の方法はアイデアとして使用し、私よりもうまくできるかどうかを確認します。2番目の方法は常に機能します。

最初の方法

この形状のx座標を取得します。highstockはUNIX時間を使用しているので、Xデータ= 1326844540000で形状を追加するとします。次に、series[i]に従って1326844540000のx位置を取得します。 1つのシリーズなので、series [0]を使用します。これが、x座標を取得する方法です。

               $.each(chart.series[0].points, function(index,value){
                         if(value.category == 1326847170000 ) 
                         console.log(this.plotX) ;
                 });

今.append()あなたのSVGを追加するために使用します：

   var myrect = $(".highcharts-series-group") ; 
    $(myrect).append(<your svg goes here with 
            x ="you have it from the previous code " y="")

このコードは内部に入ります（xAxis-events-setExtremes）そしてonchartloadも

推奨される方法

attr()推奨され、保証されている方法は、フラグを作成してIDを指定することです。その後、このフラグのを編集することで、好きなことを実行できます。

アップデート

  • ズーム時にデフォルトでチャートフラグにフラグを追加すると、範囲セレクターまたはズームが変更されるたびに要素を移動することを心配する必要がなくなります。
  • フラグIDを指定すると、jqueryを使用して簡単に選択できます
  • これを参照してください： ここに画像の説明を入力してください
  • 強調表示された<g>タグの4番目のパスは、必要なものを描画するために編集するパスです。
于 2012-07-03T14:11:33.957 に答える