Highcharts 桑基图中的列标签

Question

我一直在使用 Highcharts 库使用桑基图进行可视化。看起来像下面。

我需要帮助为上图中突出显示的每一列添加标签。我找不到任何使用格式化程序的解决方法，因为 sankey 中没有可用的 x 和 y 轴。

如果有人能帮我做这件事就好了。你可以找到我的jsfiddle here.

编辑：我现在能够绘制 x 和 y 轴，但试图将标签恰好放在每一列的下方。损坏fiddlelink已更新

    const data = [{
    "from": "step1_x",
    "to": "step2_x",
    "weight": 100
  },
  {
    "from": "step1_x",
    "to": "step2_y",
    weight: 35
  },
  {
    "from": "step1_x",
    "to": "step2_z",
    weight: 50
  },
    {
    "from": "step1_y",
    "to": "step2_y",
    weight: 55
  },
  {
    "from": "step1_y",
    "to": "step2_x",
    weight: 20
  },
  {
    "from": "step1_y",
    "to": "step2_z",
    weight: 30
  },
  {
    "from": "step1_z",
    "to": "step2_y",
    weight: 18
  },
  {
    "from": "step1_z",
    "to": "step2_x",
    weight: 15
  },
  {
    "from": "step1_z",
    "to": "step2_z",
    weight: 40
  },
  {
    "from": "step2_x",
    "to": "step3_x",
    "weight": 50
  },
  {
    "from": "step2_x",
    "to": "step3_y",
    weight: 55
  },
  {
    "from": "step2_x",
    "to": "step3_z",
    weight: 30
  },
    {
    "from": "step2_y",
    "to": "step3_y",
    weight: 90
  },
  {
    "from": "step2_y",
    "to": "step3_x",
    weight: 40
  },
  {
    "from": "step2_y",
    "to": "step3_z",
    weight: 51
  },
  {
    "from": "step2_z",
    "to": "step3_y",
    weight: 30
  },
  {
    "from": "step2_z",
    "to": "step3_x",
    weight: 40
  },
  {
    "from": "step2_z",
    "to": "step3_z",
    weight: 90
  },
  
];

const nodes = [{
    "id": "step1_x",
    "name": "X",
    color: 'black'
  }, {
    "id": "step2_x",
    "name": "X",
    color: 'black',
  },
  {
    "id": "step3_x",
    "name": "X",
     color: 'black',
  },
  {
    "id": "step1_y",
    "name": "Y",
    color: '#f15c80'
  }, {
    "id": "step2_y",
    "name": "Y",
        color: '#f15c80'
  }, {
    "id": "step3_y",
    "name": "Y",
        color: '#f15c80'
  }, {
    "id": "step1_z",
    "name": "Z",
    color: '#f7a35c'
  }, {
    "id": "step2_z",
    "name": "Z",
        color: '#f7a35c'
  }, {
    "id": "step3_z",
    "name": "Z",
     color: '#f7a35c'
  },

];


Highcharts.chart('container', {
  title: {
    text: 'Highcharts Sankey Diagram'
  },
  
  yAxis: {
        labels: {
    enabled: true,
    formatter:function () {
    return '1231';
    }
    }
  },

  series: [{
    data: data,
       nodes: nodes,
    type: 'sankey',
    name: 'Sankey demo series',
    nodeWidth: 20
  }],
  plotOptions: {
    sankey: {
      dataLabels: {
        overflow: 'allow',
crop: true,
        enabled: true,
                formatter: function () {
            return this.point.weight;
        }
      }
    }
  }
});

Answer 1

您可以使用renderer.text方法添加标签。示例如下：

const labels = ['column 1', 'column 2', 'column 3'];

Highcharts.chart('container', {
    chart: {
        spacingBottom: 50,
        events: {
            render: function() {
                const positions = [30, this.chartWidth / 2, this.chartWidth - 30];

                if (this.customLabels) {
                    this.customLabels.forEach((customLabel, i) => {
                        customLabel.attr({
                            x: positions[i],
                            y: this.chartHeight - 20
                        });
                    });
                } else {
                    this.customLabels = [];
                    labels.forEach((label, i) => {
                        this.customLabels.push(
                            this.renderer.text(labels[i])
                            .attr({
                                x: positions[i],
                                y: this.chartHeight - 20,
                                align: 'center'
                            })
                            .css({
                                fontSize: '12px'
                            })
                            .add()
                        );
                    });
                }
            }
        }
    },
    ...
});

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

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

Highcharts 桑基图中的列标签

Column Labels in Sankey Charts in Highcharts

highcharts

axis-labels

sankey-diagram