React Highcharts图表hover时控制台报错，寻求解决方案

问题场景 #

开发了一个展示柱状图和折线图的React组件，鼠标hover到图表数据点时，控制台抛出TypeError: m.call is not a function错误。

使用依赖版本 #

• "highcharts": "^10.2.0"
• "highcharts-react-official": "^2.1.3"
• "react": "^16.8.6"

具体报错信息 #

1. 鼠标在图表容器移动时触发：

highcharts.src.js:24745 Uncaught TypeError: m.call is not a function
    at k.refresh (highcharts.src.js:24745:1)
    at g.<anonymous> (highcharts.src.js:28123:1)
    at x (highcharts.src.js:1660:1)
    at g.firePointEvent (highcharts.src.js:25813:1)
    at f.runPointActions (highcharts.src.js:28121:1)
    at f.onContainerMouseMove (highcharts.src.js:27678:1)

2. 鼠标hover到数据点时触发：

highcharts.src.js:24745 Uncaught TypeError: m.call is not a function
    at k.refresh (highcharts.src.js:24745:1)
    at g.<anonymous> (highcharts.src.js:28123:1)
    at x (highcharts.src.js:1660:1)
    at g.firePointEvent (highcharts.src.js:25813:1)
    at f.runPointActions (highcharts.src.js:28121:1)
    at g.onMouseOver (highcharts.src.js:26371:1)
    at SVGGElement.e (highcharts.src.js:43249:1)

图表配置项 #

{
    "chart": {
        "zoomType": "xy",
        "spacingTop": 50,
        "style": {
            "fontFamily": "Work Sans, sans-serif"
        },
        "alignTicks": true
    },
    "colors": [
        "#4a8cb2",
        "#506A78",
        "#bbbbbb"
    ],
    "title": {
        "text": ""
    },
    "subtitle": {
        "text": ""
    },
    "xAxis": {
        "title": {},
        "margin": 25,
        "style": {
            "top": 10
        },
        "categories": [
            "Country: other",
            "USA",
            "Malaysia",
            "India",
            "United Kingdom",
            "Switzerland",
            "South Africa",
            "Singapore",
            "New Zealand",
            "Scotland",
            "China"
        ]
    },
    "tooltip": {
        "formatter": {}
    },
    "yAxis": [
        {
            "title": {
                "text": "ABC"
            },
            "plotLines": [
                {
                    "color": "#D5D5D5",
                    "opacity": 0.5,
                    "dashStyle": "Dash",
                    "width": 2,
                    "org_score": 10,
                    "value": 63,
                    "label": {
                        "align": "right",
                        "style": {
                            "fontWeight": "bold"
                        },
                        "text": "Org Moment Score: 63"
                    },
                    "zIndex": 2
                }
            ],
            "min": null,
            "max": null,
            "allowDecimals": false,
            "showFirstLabel": true,
            "showLastLabel": true,
            "labels": {},
            "opposite": true
        },
        {
            "title": {
                "text": "ABC"
            },
            "allowDecimals": false,
            "gridLineWidth": 0
        }
    ],
    "plotOptions": {
        "column": {
            "stacking": "normal",
            "pointWidth": 20,
            "states": {
                "hover": {
                    "brightness": -0.3
                }
            },
            "dataLabels": {}
        },
        "series": {
            "pointWidth": 15,
            "marker": {
                "fillColor": "#FFFFFF",
                "lineWidth": 2,
                "lineColor": null
            },
            "dataLabels": {}
        }
    },
    "series": [
        {
            "name": "Lorem Ipsum",
            "type": "column",
            "yAxis": 1,
            "data": [
                1,
                73,
                20,
                24,
                49,
                6,
                9,
                14,
                1,
                1,
                1
            ]
        },
        {
            "name": "Ipsum Lorem",
            "type": "line",
            "color": "#ffdc4c",
            "data": [
                47,
                62,
                63,
                63,
                63,
                63,
                65,
                65,
                81,
                81,
                84
            ]
        }
    ],
    "credits": {
        "enabled": false
    },
    "legend": {
        "enabled": true,
        "margin": 10
    },
    "exporting": {
        "chartOptions": {
            "title": {
                "text": "'Lorem Ipsum Lorem Ipsum"
            }
        },
        "enabled": true,
        "allowHTML": true,
        "sourceWidth": 1200,
        "sourceHeight": 400,
        "csv": {},
        "menuItemDefinitions": {
            "label": {
                "text": "Show-Hide Data Labels"
            }
        },
        "buttons": {
            "contextButton": {
                "align": "right",
                "y": -45,
                "x": -5,
                "menuItems": [
                    "downloadPNG",
                    "downloadJPEG",
                    "downloadPDF",
                    "separator",
                    "label"
                ]
            }
        }
    },
    "page": "Ipsum Lorem Ipsum"
}

组件使用代码 #

<HighchartsReact 
  highcharts={Highcharts}
  options={chart_options} 
  allowChartUpdate={true}
  ref={chart_ref}/>

传递的Props：

• highcharts：highcharts/highstock导出的Highcharts对象
• ref：React.createRef()创建的引用

问题原因与解决方案 #

原因定位 #

报错的核心原因是tooltip配置中的formatter属性错误：你给tooltip.formatter赋值了一个空对象{}，但Highcharts要求这个属性必须是一个函数（用于自定义tooltip内容）。当hover触发tooltip刷新时，Highcharts尝试调用这个formatter，但它不是函数，因此抛出m.call is not a function错误。

解决方法 #

有两种处理方式：

1. 不需要自定义tooltip：直接删除整个tooltip配置项，Highcharts会自动使用默认的tooltip展示逻辑；
2. 需要自定义tooltip：将formatter改成符合要求的函数，示例如下：

"tooltip": {
  "formatter": function() {
    return `${this.series.name}: ${this.y}`;
  }
}

另外，检查配置中其他类似的空对象赋值（比如xAxis.title、dataLabels等），这些虽然没触发错误，但不符合Highcharts的配置规范，建议要么删除（使用默认行为），要么正确配置对应属性。

内容的提问来源于stack exchange，提问作者Abhishek Gupta