javascript - Highchart.js 显示的组织结构图显示不正确

Question

我正在创建一个组织结构图。问题是显示不正确，如下图所示

组织结构图截图

如您所见，框宽度不适合文本，文本被剪切。另外，我想用箭头框只连接到公共部门框。现在这个盒子似乎是另一个盒子的一部分。

下面是代码。

Highcharts.chart('container', {
  chart: {
    height: 600,
    inverted: true
  },

  title: {
    text: 'Organisation Chart'
  },

  accessibility: {
    point: {
      descriptionFormatter: function (point) {
        var nodeName = point.toNode.name,
          nodeId = point.toNode.id,
          nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
          parentDesc = point.fromNode.id;
        return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
      }
    }
  },

      series: [{
        type: 'organization',
        name: 'Senior Management Team',
        keys: ['from', 'to'],
        data: [
          
          ['Facility Director', 'Deputy Policy & Advisory'],
          ['Facility Director', 'Deputy Partnership, Policy & Performance'],
          ['Facility Director', 'Chief of Operations'],
          ['Deputy Policy & Advisory', 'Markets'],
          ['Deputy Policy & Advisory', 'Financial Sector'],
          ['Deputy Policy & Advisory', 'Economic & Inclusion'],
          ['Deputy Policy & Advisory', 'CMEA Hub'],
          ['Deputy Policy & Advisory', 'Spending'],
          ['Deputy Policy & Advisory', 'Revenue'],
          ['Deputy Partnership, Policy & Performance', 'Public Sector']

    ],
    levels: [{
      level: 0,
      color: '#20abca',
      dataLabels: {
        color: 'white'
      },
      height: 25
    }, {
      level: 1,
      color: '#20abca',
      dataLabels: {
        color: 'white'
      },
      height: 25
    }, {
      level: 2,
      color: '#980104'
    }, {
      level: 4,
      color: '#359154'
    }],
    
    nodes: [{
      id: 'Facility Director',
      title: 'Facility Director',
      name: 'David Nellor',
      
      image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131120/Highsoft_04074_.jpg'
    }, {
      id: 'Deputy Policy & Advisory',
      title: 'Deputy Policy & Advisory',
      name: 'Della Temenggung',
      image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131126/Highsoft_03862_.jpg'
    }, {
      id: 'Deputy Partnership, Policy & Performance',
      title: 'Deputy Partnership, Policy & Performance',
      name: 'Melissa Wells',
      image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131156/Highsoft_03834_.jpg'
      
    }, {
      id: 'Chief of Operations',
      title: 'Chief of Operations',
      name: 'Robert Kennedy',
      image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131213/Highsoft_03998_.jpg'
    }, {
      id: 'Markets',
      name: 'Markets'
    }, {
      id: 'Financial Sector',
      name: 'Financial Sector'
    }, {
      id: 'Economic & Inclusion',
      name: 'Economic & Inclusion'
    }, {
      id: 'CMEA Hub',
      name: 'CMEA Hub',
    }, {
      id: 'Spending',
      name: 'Spending',
    }, {
      id: 'Revenue',
      name: 'Revenue',
    }],

    colorByPoint: false,
    color: '#007ad0',
    dataLabels: {
      color: 'white'
    },
    borderColor: 'white',
    nodeWidth: 65
  }],
  tooltip: {
    outside: true
  },
  exporting: {
    allowHTML: true,
    sourceWidth: 800,
    sourceHeight: 600
  }

});

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

#container h4 {
  text-transform: none;
  font-size: 14px;
  font-weight: normal;
}
#container p {
  font-size: 13px;
  line-height: 16px;
}

@media screen and (max-width: 600px) {
  #container h4 {
    font-size: 2.3vw;
    line-height: 3vw;
  }
  #container p {
    font-size: 2.3vw;
    line-height: 3vw;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prospera Organization chart</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <figure class="highcharts-figure">
      <div id="container"></div>
      <p class="highcharts-description">
        Organization charts are a common case of hierarchical network charts,
        where the parent/child relationships between nodes are visualized.
        Highcharts includes a dedicated organization chart type that streamlines
        the process of creating these types of visualizations.
      </p>
    </figure>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/sankey.js"></script>
    <script src="https://code.highcharts.com/modules/organization.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script src="script.js"></script>
  </body>
</html>

你能告诉我如何解决这个问题吗？

非常感谢

标签： javascripthtmlcsshighcharts