如何在JSON定义的Highcharts中禁用图例项点击功能

我需要禁用Highcharts中图例项的点击功能。通常我会根据情况在点或系列上使用以下代码：

events: { legendItemClick: function() { return false; } }

但我当前工作的页面要求整个HighChart必须在JSON对象内定义，例如：

{ "chart": { "type":"column"}, "xAxis": { "categories":["a", "b", "c", "d"] }, "series": [{ "name": "name", "data": [0,1,2,3] }] }

显然JSON中无法包含函数，因此我难以找到禁用legendItemClick的方法。我可以修改站点模板用JS构建图表来解决问题，但要求尽量在现有系统内实现。欢迎各位提出建议。

我刚好碰到过类似的场景，给你几个不用大改模板就能实现的方案：

• 全局覆盖图例点击行为
  如果页面上只有这一个Highcharts图表，你可以在渲染图表前，通过Highcharts.wrap方法全局修改图例的点击逻辑：

  Highcharts.wrap(Highcharts.Legend.prototype, 'onItemClick', function(proceed) {
    // 跳过默认的点击处理逻辑，直接返回
    return;
  });
  

  这段代码会让所有Highcharts图例的点击事件失效，要是有多个图表需要区分，你还可以在wrap方法里加判断，比如根据图表的容器ID来决定是否禁用。

• 渲染后动态给系列添加禁用逻辑
  图表渲染完成后，遍历所有系列，手动给它们添加上legendItemClick事件并返回false，示例代码：

  // 假设你是这样渲染图表的
  var chartConfig = { /* 你的纯JSON配置 */ };
  var chart = Highcharts.chart('your-container-id', chartConfig);
  
  // 遍历所有系列，禁用图例点击
  chart.series.forEach(function(series) {
    series.options.events = series.options.events || {};
    series.options.events.legendItemClick = function() {
      return false;
    };
    series.update(series.options, false); // 不立即重绘
  });
  chart.redraw(); // 统一重绘图表
  

  这个方法更灵活，只会影响目标图表，不会干扰页面上的其他图表。

• 自定义静态图例
  要是上面的方法都不合适，你可以直接禁用Highcharts自带的图例，然后用HTML自己写一个静态的图例，完全避免点击事件的问题。在你的JSON配置里添加：

  "legend": { "enabled": false }
  

  之后用HTML+CSS模拟出和Highcharts一致的图例样式就行，这种方式完全符合纯JSON配置的要求，只是需要额外写一点前端样式代码。

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