I grafici statistici con informazioni numeriche svolgono un ruolo importante nelle pagine Internet Oltre alla funzione base di visualizzazione dei numeri, le persone prestano sempre più attenzione alla bellezza e all'interattività di questi grafici. Di conseguenza, i programmatori si trovano ad affrontare sfide sempre più serie. Il processo che la maggior parte delle persone immagina utilizzando un software di disegno per generare immagini e poi inserirle nelle pagine web non è realistico. Anche se può essere bello in apparenza, non è facile da modificare , puramente statico, e Svantaggi come l'impossibilità di aggiornare in tempo reale ne danno il tono e non possono essere utilizzati su larga scala! Al giorno d'oggi, ci sono molti linguaggi di programmazione di rete, come asp, php, .net... la maggior parte di essi ha funzioni di disegno di script, ma le funzioni sono piuttosto basilari. Servono per disegnare un grafico dopo l'altro e devono calcolare le coordinate e altre informazioni Se vuoi che sia bello È un po' difficile... La libreria di classi Jpgraph in php è una tabella migliore, ma la sua bellezza dinamica è ancora scarsa...
La nascita di JQuery ha portato alla luce il design dell'interazione dinamica delle pagine web. Molti siti web emergenti per gruppi di moda giovani hanno adottato la tecnologia JQuery. Quelli più evidenti sono gli effetti di dissolvenza in apertura e in chiusura di vari moduli sul web pagina. Lo sviluppo della tecnologia ha portato anche un grande sviluppo nella forma di visualizzazione dei grafici statistici web. Di seguito viene presentata una delle librerie javascript relativamente semplici ma anche pratiche: Highcharts (grafici statistici), Highstock (visualizzazione di dati di serie temporali), entrambe sono librerie di grafici. scritti in puro JavaScript. Possono aggiungere facilmente e comodamente grafici interattivi a siti Web o applicazioni Web. Non richiedono plug-in per l'esecuzione come Flash e Java e funzionano rapidamente, hanno una buona compatibilità, possono raggiungere dimensioni adattive può supportare perfettamente la maggior parte dei browser attuali, incluso IE6, il che causa grattacapi a molti ingegneri front-end. . Ed è gratuito per studio personale, sito web personale e uso non commerciale. I tipi di grafici attualmente supportati da HighCharts includono grafici a curve, grafici ad area, grafici a barre, grafici a torta, grafici a dispersione e grafici completi. Highstock viene utilizzato principalmente per la visualizzazione dei dati delle serie temporali.
Le caratteristiche principali di HighCharts includono:
1. Compatibilità: HighCharts è scritto in puro JavaScript ed è compatibile con la maggior parte dei browser odierni, inclusi iPhone, IE, Firefox, ecc.;
2. Molti tipi di grafici: HighCharts ora supporta una varietà di tipi di grafici, inclusi grafici a curve, grafici ad area, grafici a barre, grafici a torta, grafici a dispersione, grafici completi, ecc., per soddisfare varie esigenze.
3. Non limitato dalla lingua: HighCharts può essere utilizzato nella maggior parte dello sviluppo WEB ed è gratuito per i singoli utenti. Supporta l'uso in più lingue come ASP, PHP, JAVA, .NET, ecc.
4. Funzione prompt: nel grafico generato da HighCharts, è possibile impostare l'effetto del prompt da visualizzare sul punto dati, ovvero spostare il mouse su un determinato punto dati, è possibile visualizzare i dati dettagliati del punto e il è possibile impostare l'effetto di visualizzazione.
5. Funzione di ingrandimento: HighCharts può visualizzare una grande quantità di dati in modo centralizzato e può ingrandire una determinata parte del grafico per aumentare la precisione del grafico e visualizzarlo in dettaglio. Puoi scegliere di ingrandire orizzontalmente o verticalmente.
6. Cronologia: può essere precisa al millisecondo.
Esempio di grafico:
Per tutti gli esempi di grafici, consulta la demo ufficiale: http://www.highcharts.com/demo/ http://www.highcharts.com/stock/demo/
È molto comodo chiamare questi due tipi di grafici della libreria js Secondo il modello ufficiale, inserire il codice js richiesto e i file js di riferimento nella pagina e utilizzare il valore id univoco nell'area del livello div in cui è inserito il grafico.
Modifiche del testo sui grafici:
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)'
}Le modifiche all'origine dati nei grafici sono approssimativamente suddivise in tre situazioni:
1. Il modo più semplice è utilizzare la sostituzione del testo direttamente sulla pagina
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. Chiama un file di testo in un formato specifico:
jQuery.get('analytics.tsv', null, function(tsv, state, xhr)Prendi questo come esempio. Utilizza un software di modifica del testo per aprire il file analytics.tsv e puoi vedere la struttura dei dati. Basta generare nuovi dati e sostituirli in base alla struttura originale.
3. Nei grafici di tipo serie temporale Highstock, viene utilizzata principalmente la chiamata di file remota:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data)Puoi anche aprire il file di esempio 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], …………
Imitazione per struttura.
Coloro che hanno una buona base Javascript non sono limitati al metodo di chiamata dei dati specificato e possono essere adattati in modo flessibile. Per un livello principiante, basta imitare in base alla struttura dei dati. Prestare attenzione al formato strutturale del file di dati e ai segni speciali all'inizio e alla fine del file. Se i segni vengono persi, i dati potrebbero non essere letti e il file non è possibile visualizzare i grafici.
L'uso delle origini dati può utilizzare completamente linguaggi di scripting come php per leggere dal database per ottenere aggiornamenti in tempo reale. Allo stesso tempo, per progetti espositivi più complessi, è possibile utilizzare anche combinazioni multi-modulo per unire una pagina web in un sistema espositivo.