我可以使用Webpack将Google Charts插入到我的项目中吗？

有什么方法可以在React应用程序中使用Google图表？我发现react-google-charts，我已经有点工作了，但它似乎缺少Google Charts的大部分API，或者至少是没有记录的。我也有点害羞，在生产中使用NPM统计数据显示，在最后一天只有约400次下载。我可以使用Webpack将Google Charts插入到我的项目中吗？

但是我无法在NPM上单独找到Google Charts，也没有办法像import Charts from 'google-charts'那样简单地找到我最初的预期。

我的下一个想法是查看是否有办法将库导入为全局变量。

1）我怎样才能做到这一点 2）如果可能的话我该如何将其包含在反应组分像import { Line } from '???'

来源

2017-06-02 1252748

我想说，一天400下载实际上是相当不错的。如果没有发布任何问题，将会出现红旗。这个模块有75个关闭的问题，25个开放的，所以它似乎是积极的，这是我认为的一个好兆头。 –

http://blog.arkency.com/2014/09/react-dot-js-and-google-charts/ –

使用的WebPack externals
通过定义库作为external的WebPack轻松导出为全局符号图书馆，很像（说jQuery的）

{ 
    1: function(...) { 
     // simplified for illustrating 
     module.exports = jQuery; 
    } 
}

所以，你可以做同样的事情到这一点：

从Charts homepage
添加<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>或更新网址在你的WebPack配置中添加：
```
externals: { 
    charts: 'google.charts' // or any other alias you want, can be a regex too! check Webpack's doc for more 
} 
```

并将其导入为：

import chart from 'charts' 
// do something! 
charts.load('current', {'packages':['corechart']});

确保加载 Google Charts 加载之前您的包。

对于ReactJS部分，您需要某种方法来通过使用refs或其他东西来获取脚本中的本地DOM元素。

P.S.我不是一个反应家伙所以也许有人反应的背景可能会帮助

来源

2017-06-09 15:48:10

我可以使用Webpack将Google Charts插入到我的项目中吗？

回答

相关问题