2

Googleグラフを使用していますが、選択メニューを使用してグラフを表示できます。

<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';
   }
}

Display：'block'をデフォルトで使用する場合は正常に機能しています（area_chart_google）。問題は、チャート（area_chart_google）を非表示（なし）にしてから表示（ブロック）すると、次のエラーが発生することです。

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

これは私のHTMLです（スクリプトは本文の中にあり、ヘッダーにJSAPIを使用しています）：

<div id="area_chart_google" class="area-chart"></div>
<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: {color: '#efed22'}},
      backgroundColor: '#efede9',
      legend: 'none'
    };
    var chart = new google.visualization.AreaChart(document.getElementById('area_chart_google'));
    chart.draw(data, options);
  }
</script>
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:33:46.373 に答える
0

あなたの質問はjQueryでタグ付けされているので、ここにjQueryソリューションがあります：

function getChart(selection) {

   var $area_chart_2 = $("#area_chart_2"),
       $area_chart_google = $("#area_chart_google");

   if (selection.value === "area_chart_2") {
      $area_chart_2.show(); //You could also use $area_chart_2.css("display", "block");
      $area_chart_google.hide(); //Or use $area_chart_google.css("display", "none");
   } else {   
      $area_chart_2.hide();
      $area_chart_google.show();
   }
}
于 2013-03-08T17:15:41.857 に答える
0

ここで根拠を推測しますが、一部のスクリプトが非表示の div の長さプロパティを動的に読み取ろうとするために発生する可能性があります。

この回答で説明されているように、display none はページにスペースを生成しません。あなたが試すことができるいくつかのオプション：

  1. Use visibility: hidden
  2. 代わりにarea_chart_2and のラッピング要素を非表示にしてみてくださいarea_chart_google
于 2013-03-08T17:13:16.777 に答える