有什么方法可以在React应用程序中使用Google Charts吗?我发现react-google-charts可以工作了一点,但是它似乎缺少Google Charts的许多API,或者至少没有记载。我也很不愿意在生产中使用NPM统计数据显示在过去的一天中只有约400次下载。
但是,我无法在NPM上单独找到Google图表,也无法像我最初期望的那样简单地获取import Charts from 'google-charts'
。
我的下一个想法是查看是否有一种方法可以将库作为全局变量导入。
1)我该怎么做
2)如果可能的话,如何将其包含在import { Line } from '???'
之类的react组件中
最佳答案
使用Webpack externals
通过将库定义为external
webpack,只需导出库的全局符号,就像(对jQuery一样)
{
1: function(...) {
// simplified for illustrating
module.exports = jQuery;
}
}
因此,您可以执行以下操作:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
或较新的URLexternals: {
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图表。
对于 ReactJS 部分,您需要使用
refs
或其他方式来获取脚本中的 native DOM元素。P.S.我不是一个有反应的人,所以也许有反应背景的人可能会有所帮助