Wordpress〜ページに複数のGoogleグラフを表示するにはどうすればいいですか？

Question

WordPress Visual Composerの生のHTMLブロックに挿入した1つのGoogleグラフのコードです - グラフIDの名前は 'chart_div1'です。これはWPウェブページで機能します。同じページにチャートID 'chart_div2' で2番目のグラフを追加しようとし

＃

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
    var options = {  }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="chart_div1"></div> 

＃

。別の生のHTMLブロックの2番目のグラフですが、グラフは表示されません。上のchart_div1のみが表示されます。

＃

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]); 
    var options = {  }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="chart_div2"></div> 

＃

はいくつかのバリエーションを試してみましたし、いずれかを動作させることはできません。私もショートコードと同じ問題でこのコードを入れてみました。

提案がありますか？

Answer 1

ブラウザのコンソールを見れば、あなたは、エラーメッセージがわかります：

loader.js:146 Uncaught Error: google.charts.load() cannot be called more than once with version 45 or earlier.

をそして、それが原因で、この関数の関数呼び出しのためです：あなたは既にしたので、また

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

スクリプトをgstaticから読み込んだ場合、実際にはこれを複数回使用する必要はありません：

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

は、単純な解決策は、最初のこれらのリソースをロードし、各後続ブロックすることであろう。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script> 
 
    google.charts.load('current', {'packages':['corechart']}); 
 
</script> 
 

 

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
 
    var options = {  }; 
 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
 
    chart.draw(data, options); 
 
    } 
 
</script> 
 
<div id="chart_div1"></div> 
 

 

 
<hr/> 
 

 

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart2); 
 
    function drawChart2() { 
 
    var data2 = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]); 
 
    var options2 = {  }; 
 
    var chart2 = new google.visualization.ScatterChart(document.getElementById('chart_div2')); 
 
    chart2.draw(data2, options2); 
 
    } 
 
</script> 
 
<div id="chart_div2"></div>

ただし、効率/再利用の難問が生じることがあり。チャートを持っているかどうかにかかわらず、すべてのページでこれらのリソースを本当にロードしたいですか？ HTMLブロックを追加する前に、既にリソースをロードしているかどうかを確認しますか？いいえ

これを解決するには、それらのリソースが存在しない場合は条件付きで含める必要があります。このようにして、各HTMLブロックは自己完結型であり、ピア間で競合することなくどこでも使用できます。

これを達成するには、google.chartsオブジェクトが定義されているかどうかを確認し、そうでない場合にのみチェックしてから、リソースに含める必要があるスクリプトをドキュメントに書き込みます。

他のGoogleオブジェクトを使用していない場合は、googleをチェックするだけです。

window.google || document.write('<script> ... </script>') 

Googleにはクールなものがたくさんあるため、そうは考えにくいです。より具体的には、window.google.chartsが定義されているかどうかを確認する必要がありますが、入れ子になっていない未定義オブジェクトにアクセスしようとすると、上記の方法はTypeErrorになります。

<script> 
(window.google || {}).charts || document.write('\ 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>\ 
    <script> google.charts.load("current", {"packages":["corechart"]});<\/script>') 
</script> 

<script type="text/javascript"> 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
    var options = {  }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="chart_div1"></div> 

喜んで他のブロックと共存することができます：あなたが読みやすくするためにタグスラッシュと改行をエスケープ、すべて一緒にそれを置くときそこそこa slick workaround

(window.google || {}).charts || document.write('<script> ... </script>') 

あります、あなたは素敵なこのような再利用可能なブロックを含ん取得します同じぺージに。いずれにしても、最初のブロックはリソースをロードし、次に他のブロックはそれをスキップしてデータをレンダリングするようにまっすぐに進みます。

<script> 
 
(window.google || {}).charts || document.write('\ 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>\ 
 
    <script> google.charts.load("current", {"packages":["corechart"]});<\/script>') 
 
</script> 
 

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]); 
 
    var options = {  }; 
 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1')); 
 
    chart.draw(data, options); 
 
    } 
 
</script> 
 

 
<div id="chart_div1"></div> 
 

 

 

 
<hr/> 
 

 

 

 
<script> 
 
(window.google || {}).charts || document.write('\ 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>\ 
 
    <script> google.charts.load("current", {"packages":["corechart"]});<\/script>') 
 
</script> 
 

 
<script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]); 
 
    var options = {  }; 
 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2')); 
 
    chart.draw(data, options); 
 
    } 
 
</script> 
 

 
<div id="chart_div2"></div>

Answer 2

あなたはこれを試すことができます。

google.charts.load('45', {packages: ['corechart']}); 

書き込みの代わりに "現在" の "45"、 "現在の" まだバージョンである "44" からです。これは私のために働いた。