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/Funciones-de-JavaScript-para-aceptar-parámetros-con-nombre-.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/Cómo-navegar-de-ventana-modal-jQuery-a-otra-página-.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/Cómo-instalar-el-Facebook-JavaScript-SDK-.html">Cómo instalar el Facebook JavaScript SDK </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comparar-los-objetos-de-fecha-en-JavaScript-.html">Cómo comparar los objetos de fecha en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-OS-Grid-para-GPS-.html">Cómo convertir OS Grid para GPS </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-conseguir-un-JTextArea-dudar-y-explorar-los-datos-en-Java-.html">Cómo conseguir un JTextArea dudar y explorar los datos en Java </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-Iniciar-una-matriz-de-JavaScript-.html">Cómo Iniciar una matriz de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-Javascript-en-bucle-Fotos-.html">Cómo crear Javascript en bucle Fotos </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-Div-como-Scriptaculous-Draggable-.html">Cómo crear una Div como Scriptaculous Draggable </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-Java-Script-.html">Cómo crear Java Script </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/Cómo-reemplazar-los-códigos-Div-.html" >Cómo reemplazar los códigos Div </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Microsoft-Script-Debugger-.html" >Cómo utilizar Microsoft Script Debugger </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comprobar-si-DIV-Got-Focus-en-Javascript-.html" >Cómo comprobar si DIV Got Focus en Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-borrar-atributos-de-elemento-.html" >Cómo borrar atributos de elemento </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-implementar-un-Destructor-básico-en-JavaScript-.html" >Cómo implementar un Destructor básico en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Variables-de-Adobe-Ciclos-de-Vida-.html" >Variables de Adobe Ciclos de Vida </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/Cómo-crear-Google-Maps-aplicación-.html" >Cómo crear Google Maps aplicación </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-Vista-Sidebar-Gadget-.html" >Cómo crear una Vista Sidebar Gadget </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/¿Qué-puedo-usar-en-Lugar-de-JavaScript-.html" >¿Qué puedo usar en Lugar de JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-caracteres-Minus-y-Plus-en-Javascript-.html" >Cómo quitar caracteres Minus y Plus en Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-eliminar-una-barra-de-direcciones-en-HTML-.html" >Cómo eliminar una barra de direcciones en HTML </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-Target-iFrame-documento-Tutorial-.html" >JavaScript Target iFrame documento Tutorial </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>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 