U kunt gebruik maken van een van de verschillende jQuery plug - ins om snel diagrammen en grafieken gebruikt javascript en jQuery . Evalueer de verschillende bibliotheken en kiezen uit de beste match voor uw behoeften . Schrijf de HTML " ' tag aan de bibliotheken en de " " tag om de gegevens en de code om de grafiek te genereren onder meer omvatten . Test het HTML- programma om ervoor te zorgen dat deze goed functioneert . Instructies
1 Download de plug-in van de eigen sites . Decomprimeren de plug - in in een map die kan worden geopend door de JavaScript -programma dat het zal gebruiken . Kopen van 2 Maak een nieuwe HTML 5 -bestand met behulp van een HTML-editor of Notepad . Voeg de " " tag , geeft een venster met de titel " " tag en voeg de jQuery en in kaart brengen plug - in bibliotheken met behulp van de " <script> " tag : < br <p> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> jQuery Grafieken > < /title > < script src = " lib /flot /jquery.flot.min.js " > < /script > < /head > <br> 3 <p> toevoegen " <body> " , label en een lege " <div> " tag met een " id " waar u de grafiek weer te geven . Selecteer de " <div> " tag met behulp van jQuery met " $ ( ' # id ' ) . " Stop de JavaScript-code om een diagram of grafiek weer te geven : <p> <body> <br> < div id = " mychart " style = " width : 600px ; height : 300px " . > < /div > <script> $ ( document ) klaar ( function ( ) { var datapunten = [ [ 1,27964 ] , [ 2,33435 ] , [ 3,43165 ] , [ 4,50359 ] , [ 5,54861 ] , [ 6,82197 ] , [ 7,99516 ] , [ 8,166065 ] , [ 9,129773 ] ] ; $ . perceel ( $ ( " # mychart " ) , [ { data : datapunten , bars : { tonen : true} } ] ) } ) ; < /script > < /body > < /html > <br> < br > 4 <p> Sla het HTML- bestand . Open het in een webbrowser om te controleren of de grafiek goed . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/90795.html' >JavaScript -functies op Named Parameters Accepteer </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90797.html' >Navigeren Van jQuery Modal Venster naar andere pagina </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91127.html" title="Hoe je Silverlight applicaties creëren met JavaScript " target="_self">Hoe je Silverlight applicaties…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90749.html" title="Gedaan, maar met fouten in IE JS Object verwacht " target="_self">Gedaan, maar met fouten in IE …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90746.html" title="IE 8 JavaScript Ongeldige pointer Fout " target="_self">IE 8 JavaScript Ongeldige poin…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91071.html" title="Hoe u de waarde van een iFrame " target="_self">Hoe u de waarde van een iFrame…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91043.html" title="Wat doet Waarschuwing : reagerend script Mean " target="_self">Wat doet Waarschuwing : reager…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90834.html" title="Hoe maak je een Resig MicroTemplate Gebruik " target="_self">Hoe maak je een Resig MicroTem…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91112.html" title="Dreamweaver Tutorial in JavaScript " target="_self">Dreamweaver Tutorial in JavaSc…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91004.html" title="Hoe te Styles toe met JavaScript " target="_self">Hoe te Styles toe met JavaScri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90827.html" title="Hoe te langzaam Trace in JavaScript " target="_self">Hoe te langzaam Trace in JavaS…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95316.html" title="Hoe te TryParse gebruiken in Visual Basic " target="_self">Hoe te TryParse gebruiken in Visual Basi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95548.html" title="Hoe maak je een script in VB Schrijf " target="_self">Hoe maak je een script in VB Schrijf </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85647.html" title="Hoe te Graphics Get in C + + " target="_self">Hoe te Graphics Get in C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89496.html" title="Hoe de Buffer Overflow in Java schrijven " target="_self">Hoe de Buffer Overflow in Java schrijven…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88777.html" title="Hello World Tutorial " target="_self">Hello World Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89958.html" title="Hoe je afbeeldingen Flip in Java " target="_self">Hoe je afbeeldingen Flip in Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88318.html" title="Mijn Windows Mobile gaat niet open ASHX Files " target="_self">Mijn Windows Mobile gaat niet open ASHX …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/93133.html" title="Hoe maak je een abonnement website met Dreamweaver " target="_self">Hoe maak je een abonnement website met D…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87598.html" title="Verschil tussen Identificeren & Non - identificeren Relaties " target="_self">Verschil tussen Identificeren & Non - id…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
