如何在 React Highcharts 中获取网格位置

Question

有没有办法获取 highcharts-grid 的 xPosition 或获取它与 Highchart xPosition 的距离？

我想将我页面中的元素与实际网格对齐。问题是 yAxis 信息大小改变了。

参见以下示例：

和：

Answer 1

您应该首先设置图表的边距，这将覆盖 highcharts 完成的一些自动计算，这些计算会在您取消选择系列时进行 xAxis 重排。我做了一个简单的 jsfiddle 试图模仿上面的图表样式，请参见此处：http://jsfiddle.net/p6bog3pa/

图表配置对象是：

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 2

绘图区域的x起始位置可以在chart.plotLeft属性中找到，所以你没有设置固定边距。

API参考：
http://api.highcharts.com/highcharts/chart.margin

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

Answer 3

我的解决方案是找到 Highchart 的内部元素之一，找到它与 window 左侧的距离，然后相应地移动我自己的元素。

显然，图表 xAxis 元素是第一个具有类名 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;

    }

要计算与 window 左边的距离：

    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)
    };
}

如何在 React Highcharts 中获取网格位置

How to get grid position in React Highcharts

javascript

css

reactjs

highcharts

react-highcharts