如何对齐桑基图的标签？

Question

在此示例中，当某些值相同（例如 0）时，标签会重叠。有人可以帮我垂直对齐这些标签吗？我希望将它们移动到 node/bar.

的顶部

Highcharts.chart('container', {

    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Oil', 'Transportation', 94],
            ['Natural Gas', 'Transportation', 3],
            ['Coal', 'Transportation', 0],
            ['Renewable', 'Transportation', 0],
            ['Nuclear', 'Transportation', 3],

            ['Oil', 'Industrial', 0],
            ['Natural Gas', 'Industrial', 0],
            ['Coal', 'Industrial',0],
            ['Renewable', 'Industrial', 0],
            ['Nuclear', 'Industrial',0],

            ['Oil', 'Residential & Commercial', 0],
            ['Natural Gas', 'Residential & Commercial', 0],
            ['Coal', 'Residential & Commercial',0],
            ['Renewable', 'Residential & Commercial', 0],
            ['Nuclear', 'Residential & Commercial', 0],

            ['Oil', 'Electric Power', 0],
            ['Natural Gas', 'Electric Power', 0],
            ['Coal', 'Electric Power', 0],
            ['Renewable', 'Electric Power', 0],
            ['Nuclear', 'Electric Power', 0]
        ],
        type: 'sankey',
        name: 'Energy in the United States'
    }]

});

http://jsfiddle.net/Lmn6gjby/3/

Answer 1

您可以 return 每个标签作为 HTML 元素：

plotOptions: {
  sankey: {
    dataLabels: {
      useHTML: true,
      nodeFormatter: function() {
        return "<span class='labelPosition label-" + this.colorIndex + "'>" + this.key + "</span>"
      }
    }
  }
},

设置position: relative;并在CSS中手动定位每个标签：

.labelPosition {
  color: black;
  position: relative;
}

.label-0 {
  top: 0px;
}

.label-5 {
  top: 6px;
}

.label-6 {
  top: -1px;
}

.label-7 {
  top: 2px;
}

.label-8 {
  top: 12px;
}

在线演示：jsFiddle

如何对齐桑基图的标签？

How to align the labels of sankey diagram?

javascript

highcharts

sankey-diagram

angular