使用的Google时间线图表未以角度显示完整的行标签

问题描述

您好，我刚刚开始使用Google图表，但发现第一列中的标签并未完全显示。我在Ang2-google-charts作为模块的角度9.0.3中使用这些图表。我尝试更改宽度，高度和其他选项，但标签未显示。这是结果图表的图像。

图表外观的图像-

这是我的下面的代码

import { Component,OnInit } from '@angular/core';
import { GoogleChartInterface } from 'ng2-google-charts';

@Component({
  selector: 'app-component',templateUrl: './app.component.html'
})
export class GroupAnalysisPageComponent implements OnInit {
  
  constructor() { }

  timelineChart: GoogleChartInterface = {
    chartType: 'Timeline',dataTable: [
      ['Name','From','To'],[ 'Washington',new Date(1789,3,29),new Date(1797,2,3) ],[ 'Adams',3),new Date(1801,[ 'Jefferson',new Date(1809,3) ]
    ],options: {
      'width': 1200,'avoidOverlappingGridLines':false
    },};
}

这是我的模板

<div [hidden]="condition">
  <google-chart [data]="timelineChart"></google-chart>
<div>

解决方法

将图表绘制在隐藏的容器中然后在以后显示时会发生这种情况。
隐藏容器后，图表将无法正确计算标签的宽度。

请参阅以下工作片段，该片段使用-> display: none;

google.charts.load('current',{
  packages: ['timeline']
}).then(function () {
  var dataTable = google.visualization.arrayToDataTable([
    ['Name','From','To'],[ 'Washington',new Date(1789,3,29),new Date(1797,2,3) ],[ 'Adams',3),new Date(1801,[ 'Jefferson',new Date(1809,3) ]
  ]);

  var options = {
    'width': 1200,'avoidOverlappingGridLines':false
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  google.visualization.events.addListener(chart,'ready',function () {
    container.style.display = null;
  });
  chart.draw(dataTable,options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart" style="display: none;"></div>

---

但是，如果在绘制图表之前显示了容器，
标签显示正确。

请参阅以下工作摘要...

google.charts.load('current','avoidOverlappingGridLines':false
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  container.style.display = null;
  chart.draw(dataTable,options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart" style="display: none;"></div>