如何从JSON向Highcharts传递动态函数类配置选项？

一、JSON传递函数的可行技巧 #

JSON本身不支持序列化函数类型，直接转JSON会把函数变成字符串，这里提供两种实用方案：

1. 字符串化函数 + 客户端转换（需注意安全）

服务端把函数转换成字符串形式返回：

// 服务端代码
JSON.stringify({
  tooltip: {
    formatter: "function() { return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>'; }"
  }
});

客户端解析后，用new Function把字符串转为函数（比eval更安全，避免全局污染）：

// 客户端代码
const config = JSON.parse(serverResponse);
if (config.tooltip?.formatter) {
  config.tooltip.formatter = new Function('return ' + config.tooltip.formatter)();
}
Highcharts.chart('container', config);

注意：如果服务端返回内容不可控，这种方式存在XSS风险，建议优先用下面的方案。

2. 传递函数标识 + 客户端预定义映射

服务端只返回函数的标识字符串，客户端本地维护函数映射表：

// 服务端代码
JSON.stringify({
  tooltip: {
    formatter: "defaultTooltip"
  }
});

客户端提前定义对应函数，替换配置：

// 客户端代码
const formatterMap = {
  defaultTooltip: function() {
    return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>';
  },
  customTooltip: function() {
    return `X: ${this.x}, Y: ${this.y}`;
  }
};

const config = JSON.parse(serverResponse);
if (config.tooltip?.formatter && formatterMap[config.tooltip.formatter]) {
  config.tooltip.formatter = formatterMap[config.tooltip.formatter];
}
Highcharts.chart('container', config);

这种方式更安全，也便于统一维护客户端的动态逻辑。

二、客户端动态补充Highcharts配置 #

如果不想从服务端传递函数，完全可以在客户端生成图表前/后添加动态配置：

1. 生成图表前补充配置

先解析服务端的基础配置，再手动合并动态项：

const serverConfig = JSON.parse(serverResponse);
// 保留服务端已有tooltip配置，补充formatter
serverConfig.tooltip = {
  ...serverConfig.tooltip,
  formatter: function() {
    return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>';
  }
};
// 生成图表
Highcharts.chart('container', serverConfig);

2. 图表加载后更新配置

用Highcharts的update方法动态修改配置：

// 先加载服务端配置生成图表
const chart = Highcharts.chart('container', JSON.parse(serverResponse));
// 之后更新tooltip
chart.update({
  tooltip: {
    formatter: function() {
      return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>';
    }
  }
});

三、AngularJS父子作用域访问动态配置 #

在AngularJS中，子作用域默认继承父作用域的属性，但要避开原型继承的坑：

1. 用对象包裹配置（推荐）

父作用域把动态配置放在一个对象里（引用类型），子作用域会继承这个引用，不会创建副本：

// 父控制器
app.controller('ParentCtrl', function($scope) {
  $scope.chartSettings = {
    tooltipFormatter: function() {
      return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>';
    }
  };
});

// 子控制器
app.controller('ChildCtrl', function($scope) {
  const serverConfig = JSON.parse(serverResponse);
  serverConfig.tooltip = {
    formatter: $scope.chartSettings.tooltipFormatter
  };
  Highcharts.chart('container', serverConfig);
});

2. 用共享服务传递配置（更优雅）

创建AngularJS服务共享配置，彻底摆脱作用域继承的依赖：

// 定义共享服务
app.service('ChartConfigService', function() {
  this.dynamicOptions = {};
  
  this.setTooltipFormatter = function(fn) {
    this.dynamicOptions.tooltipFormatter = fn;
  };
  
  this.getTooltipFormatter = function() {
    return this.dynamicOptions.tooltipFormatter;
  };
});

// 父控制器
app.controller('ParentCtrl', function($scope, ChartConfigService) {
  ChartConfigService.setTooltipFormatter(function() {
    return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>';
  });
});

// 子控制器
app.controller('ChildCtrl', function($scope, ChartConfigService) {
  const serverConfig = JSON.parse(serverResponse);
  serverConfig.tooltip = {
    formatter: ChartConfigService.getTooltipFormatter()
  };
  Highcharts.chart('container', serverConfig);
});

3. 避免直接用$parent（不推荐）

虽然可以用$scope.$parent直接访问父作用域变量，但会增加父子控制器的耦合性，后期维护困难，不建议使用。

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