2

グラフの端にある 2 点の y 差など、グラフの範囲や比較に注意を喚起するために、中かっこのようなデザイン要素を必要とするチャートがよくあります。

私の最初の見解は、これは Highcharts RendererAPI の仕事になるということです。chart.renderer.image(...) グラフをロードし、または同様の方法で画像 (または線、形状など) を追加するコールバックを実行します。

それが私が始めたアプローチですが、コールバック内のチャート データ ポイントの座標を取得する方法がありません。これは、以下のコードの作業コードペンです。うまくいかないのは、キャンバス上に適切に配置するロジックがないことです (ブラケットを最後の頂点から最後の底点に移動させたいとします)。

$('#container').highcharts({
    data: { table: document.getElementById('datatable') },
    chart: { type: 'line' }, 
    title: { text: 'Data extracted from a HTML table in the page'
    }
}, function(chart){

  var img = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Curly_bracket_right.svg/30px-Curly_bracket_right.svg.png';

  // How can I populate these values?
  var x = 0; // should programmatically get x-position of last point
  var y = 0; // should programmatically get y-position of last point
  var h = 100; // should programmatically get distance between y-position of top and bottom points
  var w = 50;

  chart.renderer.image( img, x, y, w, h ).add();
});

これらの値を入力する簡単な方法はありますか? または、これを完全に行うためのより良い方法はありますか?

4

1 に答える 1

1

必要な位置を取得するには、API でハイチャートが提供するいくつかのメソッドを使用できます。

toPixels()、toValue() などのメソッドは、チャートの人口統計に従って必要な位置を変更するのに役立ちます。

彼らのAPIを参照してください

toPixels() : http://api.highcharts.com/highcharts#Axis.toPixels()

toValue() : http://api.highcharts.com/highcharts#Axis.toValue()

これを使用すると、ポジショニングの要件が解決されることを願っています

于 2013-11-14T12:08:00.963 に答える