同じウェブページにGoogleのグラフとゲージを表示

同じウェブページに円グラフとゲージを読み込もうとしています。ウェブページを開くと3つのゲージしか表示されず、円グラフが表示されません。 Googleが推奨するように、コアチャートとゲージを1台のローダーに追加しました。同じウェブページにGoogleのグラフとゲージを表示

<html> 
    <head> 

    <script type="text/javascript" 
    src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     google.charts.load('current', { packages: ['corechart', 'gauge'] }); 
     google.charts.setOnLoadCallback(drawChartb); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChartb() { 

      var data = google.visualization.arrayToDataTable([ 
       ['Label', 'Value'], 
       ['Port 1', 70], 
       ['Port 2', 70], 
       ['Port 3', 70] 
      ]); 

      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); 
      setInterval(function() { 
       data.setValue(0, 1, window.Power_chart1.Port1P); 
       data.setValue(1, 1, window.Power_chart1.Port2P); 
       data.setValue(2, 1, window.Power_chart1.Port3P); 
       chart.draw(data, options); 
      }, 1000); 
     } 
     function drawChart() { 
      var data = google.visualization.arrayToDataTable([ 
       ['Task', 'Hours per Day'], 
       ['Port 1',  10], 
       ['Port 2',  10], 
       ['Port 3', 10] 
      ]); 

      var options = { 
       title: 'Pie Chart Input Ports', 
       pieHole: 0.4, 
      }; 

      var chart = new google.visualization.PieChart(document.getElementById('donutchart')); 
      chart.draw(data, options); 
      setInterval(function() { 
       data.setValue(2, 1, window.Power_chart1.Port3P); 
       data.setValue(1, 1, window.Power_chart1.Port2P); 
       data.setValue(0, 1, window.Power_chart1.Port1P); 
       chart.draw(data, options); 
      }, 1000); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 400px; height: 120px;"></div> 
    </body> 
    </html>

ありがとうございます。

出典

2016-06-17 ALI ALRIKABI

document.getElementById（ 'donutchart'）を使用して円を描画しましたが、要素が欠落しています。レンダリングされません。は

<div id="donutchart" style="width: 400px; height: 120px;"></div>

codepenの下に含める - http://codepen.io/pen/

出典

2016-06-17 19:48:23

はあなたに感謝します。出来た。 –

同じウェブページにGoogleのグラフとゲージを表示

答えて

関連する問題