angular - 谷歌时间线图表使用不显示角度的完整行标签

Question

您好我刚开始使用谷歌图表，我发现第一列中的标签没有完全显示。我在 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>

标签： angulartypescriptchartsgoogle-visualizationng2-google-chart

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>