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="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/90795.html' >Funciones de JavaScript para aceptar parámetros con nombre </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/90797.html' >Cómo navegar de ventana modal jQuery a otra página </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90949.html">Cómo actualizar DIV </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91137.html">¿Cómo habilito el JavaScript mucho más fácil </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90830.html">Cómo agregar Google Analytics a Álbum </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90767.html">¿Qué es HTML MsgBox </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90930.html">Cómo comprobar Listas de comprobación para Joomla </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91010.html">Cómo vincular js externos </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/349477.html">¿Qué es una persona hipotética que usa un programa y proporciona información? </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91042.html">Cómo pasar una variable de JavaScript </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90847.html" >Lightbox Vs . Lightbox 2 </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91110.html" >Cómo utilizar el método POST en Window.Open con Java Script </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91232.html" >Cómo insertar HTML en un mensaje de correo electrónico </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90894.html" >Cómo borrar una lista desplegable en jQuery </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91082.html" >Cómo recuperar los datos de una base de datos mediante Java Script </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91282.html" >Cómo manejar los navegadores antiguos con javascript </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90996.html" >Cómo ver una etiqueta de JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90833.html" >Cómo código utilizando el Editor de secuencias de comandos en LiveCycle </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91119.html" >Cómo deshabilitar la pantalla de impresión JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/319405.html" >¿Cuáles son los usos del subíndice y SuperScript lo muestran? </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90941.html" >Acerca de la salida de datos JSON con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91077.html" >Cómo hacer JavaScripts </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimiento de la computadora © http://www.ordenador.online</div>
</div>
</body>
</html> 