有什么方法可以在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;
    }
}

因此,您可以执行以下操作:
  • Charts homepage
  • 添加<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>或较新的URL
  • 在您的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图表。

    对于 ReactJS 部分,您需要使用refs或其他方式来获取脚本中的 native DOM元素。

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

    10-06 05:26
    查看更多