11

jsfiddle には、 、 、および左側のオプションを設定するオプションno wrap(head)がno wrap(body)ありOnDomReadyますOnLoad。私のプログラムでno wrap(head)条件を設定します。その仕事はうまくいきます。しかし、HTMLファイルに変更する方法。HTML ファイルに設定する必要があるのと同じ条件

デモ: JSFIDDLE

ここではno-wrap(head)、HTML ファイルを ? と同じ条件に設定する方法を設定しno-wrap(head)ます。

ここに私の完全なコード

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="a.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700]
]);

// this chart is drawn in a visible div and then immediately hidden
var chart1 = new google.visualization.PieChart(document.getElementById('chart_1'));

google.visualization.events.addListener(chart1, 'ready', function () {
    // hide the div when done drawing
    document.getElementById('chart_1').style.display = 'none';

    // create an event listener for the button that shows the chart
    document.getElementById('clickMe1').onclick = function () {
        document.getElementById('chart_1').style.display = 'block';
    }
});

// show the div before you draw
document.getElementById('chart_1').style.display = 'block';

chart1.draw(data, {
    height: 300,
    width: 400,
    title: 'Chart 1'
});


// this chart only gets drawn when the button is clicked
var chart2 = new google.visualization.PieChart(document.getElementById('chart_2'));

// create an event listener for the button that shows the chart
document.getElementById('clickMe2').onclick = function () {
    document.getElementById('chart_2').style.display = 'block';
    chart2.draw(data, {
        height: 300,
        width: 400,
        title: 'Chart 2'
    });               
}
}
</script>
<style type="text/css">
#visualization path {
cursor: pointer
}
</style>

  </head>
  <body>
<input type="button" value="Show chart 1" id="clickMe1" />
<input type="button" value="Show chart 2" id="clickMe2" />
<div id="chart_1" style="display: none"></div>
<div id="chart_2" style="display: none"></div>
  </body>
</html>

アドバイスありがとう。

4

2 に答える 2

7

これは単に JavaScript を<head>タグの間に配置することを意味します

ドキュメントページから

JSFiddle ドキュメント

参照

于 2012-12-26T06:54:00.487 に答える
3

<head>これは、スクリプトがのセクションに追加されることを意味します。<html>

JSFiddle ドキュメントから、

no wrap(head): JavaScript コードをラップせず、<head> セクションに配置します

これは、使用する可能性のあるもののデモです (すべての HTML が 1 か所にあります)。

于 2012-12-26T06:53:43.507 に答える