我可以使用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插入到我的項目中嗎？

回答

相關問題