Как выровнять метки диаграммы Санки? - PullRequest
Новая
       24

Как выровнять метки диаграммы Санки?

0 голосов
/ 24 сентября 2018

В этом примере, когда некоторые значения совпадают (например, 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/

1 Ответ

0 голосов
/ 25 сентября 2018

Вы можете вернуть каждую метку как элемент 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

...