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

Question

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

在index.html中添加了以下脚本标记，以加载Google图表可视化库

<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图表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。

通过此链接查找有关Google图表的更多信息

Answer 2

如果可能的话，我建议您不要使用加载程序。加载器在构建/捆绑时可能速度缓慢且成本高昂。

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

• https://www.npmjs.com/package/webpack-cdn-inject

• https://unpkg.com/browse/google-charts@2.0.0/dist/