Highcharts节点的显示宽度不足

编程问答 2022-06-07

问题描述

我有一个高图表角度的组织结构图，其中图表中有很多节点时，框会变小，并且其文本会被隐藏。如何使图表根据需要展开（并显示水平滚动条），以便所有内容都完全可见？

您可以看到示例here。

我的图表选项是这些

chartOptions: Highcharts.Options = {
    chart: { inverted: true },title: {  text: null },tooltip: {
      useHTML: true,padding: 10,style: { fontStyle: 'normal' },outside: true,distance: 30
    },series: [
      {
        type: 'organization',name: null,keys: ['from','to'],data: [],nodes: [],colorByPoint: false,color: 'white',borderColor: '#c1c1c1',}
    ]
  };

和html 

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions" 
  style="width: 100%; height: 100%; display: block;"
></highcharts-chart>

解决方法

将chart.width属性设置为适合您的值，然后更改图表容器的默认overflow样式。

JS：

chart: {
    width: 2000,...
},

CSS：

#container {
    overflow: scroll !important;
}

实时示例： https://jsfiddle.net/BlackLabel/t3b9fren/

API参考： https://api.highcharts.com/highcharts/chart.width

angular2-highchartshighchartshighcharts