Google Gauge(数据图表可视化）未加载到ajax调用的页面中

Google Gauge (Data Chart Visualization) not loading in page called by ajax

本文关键字：调用 ajax 加载 数据 Gauge 可视化 Google      更新时间：2023-09-26

我在将Google Gauge图表可视化集成到我的网站中时遇到了一些问题。他们给出的示例代码是：

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 80],
      ['CPU', 55],
      ['Network', 68]
    ]);
    var options = {
      width: 400, height: 120,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);

就其本身而言，当id为chart_div的div位于主体中时，此代码可以正常工作。然而，我的网站上的每个页面都是由ajax使用loadandsettive调用的，并加载到"静态"标题下的内容div中。当将相同的代码输入到这些页面的头部时，将无法加载。脚本甚至试图加载任何错误、空白图表或任何其他迹象。页面如何加载到内容div的示例是：

        <li class="menuItem" id="mypage">
    <a href="#" onclick="loadAndSetActive('mypage.html', '#content', '#mypage');" >
    <img src="myimage.png" width="100%" height="auto"/>My Page</a></li>

然后，页面被加载到前面提到的标题下的contentdiv中。这个网站几乎完全完成了，但我似乎无法让这个量表工作。如有任何帮助，我们将不胜感激。

编辑：为了澄清，一旦用户登录，ajax调用就会自动加载我试图在div中绘制图表的仪表板。mypage是一个完整的html文件，有自己的标签等。不幸的是，我的PHP和html/CSS比我的ajax和jquery好得多。

不要使用setOnLoadCallback，而是尝试在google.load本身内部调用它，下面是代码片段：

google.load('visualization', '1', {
  packages:['gauge'],
  callback: drawChart
});
相关文章：