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

Question

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

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

请参阅以下示例：

和：

Answer 1

绘图区域的 x 起始位置可以在chart.plotLeft属性中找到，因此您无需设置固定边距。

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

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

Answer 2

您应该首先设置图表的边距，这将覆盖 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 3

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

显然，图表 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;

    }

要从左侧窗口获取距离：

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