如何对齐三键图的标签？

Question

在本例中，当某些值相同(例如0)时，标签就会被重叠。有人能帮我把这些标签垂直对齐吗？我希望它们被移动到节点/栏的顶部。

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

您可以将每个标签作为HTML元素返回：

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

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

.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