Question

我正在尝试使用enter link description here从这里google loader添加Google图表，如代码段中所述。我的问题是，当我调用new google.visualization.DataTable时，可视化文件尚未加载，并且javascript失败。

如果我在JS控制台中尝试相同的命令，则调用成功。

我相信在这种情况下我应该使用回调来知道库成功加载的时间。

我正在尝试配置它，但它似乎不起作用。

class @Charts
  constructor: ->
    @log = new Logger "Charts"
    @ready = false
    google.load 'visualization', '1.0', {'packages':['corechart'], 'callback': @pageLoaded}
    @log.debug "google load called"    

  pageLoaded: ->
    @log.debug "google library loaded"
    @ready = true

  waitReady: ->
    setTimeout(@log.debug("wait"), 2000) while not @ready

  drawactionStatuses: (data) ->
    @waitReady()
    @log.debug "drawing donut"

    data = new google.visualization.DataTable()
    data.addColumn "string", "Status"
    data.addColumn "number", "Number of actions"
    data.addRows data

    # Set chart options
    options =
      title: "action statuses"
      width: 400
      height: 300


    # Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.PieChart(document.getElementById("action_statuses"))
    chart.draw data, options

控制台上的日志是：

Charts : INFO : logging ready
Charts : DEBUG : google load called
Charts : DEBUG : drawing donut

waitReady功能似乎无法正常工作

Answer 1

我应该使用回调来知道库成功加载的时间

正如我在评论中所说的那样，我不知道Google Loader Library - 所以请将此作为假设，直到有人确认或证实它为止，但是...

但是，你必须记住你的回调是功能。所以它将被库调用而不被绑定到任何对象。所以，你必须以某种方式将你的回调绑定到this。在CoffeeScript中，胖箭 =>存在于此目的。您可以在传递回调或时使用它：

传递回传

google.load 'visualization', '1.0', 
            { 'packages':['corechart'], 'callback': => @pageLoaded() }
#                                                   ^^            ^^


  pageLoaded: ->
    @log.debug "google library loaded"
    @ready = true

定义回调时

或者，您可以使用胖箭头在其定义网站上绑定pageLoaded：

google.load 'visualization', '1.0', 
            { 'packages':['corechart'], 'callback': @pageLoaded }

  pageLoaded: =>
  #           ^
    @log.debug "google library loaded"
    @ready = true

google.load在coffeescript类中回调

1 个答案: