2012-12-26 12 views
10

W jsfiddle mają opcję ustawienia no wrap(head), no wrap(body), OnDomReady i OnLoad w opcji po lewej stronie. W moim programie do ustawienia warunku no wrap(head). Jego praca jest w porządku. Ale jak się zmieniam do pliku HTML. Ten sam warunek muszę ustawić w moim pliku HTMLNowrap stan w głowicy i korpusie html

Demo: JSFIDDLE

Tu ustawiony no-wrap(head), Jak ustawić plik HTML tych samych warunkach jak no-wrap(head)?.

Oto mój pełny kod

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

Dzięki za porady.

Odpowiedz

7

To oznacza po prostu umieścić JavaScript pomiędzy <head> tagów

Od strony dokumentacji

JSFiddle Documentation

Reference

+0

Witam, aktualizuję tutaj mój kod html. W moim kodzie cały mój javascript znajduje się wewnątrz tagu head. Ale dlaczego nie działa? – Selvamani

+0

Brakuje bliskiego znacznika 'script' w tym wierszu'

3

To po prostu oznacza, że ​​skrypt jest dodany w sekcji <head> z <html>

Od JSFiddle Docs,

nie okład (głowa): nie należy owijać kodu JavaScript, należy go umieścić w <head> sekcja

Here jest demo z czego migh Używaj (Wszystkie HTML w jednym miejscu).

+0

Dziękuję, może w wiedzy, ta praca kod w trybie dokumentu IE8 w twoja maszyna.? Jeśli nie, to jak mogę to poprawić, ponieważ to skrzypce działa w trybie dokumentu IE8. – Selvamani

+0

Nie, nie ma, ale pamiętam, że dzieje się tak dlatego, że wykresy google mają pewne problemy z trybem dokumentu 'IE8', [** Sprawdź to **] (http://stackoverflow.com/questions/13081894/ie8- nie wspierając google-chart-pie-chart) –

+0

http://jsfiddle.net/3KxFZ/2/ ale tutaj drugi piechart widoczny w trybie dokumentu ie8, Jak? – Selvamani

Powiązane problemy