在 JHipster Angular 应用程序中添加 Google 图表库答案

【问题标题】：Adding Google Chart Library In JHipster Angular Application在 JHipster Angular 应用程序中添加 Google 图表库
【发布时间】：2019-09-23 12:47:11
【问题描述】：

我在我的 JHipster angular 7 应用程序中使用谷歌图表。

在 index.html 中添加以下脚本标签以加载谷歌图表可视化库

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
</script>

图表运行良好，但我的应用程序逐渐变慢。

如果我在浏览器中移动鼠标，浏览器 CPU 使用率很高（100%），这会导致浏览器挂起、响应缓慢等。

如果我评论图表 div 则不存在此类问题。

有没有其他解决方案，比如通过 webpack 加载脚本？

【问题讨论】：

google chart 是 vanila JS。它不依赖于 Jhipster 或 Angular。你能提供你的代码和数据是什么样的吗？

标签： javascript webpack google-visualization angular7 jhipster

【解决方案1】：

您可以直接使用谷歌图表CDN：

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

以上链接为条形图，您可以自己选择。

数据应该是这样的：

function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

这里是jsfiddle。

通过link了解更多关于谷歌图表的信息

【讨论】：

我的问题是没有显示图表，在显示图表浏览器后性能变慢
您是否有大量数据需要在图表上表示？
不，我的数据量不超过 10 条记录

【解决方案2】：

如果可能，我建议您不要使用加载器。加载程序在构建/捆绑时可能会很慢且成本很高。

相反，看看您是否可以改用 CDN 方法：

【讨论】：

上面的 URL 帮助我加载 CDN，但我的实际问题应用程序一直在变慢。如果我评论图表 div 就没有这样的问题

【解决方案3】：

不是一个好的做法：

将lib直接注入index.html
使用未调整为的库角应用。这种形式的图书馆好像没有与您的 Angular 应用程序配合得很好。

尝试改用 Angular 图表包之一，例如： https://github.com/FERNman/angular-google-charts

它已被重写为 Angular 组件，因此它应该可以在 Angular 应用程序中正常工作。样品使用：

<google-chart [data]="myData"></google-chart>

如果您使用基于 Angular 组件的库，那么您可能不会遇到性能问题。

【讨论】：