'NULL' - это не объект с диаграммой Google (проблема с меню выбора, событие onchange)

Я использую следующий скрипт:

<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>

Я не могу использовать скрипт внутри заголовка, потому что я использую динамический контент.

Я понял, что это работает, когда я сначала загружаю страницу, и после ее обновления. Моя проблема сейчас в том, что я использую меню выбора с событием 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 не отображается (display: none) и я его выбираю, я получаю сообщение об ошибке:

*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
});​

Ничего не случилось. Я не получаю ошибки, но диаграмма не появляется.

Любая помощь будет высоко оценена.

Источник

3 ответа

Решение

Это работает для меня:

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
 }
}
Источник

Не уверен, но попробуйте сделать:

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>
Источник

Сначала вам нужно загрузить 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>
Источник
Другие вопросы по тегам