Highcharts Sunburst下拉更新series后图表未重绘问题

问题现象 #

• 下拉选项变更时调用chart.series[0].setData()更新旭日图数据
• 更新后仅tooltip内容同步为新数据，图表图形未重绘，仍显示旧数据视图

问题原因 #

旭日图是层级结构类图表，开启allowDrillToNode: true钻取配置后，图表会持久化存储当前钻取层级、旧数据生成的节点树布局缓存。单纯调用setData()只会更新图表内部的数据存储，不会自动清空旧的节点缓存、重置钻取状态，导致新数据不会触发布局重算，最终出现tooltip数据已更新但视图不变的问题。
另外原代码中在setData()后额外调用chart.redraw()是多余操作：setData()方法默认第二个参数为true，执行完数据更新后会自动触发重绘。

修复方案 #

方案1：轻量更新（适配新旧数据层级结构一致的场景） #

更新数据前先重置钻取状态到根节点，清空旧布局缓存即可：

$('#type_').on('change',function(){
  // 第二个参数传false表示暂不触发重绘，等数据更新完成后统一重绘
  chart.series[0].setRootNode(null, false);
  // 传入新数据，默认自动触发重绘
  chart.series[0].setData(data2);
});

方案2：全量更新（适配新旧数据结构差异大的场景） #

如果新旧数据的层级数、分类逻辑差异较大，直接调用chart.update()全量替换series配置，彻底规避旧缓存影响：

$('#type_').on('change',function(){
  chart.update({
    series: [{
      type: "sunburst",
      name: 'Root',
      data: data2,
      allowDrillToNode: true,
      cursor: 'pointer',
      point:{
        events:{
          click: function (event) {
            alert(this.name);
          }
        }
      },
      dataLabels: {
        style: {
          fontSize: "12px",
          fontWeight: 'normal',
          fontFamily: "'Open Sans', sans-serif",
          textOutline : 0,
          color: '#fff'
        },
      },
      levels: [{
        level: 1,
        levelIsConstant: false,
        dataLabels: {
          filter: {
            property: 'outerArcLength',
            operator: '>',
            value: 64
          },
        },
      },{
        level: 2,
        dataLabels: {
          rotationMode: 'parallel'
        }
      }, {
        level: 3,
        colorVariation: {
          key: 'brightness',
          to: -0.4
        }
      }]
    }]
  }, true, true);
});

其他配置优化点 #

• 原代码dataLabels样式中写的fontWeight: 'normal !important'不生效：Highcharts的样式配置不支持!important语法，直接写fontWeight: 'normal'即可
• 所有Highcharts的数据、配置更新方法（setData/update/setRootNode等）都自带重绘控制参数，不需要在方法调用后额外手动执行chart.redraw()

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