如何调整Highcharts桑基图数据条高度并自定义tooltip显示内容

解决方案 #

针对你提出的两个需求，直接通过Highcharts自带配置即可实现，无需额外CSS修改：

• 增大数据条形高度
  桑基图的节点条形高度由图表总高度、节点总数量、节点间距三个参数共同决定，你可以在series配置中添加nodePadding参数来缩小同列节点的间距，从而提升单条条形的高度，默认值为10，数值越小高度越大，也可以同时增大chart.height参数提升图表总高度获得更大的调整空间。
• tooltip新增换行展示的额外信息
  Highcharts的tooltip支持返回HTML格式内容，你直接在原有formatter回调的返回值中拼接<br/>标签即可实现换行，额外信息直接跟在换行标签后即可。

修改后完整代码 #

Highcharts.setOptions({
  colors: ['#538FB3', '#F6F6BC', '#96CAC1', '#C1BED6', '#EA8E83', '#8AAFC9', '#EAB375', '#AFCF78', '#F6D3E5', '#2f6f81', '#D9D9D9', '#3D6D52'],
})
Highcharts.chart('container', {
  chart: { 
    height: 800, // 增大图表总高度，可根据需求调整
    //width: 2000, 
  },
  title: {
    text: 'Sankey',
    align: 'left',
    style: {
      color: '#2B2B2B',
      fontSize: '20px',
      fontWeight: 'bold',
    }
  },
  credits: {
    enabled: false
  },
  accessibility: {
    point: {
      valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
    }
  },
  tooltip: {
    formatter: function() {
      let weight = this.point.weight,
        from = this.point.from,
        to = this.point.to,
        displayedWeight;
      weight === 1 ? displayedWeight = 0 : displayedWeight = weight;
      // 新增<br/>换行，拼接自定义额外信息即可
      return 'From <b>' + from +
        '</b> to <b>' + to + '</b> weight is ' + displayedWeight +
        '<br/>*额外信息：这里填写你要展示的自定义内容';
    }
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    nodePadding: 2, // 缩小节点间距，增大条形高度，可根据需求调整数值
    data: [
      [' Accelerated Filer 2017', ' Non-accelerated Filer 2018', 79],
      [' Accelerated Filer 2017', ' Smaller Reporting Accelerated Filer 2018', 23],
      [' Accelerated Filer 2017', ' Smaller Reporting Company 2018', 34],
      [' Large Accelerated Filer 2017', ' Accelerated Filer 2018', 61],
      [' Large Accelerated Filer 2017', ' Non-accelerated Filer 2018', 14],
      [' Non-accelerated Filer 2017', ' Accelerated Filer 2018', 222],
      [' Non-accelerated Filer 2017', ' Large Accelerated Filer 2018', 65],
      [' Non-accelerated Filer 2017', ' Smaller Reporting Accelerated Filer 2018', 1],
      [' Non-accelerated Filer 2017', ' Smaller Reporting Company 2018', 45],
      [' Smaller Reporting Accelerated Filer 2017', ' Accelerated Filer 2018', 20],
      [' Smaller Reporting Accelerated Filer 2017', ' Non-accelerated Filer 2018', 5],
      [' Smaller Reporting Accelerated Filer 2017', ' Smaller Reporting Company 2018', 3],
      [' Smaller Reporting Company 2017', ' Accelerated Filer 2018', 61],
      [' Smaller Reporting Company 2017', ' Large Accelerated Filer 2018', 1],
      [' Smaller Reporting Company 2017', ' Non-accelerated Filer 2018', 2039],
      [' Smaller Reporting Company 2017', ' Smaller Reporting Accelerated Filer 2018', 6],
      [' Smaller Reporting Company 2017', ' Status Indeterminate 2018', 1],
      [' Status Indeterminate 2017', ' Non-accelerated Filer 2018', 1],
      [' Accelerated Filer 2018', ' Large Accelerated Filer 2019', 87],
      [' Accelerated Filer 2018', ' Non-accelerated Filer 2019', 130],
      [' Accelerated Filer 2018', ' Smaller Reporting Accelerated Filer 2019', 5],
      [' Accelerated Filer 2018', ' Smaller Reporting Company 2019', 6],
      [' Large Accelerated Filer 2018', ' Accelerated Filer 2019', 86],
      [' Large Accelerated Filer 2018', ' Non-accelerated Filer 2019', 12],
      [' Non-accelerated Filer 2018', ' Accelerated Filer 2019', 230],
      [' Non-accelerated Filer 2018', ' Large Accelerated Filer 2019', 72],
      [' Non-accelerated Filer 2018', ' Smaller Reporting Company 2019', 19],
      [' Smaller Reporting Accelerated Filer 2018', ' Accelerated Filer 2019', 18],
      [' Smaller Reporting Accelerated Filer 2018', ' Smaller Reporting Company 2019', 1],
      [' Smaller Reporting Company 2018', ' Accelerated Filer 2019', 10],
      [' Smaller Reporting Company 2018', ' Non-accelerated Filer 2019', 150],
      [' Smaller Reporting Company 2018', ' Smaller Reporting Accelerated Filer 2019', 2],
      [' Smaller Reporting Company 2018', ' Status Indeterminate 2019', 1],
      [' Status Indeterminate 2018', ' Large Accelerated Filer 2019', 1],
      [' Status Indeterminate 2018', ' Non-accelerated Filer 2019', 5],
      [' Status Indeterminate 2018', ' Smaller Reporting Company 2019', 1],
      [' Accelerated Filer 2019', ' Large Accelerated Filer 2020', 84],
      [' Accelerated Filer 2019', ' Non-accelerated Filer 2020', 530],
      [' Accelerated Filer 2019', ' Status Indeterminate 2020', 8],
      [' Large Accelerated Filer 2019', ' Accelerated Filer 2020', 167],
      [' Large Accelerated Filer 2019', ' Non-accelerated Filer 2020', 16],
      [' Large Accelerated Filer 2019', ' Status Indeterminate 2020', 4],
      [' Non-accelerated Filer 2019', ' Accelerated Filer 2020', 99],
      [' Non-accelerated Filer 2019', ' Large Accelerated Filer 2020', 64],
      [' Non-accelerated Filer 2019', ' Smaller Reporting Company 2020', 1],
      [' Non-accelerated Filer 2019', ' Status Indeterminate 2020', 2],
      [' Smaller Reporting Accelerated Filer 2019', ' Smaller Reporting Company 2020', 1],
      [' Smaller Reporting Company 2019', ' Accelerated Filer 2020', 1],
      [' Smaller Reporting Company 2019', ' Non-accelerated Filer 2020', 33],
      [' Smaller Reporting Company 2019', ' Status Indeterminate 2020', 2],
      [' Status Indeterminate 2019', ' Large Accelerated Filer 2020', 2],
      [' Status Indeterminate 2019', ' Non-accelerated Filer 2020', 1],
      [' Accelerated Filer 2020', ' Large Accelerated Filer 2021', 17],
      [' Accelerated Filer 2020', ' Non-accelerated Filer 2021', 29],
      [' Large Accelerated Filer 2020', ' Accelerated Filer 2021', 16],
      [' Non-accelerated Filer 2020', ' Accelerated Filer 2021', 15],
      [' Non-accelerated Filer 2020', ' Large Accelerated Filer 2021', 12],
      [' Smaller Reporting Company 2020', ' Non-accelerated Filer 2021', 7],
      [' Status Indeterminate 2020', ' Accelerated Filer 2021', 1],
      [' Status Indeterminate 2020', ' Non-accelerated Filer 2021', 1]
    ],
    type: 'sankey',
    dataLabels: {
      format: '<span style="font-weight: normal; font-size: 16px">' +
        '{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight}' +
        '</span>',
      nodeFormat: '{point.name}'
    },
    name: 'Sankey demo series'
  }]
});

内容的提问来源于stack exchange，提问作者Shaun