Javascript 如何对齐sankey图表的标签?
在本例中,当某些值相同(例如0)时,标签重叠。有人能帮我把这些标签垂直对齐吗?我希望将它们移动到节点/栏的顶部Javascript 如何对齐sankey图表的标签?,javascript,angular,highcharts,sankey-diagram,Javascript,Angular,Highcharts,Sankey Diagram,在本例中,当某些值相同(例如0)时,标签重叠。有人能帮我把这些标签垂直对齐吗?我希望将它们移动到节点/栏的顶部 Highcharts.chart('container', { series: [{ keys: ['from', 'to', 'weight'], data: [ ['Oil', 'Transportation', 94], ['Natural Gas', 'Transportation', 3
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'
}]
});
您可以将每个标签作为HTML元素返回:
plotOptions: {
sankey: {
dataLabels: {
useHTML: true,
nodeFormatter: function() {
return "<span class='labelPosition label-" + this.colorIndex + "'>" + this.key + "</span>"
}
}
}
},
在线演示:将dataLabels.padding设置为-5是否足够@raf18seb填充选项是水平移动标签,我希望标签之间有相当大的垂直间隙。如何在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;
}