Highcharts从条形图下钻到折线图时图表未翻转该如何解决？

问题根因 #

inverted是图表全局配置项，不属于单一系列的配置参数，因此直接将其写在下钻的系列配置中无法生效 #

实现方案 #

通过监听Highcharts的drilldown（下钻）和drillup（上钻）事件，动态修改图表全局配置即可实现不同层级翻转状态的切换，可适配三层以内任意图表类型的组合需求，具体实现如下：

1. 为每个层级的系列添加custom自定义属性，存储当前层级对应的inverted开关状态
2. 在图表初始化的事件配置中添加下钻、上钻的监听回调，触发时调用chart.update()方法更新全局翻转状态

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    inverted: true, // 第一层为条形图，默认开启坐标轴翻转
    events: {
      // 下钻事件监听
      drilldown: function(e) {
        // 读取目标层级系列自定义的翻转状态，无配置默认关闭翻转
        const targetInverted = e.seriesOptions.custom?.inverted ?? false;
        this.update({
          chart: {
            inverted: targetInverted
          }
        }, false); // 第二个参数设为false，避免重复重绘产生闪烁
      },
      // 上钻事件监听
      drillup: function(e) {
        // 读取回退层级系列自定义的翻转状态，无配置默认开启翻转（适配第一层条形图）
        const targetInverted = e.seriesOptions.custom?.inverted ?? true;
        this.update({
          chart: {
            inverted: targetInverted
          }
        }, false);
      }
    }
  },
  // 其他基础配置、数据配置省略
  drilldown: {
    series: [
      {
        id: 'level2',
        type: 'line', // 第二层为折线图
        custom: {
          inverted: false // 第二层不需要翻转
        },
        data: [/* 第二层数据 */]
      },
      {
        id: 'level3',
        type: 'pie', // 第三层为饼图
        custom: {
          inverted: false // 第三层不需要翻转
        },
        data: [/* 第三层数据 */]
      }
    ]
  }
})

补充说明 #

如果存在更多自定义配置（比如坐标轴样式、图例显示规则等），都可以按照相同逻辑将对应配置存在系列的custom字段中，在上下钻事件触发时统一通过chart.update()批量更新即可。

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