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

Question

我正试图创建类似于下图的东西。其中每一列都有一个标题。

我知道chart.renderer.text可以用来创建&amp；在图表上放置自定义文本。然而，我无法找到一种方法来获取columnnode坐标data(x,y)，这将帮助我放置它们。

另外，有没有一种程序化的方法来完成这个任务。例如，一个函数，获取所有的列坐标，并从现有的列表中填充所有的标题。

总结一下。

• 如何获取一个列(x,y)的坐标？
• 如何从一个列表中动态地放置所有列的标题？

图片

Answer 1

你可以得到所需的坐标，并将标题放置在以下位置 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.netBlackLabel6Lvdufbp。

API参考。

https:/api.highcharts.comhighchartschart.event.render。

https:/api.highcharts.comclass-referenceHighcharts.SVGRenderer#text。