javascript - 在 JHipster Angular 应用程序中添加 Google Chart 库

Question

我在我的 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 加载脚本？

Answer 1

可以直接使用google charts 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 中找到更多关于谷歌图表的信息