ApexCharts - “opts.ctx.rangeBar.getTooltipValues 不是函数”

Question

我正在使用 ApexCharts 创建一个具有多个系列和分组行的时间线图表。它与位于此处的文档中的示例图表非常相似：https://apexcharts.com/javascript-chart-demos/timeline-charts/multiple-series-group-rows/

我面临的问题是关于它们的工具提示 - 将鼠标悬停在任何栏的任何部分上都不会显示工具提示，并向控制台返回错误“opts.ctx.rangeBar.getTooltipValues 不是函数”。这实际上也发生在我的示例页面上。

我当前的解决方法是我创建了一个自定义工具提示函数，但它不包含我需要的所有数据，并且我不确定在哪里提取该信息。例如，我需要将栏当前部分的名称显示为工具提示的标题，但不确定如何使用自定义方法来做到这一点。在他们的示例中，相当于将鼠标悬停在总统栏的乔治·华盛顿部分上时，会在工具提示的顶部看到“乔治·华盛顿”。

我已经在多台机器上尝试过此操作，但错误仍然存在。任何帮助或见解将不胜感激，谢谢。

Answer 1

在看到人们的评论并做了一些研究后，我认为这段代码将帮助您完成您需要的事情。

tooltip: {
            custom: function({ series, seriesIndex, dataPointIndex, w, y1, y2}) {
                const padTime = (time) => {
                    return String(time).padStart(2, '0');
                };
                const from = `${padTime(new Date(y1).getHours())}:${padTime(new Date(y1).getMinutes())}`;
                const to = `${padTime(new Date(y2).getHours())}:${padTime(new Date(y2).getMinutes())}`;
                return (
                    '<div class="apexcharts-tooltip-rangebar">' +
                    '<div> <span class="series-name" style="color:' + w.globals.colors[seriesIndex] + '">' +
                    (w.globals.seriesNames[seriesIndex] ? w.globals.seriesNames[seriesIndex] : '') +
                    '</span></div>' +
                    '<div> <span class="category">' +
                    w.globals.seriesX[seriesIndex][dataPointIndex] +
                    ' </span> <span class="value start-value">' +
                    from +
                    '</span> <span class="separator">-</span> <span class="value end-value">' +
                    to +
                    '</span></div>' +
                    '</div>'
                );

            }
        }