Question

我试图获得一个每分钟重绘一组谷歌图表的页面。我已经成功地每分钟重新加载整个页面，但我希望我可以专门重新绘制图形。我正在尝试使用JS的setInterval，但它似乎没有在外部脚本中执行“初始化”功能。

在下面的脚本中，当setInterval设置为5000 ms时，我得到一个警告框，其中包含“test”（位于标题中），但不是“In JS”（位于外部初始化函数中）。当我将它缩短到100毫秒时，它确实可以工作并加载图形。这表明在一段时间后（在页面加载后可能会出现？）之后访问初始化函数的问题。我无法想象这里出了什么问题，但我想知道是否有其他人可能会有一些问题。请参阅代码下方。

这是我的HTML文档标题中的内容：

<head>
  <script type="text/javascript" src="./jquery.min.js"></script>
  <script type="text/javascript" src="./conditions.js"></script>
  <script type="text/javascript" src="./jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.0', {
      'packages': ['corechart', 'gauge']
    });
    setInterval(function() {
      google.setOnLoadCallback(ChartController.initialize);
      alert("test");
    }, 5000);
  </script>
</head>

这是外部的./conditions.js脚本：

ChartController = (function($) {
  ChartController = {};
  var jsonFeedUrl = "//xmountwashington.appspot.com/csc.php",
    units_name,
    isStorage,
    current_conditions,
    wind_speed,
    wind_direction,
    resize_timeout,
    resize_delay = 100;

  function initialize() {
    alert("In JS");
    var req = $.ajax(jsonFeedUrl, {
      dataType: "jsonp"
    });
    req.done(onGetJSON);
    req.fail(onJSONError);
  }

  function onGetJSON(data) {
    units_name = 'units', isStorage = "Imperial";
    current_conditions = data.currentSummitConditions[isStorage],
      wind_speed = current_conditions.windSpeed,
      wind_direction = current_conditions.windDirection,
      chart_render();
    $(window).on('resize', function() {
      clearTimeout(resize_timeout);
      resize_timeout = setTimeout(chart_render, resize_delay);
    });
  }

  function onJSONError(XHR, status, err) {
    console.log("Failed to load JSON :(", XHR, status, err);
  }

  function chart_render() {
    createDateTime()
    windspeed_chart_render;
  }

  function windspeed_chart_render() {
    var windspeed_options = {
      backgroundColor: 'transparent',
      width: size,
      height: size,
      greenColor: "FF5500",
      yellowColor: "A6CEE3",
      redColor: "FFFFFF",
      min: 0,
      max: 240,
      minorTicks: 4,
      majorTicks: ['0', '40', '80', '120', '160', '200', '240'],
      greenFrom: (wind_speed[1][0] == null ? 0 : wind_speed[1][0]),
      greenTo: (peakWind == null ? 0 : (wind_speed[1][0] > peakWind ? wind_speed[1][0] : peakWind)),
      yellowFrom: (peakWind == null ? 0 : peakWind),
      yellowTo: (peakWind24Hr == null ? 0 : peakWind24Hr)
    };
    var windspeed_data = google.visualization.arrayToDataTable(wind_speed),
      el = document.getElementById('windspeed-graph'),
      size = el.clientWidth;
    var windSpeedGuage = new google.visualization.Gauge(el);
    windSpeedGuage.draw(windspeed_data, windspeed_options);
  }
  ChartController.initialize = initialize;
  return ChartController;
})(jQuery);

Google图表无法使用setInterval重新加载

0 个答案: