Apex 圖表：如何將工具提示位置更改為始終位於頂部？

Question

默認情況下，Apex 圖表工具提示位置是自動計算的： https : //codepen.io/apexcharts/pen/xYqyYm 。 根據他們的文檔，您只能將其更改為fixed並放在其中一個角落：

Apex.tooltip = {
    fixed: {
      enabled: true
    }
  };

如何將其更改為始終居中於標記頂部？

Answer 1

如果有人想在不創建自定義的情況下更改工具提示的位置（因為它會帶來新的困難）。 我 100% 肯定有更好的方法來做到這一點，但這是我的解決方案：

Apex.chart = {
    events: {
        mouseMove: function(event, chartContext, config) {
            var tooltip = chartContext.el.querySelector('.apexcharts-tooltip');
            var pointsArray = config.globals.pointsArray;
            var seriesIndex = config.seriesIndex;
            var dataPointIndex = config.dataPointIndex === -1 ? 0 : config.dataPointIndex;

            if (seriesIndex !== -1) {
                var position = pointsArray[seriesIndex][dataPointIndex];

                tooltip.style.top = position[1] + 'px';
                tooltip.style.left = position[0] + 'px';
            }
        }
    }
};

代碼筆 - https://codepen.io/Pratik__007/pen/oNgJajw

源 - 表單 GitHub 帖子。