Os gráficos estatísticos com informações numéricas desempenham um papel importante nas páginas da Internet. Além da função básica de exibir números, as pessoas agora prestam cada vez mais atenção à beleza e à interatividade desses gráficos. Como resultado, os programadores enfrentam desafios cada vez mais sérios. O processo que a maioria das pessoas imagina usar software de desenho para gerar imagens e depois colocá-las em páginas da web é irrealista. , puramente estático, e Desvantagens como a impossibilidade de atualização em tempo real dão o tom e não podem ser usados em larga escala! Hoje em dia, existem diversas linguagens de programação de rede, como asp, php, .net... a maioria delas possui funções de desenho de script, mas as funções são bastante básicas. Elas precisam desenhar um gráfico após o outro e calcular coordenadas. e outras informações. Se você quiser que seja bonito, é um pouco difícil... A biblioteca de classes Jpgraph em php é uma tabela melhor, mas sua beleza dinâmica ainda é pobre...
O nascimento do JQuery trouxe luz ao design de interação dinâmica de páginas da web. Muitos sites emergentes para grupos de moda jovem adotaram a tecnologia JQuery. página. O desenvolvimento da tecnologia também trouxe um grande desenvolvimento para a forma de exibição de gráficos estatísticos da web. A seguir, apresentamos uma das bibliotecas javascript relativamente simples, mas também práticas - Highcharts (gráficos estatísticos), Highstock (exibição de dados de séries temporais), ambas são bibliotecas de gráficos. escritos em JavaScript puro. Eles podem adicionar gráficos interativos de maneira fácil e conveniente a sites ou aplicativos da web. Eles não requerem plug-ins para serem executados como Flash e Java, têm boa compatibilidade e podem atingir tamanho adaptável. pode suportar perfeitamente a maioria dos navegadores atuais, incluindo o IE6, o que causa dores de cabeça para muitos engenheiros front-end. . E é gratuito para estudo pessoal, site pessoal e uso não comercial. Os tipos de gráficos atualmente suportados pelo HighCharts incluem gráficos de curvas, gráficos de área, gráficos de barras, gráficos de pizza, gráficos de dispersão e gráficos abrangentes. Highstock é usado principalmente para exibição de dados de séries temporais.
Os principais recursos do HighCharts incluem:
1. Compatibilidade: HighCharts é escrito em JavaScript puro e é compatível com a maioria dos navegadores atuais, incluindo iPhone, IE, Firefox, etc.;
2. Muitos tipos de gráficos: HighCharts agora oferece suporte a uma variedade de tipos de gráficos, incluindo gráficos de curvas, gráficos de área, gráficos de barras, gráficos de pizza, gráficos de dispersão, gráficos abrangentes, etc., para atender a diversas necessidades.
3. Não restrito por idioma: HighCharts pode ser usado na maioria dos desenvolvimentos WEB e é gratuito para usuários individuais. Ele suporta uso em vários idiomas, como ASP, PHP, JAVA, .NET, etc.
4. Função de prompt: No gráfico gerado pelo HighCharts, você pode definir o efeito de prompt a ser exibido no ponto de dados, ou seja, mover o mouse para um determinado ponto de dados, os dados detalhados do ponto podem ser exibidos, e o o efeito de exibição pode ser definido.
5. Função de ampliação: HighCharts pode exibir uma grande quantidade de dados de maneira centralizada e pode ampliar uma determinada parte do gráfico para aumentar a precisão do gráfico e exibi-lo em detalhes.
6. Linha do tempo: pode ter precisão de milissegundos.
Exemplo de gráfico:
Para todos os exemplos de gráficos, consulte a demonstração oficial: http://www.highcharts.com/demo/ http://www.highcharts.com/stock/demo/
É muito conveniente chamar esses dois tipos de gráficos da biblioteca js De acordo com o modelo oficial, insira o código js necessário e os arquivos js referenciados na página e use o valor de id exclusivo na área da camada div onde o gráfico é inserido.
Modificações de texto nos 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)'
}As alterações na fonte de dados nos gráficos são divididas aproximadamente em três situações:
1. O mais simples, use a substituição de texto diretamente na 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. Chame um arquivo de texto em um formato específico:
jQuery.get('analytics.tsv', null, function(tsv, state, xhr)Tome isso como exemplo. Use um software de edição de texto para abrir o arquivo analytics.tsv e você poderá ver a estrutura de dados. Basta gerar novos dados e substituí-los de acordo com a estrutura original.
3. Nos gráficos do tipo série temporal Highstock, a chamada remota de arquivos é usada principalmente:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data)Você também pode abrir o arquivo de amostra 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], …………
Imitação por estrutura.
Para aqueles que têm uma boa base de javascript, eles não estão limitados ao método de chamada de dados fornecido e podem ser ajustados de forma flexível. Para um nível iniciante, basta imitar de acordo com a estrutura de dados. Preste atenção ao formato estrutural do arquivo de dados e às marcas especiais no início e no final do arquivo. Se as marcas forem perdidas, os dados poderão não ser lidos. gráficos não podem ser exibidos.
O uso de fontes de dados pode usar completamente linguagens de script, como php, para ler o banco de dados e obter atualizações em tempo real. Ao mesmo tempo, para projetos de exibição mais complexos, combinações de vários módulos também podem ser usadas para combinar uma página da web em um sistema de exibição.