Los gráficos estadísticos con información numérica desempeñan un papel importante en las páginas web de Internet. Además de la función básica de mostrar números, la gente presta cada vez más atención a la belleza y la interactividad de estos gráficos. Como resultado, los programadores se enfrentan a desafíos cada vez más serios. El proceso que la mayoría de la gente imagina usando software de dibujo para generar imágenes y luego colocarlas en páginas web no es realista. Aunque puede tener una apariencia hermosa, no es fácil de modificar. , puramente estático, y desventajas como la imposibilidad de actualizar en tiempo real marcan la pauta y no se pueden utilizar a gran escala. Hoy en día, existen muchos lenguajes de programación de redes diferentes, como asp, php, .net... la mayoría de ellos tienen funciones de dibujo de scripts, pero las funciones son bastante básicas. Necesitan dibujar un gráfico tras otro y calcular las coordenadas. y otra información, si quieres que sea hermosa, es un poco difícil... La biblioteca de clases Jpgraph en php es una tabla mejor, pero su belleza dinámica aún es pobre...
El nacimiento de JQuery ha arrojado luz sobre el diseño de interacción dinámica de páginas web. Muchos sitios web emergentes para grupos de moda jóvenes han adoptado la tecnología JQuery. Los más obvios son los efectos de atenuación, aparición y desaparición gradual de varios módulos en la web. página. El desarrollo de la tecnología también ha traído un gran desarrollo a la forma de visualización de gráficos estadísticos web. A continuación se presenta una de las bibliotecas de JavaScript relativamente simples pero también prácticas: Highcharts (gráficos estadísticos), Highstock (visualización de datos de series de tiempo), ambas son bibliotecas de gráficos. escritos en JavaScript puro, pueden agregar gráficos interactivos de manera fácil y conveniente a sitios web o aplicaciones web. No requieren complementos para ejecutarse como Flash y Java, y se ejecutan rápidamente, tienen buena compatibilidad y pueden alcanzar un tamaño adaptable. Puede admitir perfectamente la mayoría de los navegadores actuales, incluido IE6, lo que supone un dolor de cabeza para muchos ingenieros de front-end. . Y es gratuito para estudio personal, sitio web personal y uso no comercial. Los tipos de gráficos actualmente admitidos por HighCharts incluyen gráficos de curvas, gráficos de áreas, gráficos de barras, gráficos circulares, gráficos de dispersión y gráficos completos. Highstock se utiliza principalmente para la visualización de datos de series temporales.
Las características clave de HighCharts incluyen:
1. Compatibilidad: HighCharts está escrito en JavaScript puro y es compatible con la mayoría de los navegadores actuales, incluidos iPhone, IE, Firefox, etc.;
2. Muchos tipos de gráficos: HighCharts ahora admite una variedad de tipos de gráficos, incluidos gráficos de curvas, gráficos de áreas, gráficos de barras, gráficos circulares, gráficos de dispersión, gráficos integrales, etc., para satisfacer diversas necesidades.
3. No restringido por idioma: HighCharts se puede utilizar en la mayoría de los desarrollos WEB y es gratuito para usuarios individuales. Admite el uso en varios idiomas, como ASP, PHP, JAVA, .NET, etc.
4. Función de aviso: en el gráfico generado por HighCharts, puede configurar el efecto de aviso que se mostrará en el punto de datos, es decir, mover el mouse a un determinado punto de datos, se pueden mostrar los datos detallados del punto y el Se puede configurar el efecto de visualización.
5. Función de ampliación: HighCharts puede mostrar una gran cantidad de datos de forma centralizada y puede ampliar una determinada parte del gráfico para aumentar la precisión del gráfico y mostrarlo en detalle. Puede optar por ampliar horizontal o verticalmente.
6. Línea de tiempo: puede tener una precisión de milisegundos.
Ejemplo de gráfico:
Para ver todos los ejemplos de gráficos, consulte la demostración oficial: http://www.highcharts.com/demo/ http://www.highcharts.com/stock/demo/
Es muy conveniente llamar a estos dos tipos de gráficos de biblioteca js de acuerdo con la plantilla oficial, insertar el código js requerido y los archivos js referenciados en la página y usar el valor de identificación único en el área de la capa div donde se inserta el gráfico.
Modificaciones de texto en gráficos:
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}Los cambios de fuente de datos en los gráficos se dividen aproximadamente en tres situaciones:
1. Lo más sencillo: utilizar el reemplazo de texto directamente en la página.
series: [{
name: 'USA',
data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null , null , null ,null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]2. Llame a un archivo de texto en un formato específico:
jQuery.get('analytics.tsv', null, function(tsv, state, xhr)Tome esto como ejemplo. Utilice un software de edición de texto para abrir el archivo Analytics.tsv y podrá ver la estructura de datos. Simplemente genere nuevos datos y reemplácelos de acuerdo con la estructura original.
3. En los gráficos de tipo serie temporal de Highstock, la llamada remota a archivos se utiliza principalmente:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data)También puede abrir el archivo de muestra http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?,
?([ [Date.UTC(2003,8,24),0.8709], [Date.UTC(2003,8,25),0.872], [Date.UTC(2003,8,26),0.8714], [Date.UTC(2003,8,29),0.8638], [Date.UTC(2003,8,30),0.8567], [Date.UTC(2003,9,1),0.8536], [Date.UTC(2003,9,2),0.8564], [Date.UTC(2003,9,3),0.8639], [Date.UTC(2003,9,6),0.8538], [Date.UTC(2003,9,7),0.8489], [Date.UTC(2003,9,8),0.8459], [Date.UTC(2003,9,9),0.8521], [Date.UTC(2003,9,10),0.8477], …………
Imitación por estructura.
Para aquellos que tienen una buena base de JavaScript, no se limitan al método de llamada de datos dado y se pueden ajustar de manera flexible. Para un nivel principiante, simplemente imite de acuerdo con la estructura de datos. Preste atención al formato estructural del archivo de datos y las marcas especiales al principio y al final del archivo. Si las marcas se pierden, es posible que los datos no se lean. Los gráficos no se pueden mostrar.
El uso de fuentes de datos puede utilizar completamente lenguajes de secuencias de comandos como php para leer desde la base de datos y lograr actualizaciones en tiempo real. Al mismo tiempo, para proyectos de visualización más complejos, también se pueden utilizar combinaciones de varios módulos para combinar una página web en un sistema de visualización.