首页 > 解决方案 > 增加 Sankey Highcharts 数据系列栏的高度

问题描述

使用 highcharts 的 Sankey 图表,我需要知道是否可以增加与每个数据关联的条形高度,并且还需要在工具提示中显示新行中每个系列数据的附加信息。

我尝试使用 css 来增加条形的高度,但没有成功

https://jsfiddle.net/samwhite/9a5qymvs/

Highcharts.setOptions({
        colors: ['#538FB3', '#F6F6BC', '#96CAC1', '#C1BED6', '#EA8E83', '#8AAFC9', '#EAB375', '#AFCF78', '#F6D3E5', '#2f6f81', '#D9D9D9', '#3D6D52'],
      })
      Highcharts.chart('container', {
        chart: { //height: 600,
          //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;

            return 'From <b>' + from +
              '</b> to <b>' + to + '</b> weight is ' + displayedWeight;
          }
        },
        series: [{
          keys: ['from', 'to', 'weight'],
          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'
        }]
      });

标签: javascriptjqueryhighchartssankey-diagram

解决方案


推荐阅读