如何在Sankey Graph中获取节点坐标数据

Question

我正在尝试创建类似于下图的内容。每列都有一个标题。

我知道 chart.renderer.text 可用于在图表上创建和放置自定义文本。但是，我无法找到一种方法来获取 column/node 坐标数据 (x,y) 来帮助我放置它们。

还有一种编程方式可以完成此任务。例如，获取所有列坐标并填充现有列表中所有标题的函数。

总结一下：

如何获取列的 (x,y) 坐标？
如何为列表中的所有列动态放置标题？

Image

Answer 1

可以得到需要的坐标，将headers放在render事件中，例如：

events: {
  render: function() {
    var chart = this,
      series = chart.series[0],
      columns = series.nodeColumns,
      isFirst,
      isLast,
      xPos;

    if (!series.customHeaders) {
      series.customHeaders = [];
    }

    columns.forEach(function(column, i) {
      xPos = column[0].nodeX + chart.plotLeft;
      isFirst = i === 0;
      isLast = i === columns.length - 1;

      if (!series.customHeaders[i]) {
        series.customHeaders.push(
          chart.renderer.text(
            headers[i],
            xPos,
            80
          ).attr({
            translateX: isFirst ? 0 : (
              isLast ?
              series.options.nodeWidth :
              series.options.nodeWidth / 2
            ),
            align: isFirst ? 'left' : (
              isLast ? 'right' : 'center'
            )
          }).add()
        )
      } else {
        series.customHeaders[i].attr({
          x: xPos
        });
      }
    });
  }
}

现场演示： https://jsfiddle.net/BlackLabel/6Lvdufbp/

API参考：

https://api.highcharts.com/highcharts/chart.events.render

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

如何在Sankey Graph中获取节点坐标数据

How to get Node Coordinates Data in Sankey Graph

highcharts

sankey-diagram