|
|
|
Puede utilizar uno de varios jQuery plug- ins para generar rápidamente diagramas y gráficos con JavaScript y jQuery. Evaluar las diferentes bibliotecas y seleccione la mejor opción para sus necesidades. Escribe la etiqueta " head " HTML para incluir las bibliotecas, y la etiqueta de " " para incluir los datos y el código para generar el gráfico . Pruebe el programa HTML para asegurarse de que funciona correctamente. Instrucciones 1 Cargar el plug -in de su sitio de acogida. Descomprimir el plug-in en un directorio que se puede acceder mediante el programa JavaScript que va a usar.
2 Crear un nuevo archivo HTML 5 usando un editor HTML o Bloc de notas . Añadir la etiqueta " head " , especifique el título de la ventana con la etiqueta " " y añadir el jQuery y la cartografía las bibliotecas de conectores con la etiqueta " <script> ": <br> <p> <html> <head> <title> Gráficos jQuery < /title> < guión src = " lib /flot /jquery.flot.min.js "> < /script> < /head> <br> 3 <p> Añadir un " <body> " , etiqueta y una etiqueta vacía " <div> " con un "id" en la que desea el gráfico para visualizar . Seleccione la etiqueta " <div> " usando jQuery con "$ ( '# id' ) . " Introduce el código JavaScript para mostrar un diagrama o un gráfico : <br> <p> <body> < div id = estilo " mychart " = " ancho : 600px , alto: 300px " . > < /div > <script> $ (document ) ready ( function () { var puntos de datos = [ [ 1,27964 ] , [ 2,33435 ] , [ 3,43165 ] , [ 4,50359 ] , [ 5,54861 ] , [ 6,82197 ] , [ 7,99516 ] , [ 8,166065 ] , [ 9,129773 ] ] ; $ . parcela ($ ("# mychart ") , [{ datos: puntos de datos , barras : { mostrar : true} } ] ) } ) ; < /script> < /body> < /html > <br> <br> 4 <p> Guarde el archivo HTML. Abrir en un navegador Web para verificar que la gráfica se muestra correctamente . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/javascript-programming/90795.html' >Funciones de JavaScript para aceptar parámetros con nombre </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/90797.html' >Cómo navegar de ventana modal jQuery a otra página </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91119.html" title="Cómo deshabilitar la pantalla de impresión JavaScript " target="_self">Cómo deshabilitar la pantalla de impresión JavaScript…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91157.html" title="Cómo aprender Java Script gratis " target="_self">Cómo aprender Java Script gratis </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91261.html" title="Cómo habilitar Javascript depuración " target="_self">Cómo habilitar Javascript depuración </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91032.html" title="Cómo convertir texto a números enteros en JavaScript " target="_self">Cómo convertir texto a números enteros en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90796.html" title="Cómo Graficar Con jQuery " target="_self">Cómo Graficar Con jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91110.html" title="Cómo utilizar el método POST en Window.Open con Java Script " target="_self">Cómo utilizar el método POST en Window.Open con Java …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91028.html" title="Cómo cambiar el color de fondo HTML Con un sistema en Javascript " target="_self">Cómo cambiar el color de fondo HTML Con un sistema en …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91165.html" title="Nivel Intermedio Tutorial Javascript " target="_self">Nivel Intermedio Tutorial Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90933.html" title="Cómo editar una carta en Acajoom " target="_self">Cómo editar una carta en Acajoom </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90756.html" title="Cómo resaltar una etiqueta en iFrame Contenido " target="_self">Cómo resaltar una etiqueta en iFrame Contenido </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95471.html" title="VBA Codificación Trucos " target="_self">VBA Codificación Trucos </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88480.html" title="Cómo cambiar la contraseña de la cuenta con Applescript " target="_self">Cómo cambiar la contraseña de la cuenta con Applescri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89844.html" title="Cómo utilizar else if en Java " target="_self">Cómo utilizar else if en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88065.html" title="VB.Net y cómo exponer Business Objects como servicios Web " target="_self">VB.Net y cómo exponer Business Objects como servicios …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93612.html" title="Cómo hacer un diccionario con dos llaves en Python " target="_self">Cómo hacer un diccionario con dos llaves en Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94593.html" title="Cómo hacer un gráfico de líneas con Visual Basic " target="_self">Cómo hacer un gráfico de líneas con Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93480.html" title="Cómo lidiar con tuplas anidadas en Python " target="_self">Cómo lidiar con tuplas anidadas en Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86816.html" title="Cómo seleccionar un valor en JSP " target="_self">Cómo seleccionar un valor en JSP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/93093.html" title="Cómo reconstruir índices en MySQL " target="_self">Cómo reconstruir índices en MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87754.html" title="Cómo compilar un archivo RESX a una DLL " target="_self">Cómo compilar un archivo RESX a una DLL </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
| | |
