javascript - 将 google charts 与 Backbone 和 require.js 结合使用

Question

我想在我的主干项目中使用 Google 图表(对于某些图表)。我正在使用 require.js，现在我想知道如何使用 require.js 加载 Google API。

这里是官方Google site给出了如何使用它的基本说明

在阅读这个主题时，我发现很多对 require.js 插件的引用，该插件在 here 中找到。

那是 Miller Medeiros 先生 :)我在使用此脚本时遇到问题:

这就是我所做的。

1. 我从 Miller 先生的 GIT 代表那里下载了异步脚本，并将其放在我的项目中

2. 在我的 main.js 中，我将其包含如下:

   baseURL: '.',
   paths: {
       underscore  : 'lib/underscore',
       backbone    : 'lib/backbone',
       async       : 'lib/async',
       babysitter  : 'lib/backbone.babysitter',
       wreqr       : 'lib/backbone.wreqr',
       marionette  : 'lib/backbone.marionette',
       handlebars  : 'lib/handlebars',
       jquery      : 'lib/jquery', 
   },
   

3. 现在我的问题是如何使用它？我所有的 js 文件都具有以下结构:

   define([
   'marionette',
   //more defines...    
   
   ], function(
     Marionette
   //more calls here
   ) {
   

4. 如何使 Google 代码可用于我的应用程序？我只需要在一两个地方使用它就可以了:)

谢谢

Answer 1

据我从作者的示例中可以看出，用法似乎是:

require([
    'async!http://maps.google.com/maps/api/js?sensor=false'
], function()
{
    //Google maps is available and all components are ready to use.
    var map = new google.maps.Map( 
    ...

所以在你的情况下可能是这样的

require([
    'async!https://www.google.com/jsapi'
], function()
{
    google.load('visualization', '1.0', {'packages':['corechart']});
    ... 

或定义为 here

require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function()
{
    // visualization + corechart + geochart + search are loaded
    // code copied from google charts docs:
    // http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
    var data = new google.visualization.DataTable();

您需要从 repo (requirejs-plugins/src) 加载 goog.js，将其放在您的 lib 文件夹中，并在您的路径中将其定义为:

paths : {
    //alias to plugins
    async : 'lib/async',
    goog : ' lib/goog',