jquery - ハイチャートの幅を取得

Question

現在のチャート幅を取得したいのですが、次のようなことを試しました：

chart.width

と

$(this).parent().width()

チャートの場所

chart = new Highcharts.Chart({ ... })

しかし、うまくいきません...

より詳しい情報

エクスポートボタン (レスポンシブ) の左側に画像 (ヘルパー) を配置したいと思います。

現時点では、次のコードがあります。

$(document).ready(function() {
     chart = new Highcharts.Chart({
        chart: {
            renderTo: 'area1',
            type: 'bar',
            events: {
                load: drawImages,

            }
         ...}
      })
    })

と

function drawImages() {
    var chart = this;
    x = chart.plotRight - 50

    chart.renderer.image('/assets/faq.png', x, 0, 20, 20)

    .attr({
        zIndex: 100,
        title: "My title for displaying a tooltip"
    })
    .css({
        cursor: 'pointer'
    })
    .add();   
    };

ただし、画像はチャートの左側に表示されます ( を使用plotRight)。

グラフの div コンテナー (「area1」) の幅を取得する方法は知っていますが、より多くのオブジェクト指向のコードが必要です (ページごとに少なくとも 5 つのグラフがあるため)。

score 18 · Accepted Answer

チャートオブジェクトでは、チャートの幅を保持する chartWidth パラメータにアクセスできます。

http://jsfiddle.net/7xNQL/1/

//callback
    function(chart){

                console.log(chart.chartWidth);

            }

score 8 · Accepted Answer

最後に、「コンテナ」メソッドを使用して解決策を見つけました。

$(chart.container).width()

これは、チャートの現在の幅を返します。

score 3 · Accepted Answer

xAxis extreme.max を使用して、それをピクセルに変換できます。次のようなもの（テストされていません）：

Chart.xaxis[0].toPixels( chart xaxis[0].getExtremes().max )

もっと簡単な方法があるはずですが、含まれている div 幅を使用したと思います。おそらく、チャートオプションを使用して、含まれている div を取得し、そこから幅を取得できます。

score 0 · Accepted Answer

これは古い質問なので、後でこれを確認する人のために、より多くのオプションを提供するためだけに答えます.

チャートの全幅が必要な場合：

this.chart.chartWidth

グラフの xAxis 幅が必要な場合、左側に可能なラベルはありません (画像を確認してください)。2 つのオプションがあります。

this.chart.plotWidth // or
this.chart.xAxis[0].width

jquery - ハイチャートの幅を取得

4 に答える 4

Related

Reference