将文本框添加到图表并绘制字符串

Question

如何在此二项式树中的每个步骤上添加地名？我想在标题下方和树的左侧显示单词 'Round'，然后在每个步骤的正上方显示 1-4。

我可以在加载图表时创建一个文本框，然后遍历轮数，边画边画数字吗？

我希望它看起来像这样：

Highcharts.chart('container', {
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  chart: {
    type: 'networkgraph',
    margin: 20,
    height: '100%',
  },
  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'
      }
    ],
  }]
})

https://jsfiddle.net/z6418bqf/

Answer 1

我找到了实现它的方法。检查下面的代码，它显示了如何为每个组找到唯一的 x 位置并使用渲染器工具渲染自定义文本：

events: {
  load() {
    const chart = this;
    const y = chart.plotTop + chart.title.alignAttr.y;
    chart.renderer.text(
      'Round',
      10, //fixed left-margin
      y
    ).attr({
      zIndex: 5
    }).add()

    setTimeout(function() {
      const xPositions = [...new Set(chart.series[0].nodes.map(node => node.prevX))]

      xPositions.forEach((x, i) => {
        chart.renderer.text(
          i + 1,
          x + chart.plotLeft,
          y
        ).add()
      })
    }, 10)
  }
}

演示：https://jsfiddle.net/BlackLabel/u02hvz1a/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

将文本框添加到图表并绘制字符串

Add textbox to chart and draw strings

highcharts