Google 使用的时间线图表在 angular 中未显示整行标签

Question

您好，我刚开始使用 google 图表，我发现第一列中的标签没有完全显示。我在 angular 9.0.3 中使用这些图表，并将 ng2-google-charts 作为模块。我试过更改宽度、高度和许多其他选项，但标签不显示。这是结果图表的图像。

图表的外观图片 -

下面是我的代码

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',  new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
      [ 'Jefferson', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]
    ],
    options: {
      'width': 1200,
      'avoidOverlappingGridLines':false
    },
  };
}

这是我的模板

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

Answer 1

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

请参阅以下工作代码段，它通过使用 --> 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',  new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ 'Jefferson', new Date(1801, 2, 3),  new Date(1809, 2, 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', {
  packages: ['timeline']
}).then(function () {
  var dataTable = google.visualization.arrayToDataTable([
    ['Name', 'From', 'To'],
    [ 'Washington',new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'Adams',  new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ 'Jefferson', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]
  ]);

  var options = {
    'width': 1200,
    '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>

Google 使用的时间线图表在 angular 中未显示整行标签

Google Timeline chart using does not show full row label in angular

charts

google-visualization

typescript

angular

ng2-google-chart