Highcharts Editor 中数据标签格式化函数加载问题解析

问题背景

在使用 Highcharts Editor 进行图表编辑时，开发者可能会遇到一个常见问题：当保存项目后重新加载时，控制台报出"TypeError: (c[(t.formatPrefix + "Formatter")] || c.formatter).call is not a function"错误。这个问题通常与数据标签(dataLabels)的格式化函数(formatter)有关。

问题现象

当开发者使用以下代码保存和加载项目时：

// 保存项目
var projectStr = chartEditor.editor.chart.toProjectStr();

// 加载项目
chartEditor.editor.chart.loadProject(chartProjectJson);

系统会抛出类型错误，导致图表无法正常加载。检查项目JSON会发现，问题出在数据标签的formatter属性上，该属性被保存为一个字符串形式的函数定义。

技术分析

Highcharts Editor 在序列化图表配置时，会将JavaScript函数转换为字符串形式保存。然而在反序列化(加载项目)过程中，这些字符串形式的函数定义可能无法被正确解析回可执行的函数。

具体到数据标签的formatter属性，Highcharts期望这是一个可调用的函数，但加载后它变成了一个字符串，导致调用时出现类型错误。

解决方案

临时解决方案

在加载项目JSON前，可以手动移除数据标签中的formatter属性：

if (chartProjectJson["options"].hasOwnProperty("series")) {
    for (var i = 0; i < chartProjectJson["options"]["series"].length; i++) {
        if (chartProjectJson["options"]["series"][i].hasOwnProperty("dataLabels")) {
            var dataLabel = chartProjectJson["options"]["series"][i]["dataLabels"];
            if (dataLabel.hasOwnProperty("formatter")) {
                delete chartProjectJson["options"]["series"][i]["dataLabels"].formatter;
            }
        }
    }
}

这种方法虽然能解决问题，但会导致自定义的格式化功能丢失。

推荐解决方案

1. 升级到最新版Highcharts Editor：确保使用的是最新版本的编辑器，这个问题可能在新版本中已经修复。

2. 自定义序列化/反序列化逻辑：如果需要保留格式化功能，可以实现自定义的序列化和反序列化逻辑，确保函数能被正确转换。

3. 使用配置对象而非函数：对于简单的格式化需求，考虑使用Highcharts提供的配置选项而非自定义函数，这样能避免序列化问题。

最佳实践建议

1. 定期备份项目配置时，建议同时检查数据标签的格式化函数是否被正确处理。

2. 对于生产环境，建议在加载图表配置前进行验证，确保所有函数类型的属性都被正确解析。

3. 考虑将复杂的格式化逻辑提取到外部函数中，通过引用而非内联定义的方式使用。

总结

Highcharts Editor在处理包含函数属性的图表配置时可能会出现序列化/反序列化问题，特别是数据标签的格式化函数。开发者可以通过升级版本、修改加载逻辑或调整格式化实现方式来解决这一问题。理解这一机制有助于更好地利用Highcharts Editor的强大功能，同时避免常见的配置加载问题。