2

我正在使用以下脚本：

<header>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</header>

<body>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Header');
    data.addColumn('number', '');
    data.addColumn('number', '');
    data.addRows([
      ['Monday',300,43],
      ['Tuesday',250,545],
      ['Wednesday',122,78],
      ['Thursday',348,92],
      ['Friday',23,61],
      ['Saturday',39,93]
    ]);
    var options = {
      title: '',
      hAxis: {title: '',  titleTextStyle: '#efede9'},
      backgroundColor: '#efede9',
      legend: 'none'
    };
    var chart = new google.visualization.AreaChart(document.getElementById('area_chart_google'));
    chart.draw(data, options);
  }
</script>

<div id="area_chart_google" class="area-chart"></div>
<body>

我无法在 Header 中使用脚本，因为我使用的是动态内容。

当我第一次加载页面并刷新它之后，我发现它可以工作。我现在的问题是我正在使用带有 onchange 事件的选择菜单，类似于：

<select id="form_frame1" name="frame1" onchange="getChart(this);">
 <option value="area_chart_google" >Area Chart</option>
 <option value="area_chart_2" selected="selected">Stacked Chart</option>
</select>

我的 getChart 函数是：

function getChart(selection) {
 if (selection.value == "area_chart_2") {
    document.getElementById('area_chart_2').style.display = 'block';
    document.getElementById('area_chart_google').style.display = 'none';
}

 else {   
    document.getElementById('area_chart_2').style.display = 'none';
    document.getElementById('area_chart_google').style.display = 'block';
   }
}

因此，一旦我的 area_chart_google 未显示（显示：无）并且我选择它，我就会收到错误消息：

*Firebug* google-visualization-errors-all-1 
*Chrome* Cannot read property 'length' of null
*Safari* 'null' is not an object

我猜是getElementById的东西，所以我尝试使用：

window.onload = function(){ javascript code here }

并且：

$(document).ready(function() {
   javascript code here
});​

什么都没发生。我没有收到任何错误，但图表没有出现。

任何帮助将不胜感激。

4

3 回答 3

1

这对我有用：

function getChart(selection) {
  if (selection.value == "area_chart_2") {
  document.getElementById('area_chart_2').style.display = 'block';
  document.getElementById('area_chart_google').style.display = 'none';
}

else {   
  document.getElementById('area_chart_2').style.display = 'none';
  document.getElementById('area_chart_google').style.display = 'block';
  drawChart(); //call this function when using this Google Chart
 }
}
于 2013-03-08T19:41:47.843 回答
0

您需要先加载 Google API：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

您的脚本中还应该有适当的<body>和<head>标签。

否则代码很好。以下对我来说很好：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Header');
        data.addColumn('number', '');
        data.addColumn('number', '');
        data.addRows([
          ['Monday',300,43],
          ['Tuesday',250,545],
          ['Wednesday',122,78],
          ['Thursday',348,92],
          ['Friday',23,61],
          ['Saturday',39,93]
        ]);
        var options = {
          title: '',
          hAxis: {title: '',  titleTextStyle: '#efede9'},
          backgroundColor: '#efede9',
          legend: 'none'
        };
        var chart = new google.visualization.AreaChart(document.getElementById('area_chart_google'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body> 
    <div id="area_chart_google" class="area-chart"></div>
  </body>
</html>
于 2013-03-07T02:26:26.203 回答
0

不确定，但尝试这样做：

google.load("visualization", "1", {packages:["corechart"]});
//..your drawChart() function code here
$(document).ready(function() {
  google.setOnLoadCallback(drawChart);
});

我希望您已经在标题中包含以下脚本：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
于 2013-03-07T02:26:47.700 回答