Highcharts升级后蜘蛛图鼠标悬浮报chart属性读取错误

问题现象 #

此前长期正常运行的HighCharts蜘蛛图，升级到最新版HighCharts代码后，鼠标悬浮交互功能不再生效：

• 图表本身可正常渲染
• 鼠标悬浮到图表上时，JavaScript控制台反复抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'chart')
• 注释掉以下两行tooltip相关配置代码后，鼠标悬浮功能可恢复正常：

$chart->tooltip->shared = true;
$chart->tooltip->pointFormat = '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><br/>';

对应原有PHP实现代码如下：

// Create a new Highchart
$chart = new Highchart();
$chart->includeExtraScripts();

$chart->chart->renderTo = "control_maturity_spider_chart";
$chart->chart->polar = true;
$chart->chart->type = "line";
$chart->chart->width = 1000;
$chart->chart->height = 1000;
$chart->title->text = "Current vs Desired Maturity by Control Family";
$chart->title->x = -80;
$chart->pane->size = "80%";
$chart->xAxis->categories = $categories;
$chart->xAxis->tickmarkPlacement = "on";
$chart->xAxis->lineWidth = 0;
$chart->yAxis->gridLineInterpolation = "polygon";
$chart->yAxis->lineWidth = 0;
$chart->yAxis->min = 0;
$chart->yAxis->max = 5;
$chart->yAxis->tickInterval = 1;
$chart->tooltip->shared = true;
$chart->tooltip->pointFormat = '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><br/>';
$chart->legend->align = "center";
$chart->legend->verticalAlign = "top";
$chart->legend->layout = "vertical";

// Draw the Current Maturity series
$chart->series[0]->name = $escaper->escapeHtml($lang['CurrentControlMaturity']);
$chart->series[0]->data = empty($categories_current_maturity_average) ? [] : $categories_current_maturity_average;
$chart->series[0]->pointPlacement = "on";

// Draw the Desired Maturity series
$chart->series[1]->name = $escaper->escapeHtml($lang['DesiredControlMaturity']);
$chart->series[1]->data = empty($categories_desired_maturity_average) ? [] : $categories_desired_maturity_average;
$chart->series[1]->pointPlacement = "on";

$chart->credits->enabled = false;

echo "<figure class=\"highcharts-figure\">\n";
echo "  <div id=\"control_maturity_spider_chart\"></div>\n";
echo "</figure>\n";

echo "<script type=\"text/javascript\">";
echo $chart->render("control_maturity_spider_chart");
echo "</script>\n";

问题原因 #

该问题是HighCharts版本升级带来的默认配置变更兼容问题，原有配置写法没有错误：
HighCharts 9.2及以上版本调整了极坐标（蜘蛛图属于极坐标折线图）的tooltip默认逻辑：当极坐标图表配置tooltip.shared = true时，会默认强制启用tooltip.split = true（分栏提示框模式）。而使用的PHP Highcharts封装库未适配该变更：

1. split模式下tooltip的渲染上下文和普通共享提示框不同，代码会尝试读取未定义的实例属性，直接触发控制台报错
2. 自定义的pointFormat是针对非split的普通共享提示框设计的，split模式下无法正常解析该格式，会进一步触发报错
   注释掉tooltip相关配置后，提示框走默认的非共享、非split逻辑，因此交互恢复正常。

修复方案 #

在原有tooltip配置中新增一行，显式关闭split模式即可，其余原有配置不需要修改：

$chart->tooltip->shared = true;
$chart->tooltip->split = false; // 新增该行，显式关闭分栏提示框，覆盖高版本默认配置
$chart->tooltip->pointFormat = '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><br/>';

如果修改后仍有格式渲染异常，可以额外补充$chart->tooltip->useHTML = true;配置，确保自定义的HTML格式标签正常解析。

修改后验证效果：

• 蜘蛛图渲染逻辑不受影响
• 鼠标悬浮时共享提示框正常弹出，控制台不再抛出类型错误
• 提示框的样式、数值展示效果和升级前完全一致

内容的提问来源于stack exchange，提问作者Josh Sokol