React Highchartsでグリッド位置を取得する方法

Question

highcharts-gridのx位置を取得する方法、またはHighchart xPositionから距離を取得する方法はありますか？

私は、実際のグリッドに自分のページ内の要素を合わせたいと思います。問題は、yAxis情報サイズが変更されることです。

次の例を参照してください

と：

Answer 1

プロット領域のxの開始位置は、chart.plotLeftプロパティにあるため、固定マージンを設定していません。

APIリファレンス：
http://api.highcharts.com/highcharts/chart.margin

例：
http://jsfiddle.net/tcuthdra/

Answer 2

あなたのチャートのためのマージンを設定することで開始する必要があり、これはx軸リフローを行うhighchartsによって行わ自動計算の一部を上書きしますあなたがシリーズの選択を解除するとき。私は上記のチャートのスタイルを模倣しようとしているシンプルなjsfiddleをした、ここを参照してください：http://jsfiddle.net/p6bog3pa/

チャートconfigオブジェクトは、次のとおりです。

Highcharts.chart('container', { 
    chart: { 
     type: 'column', 
     margin: [25, 15, 70, 400] // This fixes the chart margins 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    plotOptions: { 
     column: { 
     grouping: true 
     } 
    }, 
    yAxis: [ 
    { title: { text: 'hello title' }}, 
    { title: { text: 'highcharts title' }}, 
    { title: { text: 'stuff title' }}], 
    series: [{ 
     name: 'hello', 
     yAxis: 0, 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }, { 
     name: 'highcharts', 
     yAxis: 1, 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }, { 
     name: 'stuff', 
     yAxis: 2, 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 
}); 

そして、あなたはマージンを固定しているため、あなたが任意のコンポーネントのための固定オフセットを設定することができますグラフのx軸に合わせたいもちろん、より動的にしたい場合は、適切なマージンを決定するためにコード内でより多くの作業が行われますが、これはあまりにも難しい作業ではありません。

Answer 3

私のソリューションは、Highchartの内部elemntsのものを見つけるウィンドウの左からの距離を見つけて、それに応じて自分自身の要素を移動することでした。

どうやら、チャートX軸要素はクラス名highcharts-axisで最初であり、その左上隅には私が必要なものに適しています：

const highchartInsideElement = document.getElementsByClassName("highcharts-axis"); 
    const myElement = document.getElementById("myElement"); 

    if (analCharts.length > 0) { 
     const highchartInsideElementTopLeft = this.getPageTopLeft(highchartInsideElement[0]).left; 
     const myElementTopLeft = this.getPageTopLeft(ganttWrapper).left; 

     padding = `${highchartInsideElementTopLeft - myElementTopLeft + 16}px`; // 16: cheating in order to match Highcharts extra x values 

     myElement.style.paddingLeft = amchartsWrapperMargin; 

    } 

は、ウィンドウ左からの距離を取得するには：

getPageTopLeft(el) { 
    const rect = el.getBoundingClientRect(); 
    const docEl = document.documentElement; 
    return { 
     left: rect.left + (window.pageXOffset || docEl.scrollLeft || 0), 
     top: rect.top + (window.pageYOffset || docEl.scrollTop || 0) 
    }; 
}