如何在Highcharts二项式树图中添加文本框并为每一步标注序号

你要的效果可以通过 Highcharts 内置的 SVGRenderer 在图表加载完成后绘制自定义文本实现，以下是修改后的完整可运行代码：

Highcharts.chart('container', {
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  chart: {
    type: 'networkgraph',
    margin: [50, 20, 20, 100], // 上边距预留轮次序号位置，左边距预留Round文字位置
    height: '100%',
    events: {
      load: function () {
        const chart = this
        const renderer = chart.renderer
        // 绘制左侧Round文字
        renderer.text('Round', 40, 30)
          .css({
            fontSize: '14px',
            fontWeight: 'bold'
          })
          .add()
        // 按轮次分组所有节点
        const roundMap = {}
        chart.series[0].nodes.forEach(node => {
          const round = node.id.split(',')[0]
          if (!roundMap[round]) roundMap[round] = []
          roundMap[round].push(node)
        })
        // 逐个绘制每轮的序号
        Object.keys(roundMap).forEach(round => {
          // 取当前轮节点的公共X坐标作为水平中心
          const x = roundMap[round][0].plotX + chart.plotLeft
          // Y坐标固定在绘图区顶部
          const y = 25
          renderer.text(round, x, y)
            .css({
              fontSize: '14px',
              fontWeight: 'bold'
            })
            .add()
        })
      }
    }
  },
  plotOptions: {
    series: {
      cursor: 'crosshair',
      stickyTracking: false,
    }
  },
  series: [{
    marker: {
      radius: 15,
      lineWidth: 2,
      lineColor: 'black',
    },
    layoutAlgorithm: {
      maxIterations: 1,
      initialPositions: function() {
        var chart = this.series[0].chart,
          width = chart.plotWidth,
          height = chart.plotHeight;

        this.nodes.forEach(function(node, i) {
          var initialX = 200;
          var initialY = 500;
          var distance = 80;
          var identifiers = node.id.split(",");
          var round = identifiers[0] - 1;
          var level = identifiers[1] - 1;
          node.plotX = initialX + (round * distance * 2);
          node.plotY = initialY - (round * distance) + (level * 2 * distance);
        });
      }
    },
    keys: ['from', 'to'],
    data: [
      ['1,1', '2,1', 'win'],
      ['1,1', '2,2', 'win'],

      ['2,1', '3,1', 'win'],
      ['2,1', '3,2', 'lose'],
      ['2,2', '3,2', 'win'],
      ['2,2', '3,3', 'lose'],

      ['3,1', '4,1', 'win'],
      ['3,1', '4,2', 'lose'],
      ['3,2', '4,2', 'win'],
      ['3,2', '4,3', 'lose'],
      ['3,3', '4,3', 'win'],
      ['3,3', '4,4', 'lose']
    ],
    nodes: [{
        id: '1,1'
      },
      {
        id: '2,1'
      },
      {
        id: '2,2'
      },
      {
        id: '3,1'
      },
      {
        id: '3,2'
      },
      {
        id: '3,3'
      },
      {
        id: '4,1'
      },
      {
        id: '4,2'
      },
      {
        id: '4,3'
      },
      {
        id: '4,4'
      }
    ],
  }]
})

你可以根据实际显示效果，调整margin参数、文本的坐标以及样式属性，绘制的文本为原生SVG元素，会跟随图表一起缩放、导出。

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