Este artigo é um artigo espelhado de tradução automática, por favor clique aqui para ir para o artigo original.

Architect_Programmer_Code Rede Agrícola»Arquiteto › Programação › .Net/C # › Highcharts combina Asp.net para realizar dados dinâmicos de mostradores gráficos de estoques ...
Vista: 23205|Resposta: 6

[ASP.NET] Highcharts combina Asp.net para realizar exemplos dinâmicos de gráficos de stock

[Copiar link]
Publicado em 28/06/2015 00:06:24 | | | |

O mercado específico para aplicações deste exemplo é que preciso ler o preço de uma commodity no banco de dados regularmente e então exibi-la na página web como um gráfico, semelhante ao gráfico de tendência de preços dos instrumentos de negociação em ações.

Eu uso asp.net, combinado com a implementação do plugin Highcharts no jQuery, o plugin pode suportar muitos tipos de gráficos, mas eles são estáticos, e os exemplos fornecidos precisam ser transformados, amigos interessados podem acessar o site oficial do Highcharts para ver (http://www.highcharts.com/), que oferece muitas demos, para ser honesto, para entender minhas necessidades, devo usar o Highstock, No entanto, após analisar o exemplo de atualização dinâmica do Highcharts, também percebi que minha interface de requisitos é mais concisa, então este artigo usa o modelo de atualização dinâmica no Highcharts, e o tipo gráfico é spline. O mapa final do efeito é o seguinte (o preço do Pinqijin é atualizado a cada 10 segundos, e um ponto é adicionado ao gráfico de linhas a cada 10 segundos):

Alcance a formação de passos:

Crie um novo site com VS e crie uma página asp.net DynamicUpdate.aspx, o código da página é o seguinte:


  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicUpdate.aspx.cs"
  2.     Inherits="WebImg.DynamicUpdate" %>

  4. <!DOCTYPE HTML>
  5. <html>
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8.     <title>动态显示价格图例</title>
  9.     <scrip去掉t type="text/javascrip去掉t" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></scrip去掉t>
  10.     <scrip去掉t type="text/javascrip去掉t">
  11.    $(function () {
  12.        $(document).ready(function () {
  13.            Highcharts.setOptions({
  14.                global: {
  15.                    useUTC: false
  16.                }
  17.            });
  18.            var chart;
  19.            chart = new Highcharts.Chart({
  20.                chart: {
  21.                    renderTo: 'container',
  22.                    type: 'spline',
  23.                    marginRight: 10,
  24.                    events: {
  25.                    load: function () {
  26.                    // set up the updating of the chart each second
  27.                    var series = this.series[0];
  28.                    setInterval(function () {
  29.                                   var randomCode = parseInt(Math.random() * 10000);
  30.                                   var oldrandomCode = parseInt(Math.random() * 10000);
  31.                                   $.ajax({
  32.                                     url: "ajaxhandler/dataupdate.ashx?" + randomCode + "=" + oldrandomCode + "&flag=1",
  33.                                     type: "get",
  34.                                     dataType: "json",
  35.                                     success: function (data, textStatus, XMLHttpRequest) {
  36.                                         var ctime = new Date();
  37.                                         ctime.setTime(parseInt(data.rows[0].times));
  38.                                         var x = ctime.getTime(), // current time
  39.                                         y = data.rows[0].price * 200;
  40.                                         series.addPoint([x, y], true, true);
  41.                                     },
  42.                                     error: function () { }
  43.                                    });
  44.                    }, 10000);
  45.                    }
  46.                }
  47.            },
  48.            title: {
  49.                text: '品旗撮合交易市场品种行情'
  50.            },
  51.            xAxis: {
  52.                         title: {
  53.                                 text: '时间'
  54.                             },
  55.                type: 'datetime',
  56.                tickPixelInterval: 150,
  57.                         labels:{formatter:function(){
  58.                             var vDate = new Date(this.value);
  59.                             return vDate.getHours()+":"+vDate.getMinutes()+":"+vDate.getSeconds();
  60.                         }}
  61.            },
  62.            yAxis: {
  63.                title: {
  64.                    text: '价格'
  65.                },
  66.                plotLines: [{
  67.                    value: 0,
  68.                    width: 1,
  69.                    color: '#808080'
  70.                }]
  71.            },
  72.            tooltip: {
  73.                formatter: function () {
  74.                    return '<b>' + this.series.name + '</b><br/>' +
  75.                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
  76.                         Highcharts.numberFormat(this.y, 2);
  77.                }
  78.            },
  79.            legend: {
  80.                enabled: false
  81.            },
  82.            exporting: {
  83.                enabled: false
  84.            },
  85.                     credits:{
  86.                         text:'品旗金属交易市场',
  87.                         url:'http://www.inv6.com'
  88.                     },
  89.            series: [{
  90.                name: '品旗金(GOLD)',
  91.                data: (function () {
  92.                    var data = [],
  93.                             i;
  94.                             var jsonData = <%= jsonstr %>;
  95.                    for (i = -19; i <= 0; i++) {
  96.                                 var ctime = new Date();
  97.                                 ctime.setTime(parseInt(jsonData.rows[i+19].time1));
  98.                        data.push({
  99.                             x: ctime.getTime(),
  100.                                      y: jsonData.rows[i + 19].price * 200
  101.                        });
  102.                    }
  103.                    return data;
  104.                })()
  105.            }]
  106.        });
  107.    });
  108. });
  109.     </scrip去掉t>
  110. </head>
  111. <body>
  112.     <scrip去掉t src="http://code.highcharts.com/highcharts.js"></scrip去掉t>
  113.     <scrip去掉t src="http://code.highcharts.com/modules/exporting.js"></scrip去掉t>
  114.     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
  115.     </div>
  116. </body>
  117. </html>
Copiar código

Propriedades Highcharts renderTo indica contêineres de exibição,

events representa o evento que o contêiner precisa registrar, onde load significa que ocorre após a conclusão do load; aqui, um timer js é definido na carga, que ocorre a cada 10 segundos, e o código nele é para solicitar o GOLD mais recente do arquivo dataupdate.ashx da pasta ajaxhandler no mesmo diretório raiz da página DynamicUpdate.aspx via ajax no jQuery Os dados de preço dessa variedade, aqui está o motivo pelo qual adiciono randomCode + "=" + oldrandomCode na URL ajax, porque adicionar um número aleatório pode evitar o cache, e flag=1 é porque meu arquivo dataupdate.ashx quer aceitar múltiplas requisições de diferentes ajax, então use flag para distinguir

xAxis representa a coleção de atributos definidos para o eixo x do contêiner, o tipo representa o tipo de texto exibido, opcional, aqui preencho o tipo de hora, aqui note que o padrão para a instância é o horário GMT, você também pode usar o horário UTC, mas geralmente usamos o horário de Pequim, (GMT ou UTC) + 8 horas = horário de Pequim, então quando usamos ajax para obter o horário de Pequim, devemos subtrair 8 horas da hora (aqui também quero compartilhar uma experiência, Como converter o tempo do servidor para o tempo js que pode ser usado pelo método .getTime(), ou seja, subtrair o tempo do servidor de 1970-1-1, converter os dias restantes em milissegundos e então atribuir um valor ao tempo recém-inicializado pelo método setTime em js, descobri que o resultado obtido por getTime() está incorreto para inicializar um tempo js diretamente em js na forma de nova Data (ano, mês, dia, hora, minuto, segundo, milissegundo) com getTime(), Quanto ao motivo pelo qual 1970-1-1 é subtraído, é porque a definição do método getTime() é obter o número de milissegundos do tempo atual a partir de 1970-1-1), quando o eixo x não é exibido como um tempo ou você precisa defini-lo por conta própria, ele também pode ser definido pelo atributo categorias, tickPixelInterval representa a densidade do eixo x, e etiquetas é usado para formatar o formato de exibição do eixo x

yAxis representa uma coleção de atributos definidos para o eixo y do container, que é aproximadamente igual aos atributos do eixo x, mas no Highcharts não é possível definir o valor fixo do eixo y por meio de categorias; o eixo y do Highcharts é gerado automaticamente com base nos dados do ponto de coordenadas fornecidos, que dependem do subatributo de dados do atributo série, por exemplo, quando você atribui um valor a um dado O valor máximo é 300, e o valor mínimo é 100. Depois, a exibição do eixo y ficará entre 100 e 300, ou você também pode definir o atributo máximo ou mínimo do eixo y.

série representa a coleção de todas as curvas exibidas no contêiner, aqui mostro apenas uma curva, nome representa o nome da curva, dados representam a coleção de uma série de pontos coordenados da curva, x está na frente, y está atrás, é um array js, neste caso, porque o eixo x mostra o tempo, então a propriedade x do objeto array deve ser definida para o tempo, mas no Highcharts o tempo não é diretamente atribuído ao eixo x, Em vez disso, o número de milissegundos entre 1970-1-1 e um certo tempo é atribuído ao eixo x para representar esse tempo, então o método getTime() deve ser usado, a forma do ponto coordenado do eixo y deve ser y = número pequeno * forma inteira, e eu não entendi por que os Highcharts tinham que fazer isso, porque os dados de preços da variedade neste exemplo geralmente são mais ou menos iguais, então tive que dividir por 200 ao obter os dados, e depois multiplicar por 200 ao atribuir um valor ao eixo y.


<%= jsonstr %> no código da página são os dados iniciais que preciso obter do servidor para inicializar o grafo, a geração em cs da página


  1. public string jsonstr = "";
  2.         protected void Page_Load(object sender, EventArgs e)
  3.         {
  4.             getData();
  5.         }
  6.         private void getData()
  7.         {
  8.             DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 20 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");
  9.             string json = "{"rows":[";
  10.             for (int i = (dtPrice.Rows.Count-1); i >= 0; i--)
  11.             {
  12.                 json += "{"time1":"" + (Convert.ToDateTime(dtPrice.Rows[i]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "","price":"" + (Convert.ToDecimal(dtPrice.Rows[i]["TMPPrice"])/200) + ""},";
  13.             }
  14.             json = json.TrimEnd(',');
  15.             json += "]}";
  16.             jsonstr = json;
  17.         }
Copiar código

Entre elas, a tabela TabMerPrice é a tabela de informações de preços variados, tempo TMPTime, preço TMPPrice, TMPTime intervalo de tempo é de dez segundos, uso um trabalho de banco de dados para gerar o registro da tabela, que acontece uma vez a cada dez segundos

AddHours(-8) serve para converter o horário para o horário de Pequim, e o formato de dados gerado é o formato json

O código dataupdate.ashx é assim:


  1. public void ProcessRequest(HttpContext context)
  2.         {
  3.             string flag = context.Request.QueryString["flag"].ToString();
  4.             switch (flag)
  5.             {
  6.                 case "1"://获取品种当前价格
  7.                     GetMerPrice(context);
  8.                     break;
  9.             }
  10.         }
  11.         private void GetMerPrice(HttpContext context)
  12.         {
  13.             context.Response.Clear();
  14.             context.Response.Buffer = true;
  15.             context.Response.ContentType = "application/json";
  16.             context.Response.ContentEncoding.GetBytes("utf-8");
  17.             DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 1 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");
  18.             string json = "{"rows":[";
  19.             json += "{"times":"" + (Convert.ToDateTime(dtPrice.Rows[0]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "","price":"" + (Convert.ToDecimal(dtPrice.Rows[0]["TMPPrice"]) / 200) + ""}";
  20.             json = json.TrimEnd(',');
  21.             json += "]}";
  22.             context.Response.Write(json);
  23.             context.Response.Flush();
  24.             context.Response.End();
  25.         }
Copiar código

Esta é a implementação aproximada da agregação por etapas, que pode realizar a exibição em tempo real dos dados do lado do servidor com um gráfico semelhante ao formato original


HighCharts演示.zip (48.69 KB, Número de downloads: 1)


Pontuação

Número de participantes1MB+1 contribuir+1 Colapso razão
Deus masculino, parabéns + 1 + 1 O proprietário pode me passar um contato de contato? Isso ajuda muito

Veja todas as classificações





Anterior:Como entrar no modo desenvolvedor para Android 4.4.x
Próximo:Com base em Sina@ função exemplo simples

Posts Relacionados
Publicado em 28/06/2015 10:34:21 |
Este post foi editado pela última vez por microxdd em 28-06-2015 às 22:35

Costurar cordas é o desempenho mais desperdiçado e pode ser usado com o StringBuilder. No entanto, recomenda-se usar serialização JSON, que pode converter objetos diretamente em strings JSON. Também pode ser desserializado
Recomendo a biblioteca de ícones Baidu http://echarts.baidu.com/doc/example.html
 Senhorio| Publicado em 28/06/2015 10:54:45 |
microxdd postado em 28-06-2015 às 22:34
Costurar cordas é o desempenho mais desperdiçado e pode ser usado com o StringBuilder. No entanto, recomenda-se usar serialização JSON, que pode converter objetos diretamente em ...

A vantagem do json é que ele é um cavalo divino? Só ouvi falar desse negócio
Publicado em 28/06/2015 16:02:07 |
Publicado em 28-06-2015 às 22:54
A vantagem do json é que ele é um cavalo divino? Só ouvi falar desse negócio

JSON é um formato de dados que é independente de linguagem
Publicado em 28/06/2015 16:03:36 |
Delver_Si Postado em 28-06-2015 às 16:02
JSON é um formato de dados que é independente de linguagem

Transferir diretamente os dados exigidos pelo JS do background no formato JSON, como lidar com JS
 Senhorio| Publicado em 28/06/2015 17:33:24 |
Delver_Si Postado em 28-06-2015 às 16:03
Transferir diretamente os dados exigidos pelo JS do background no formato JSON, como lidar com JS

Aprendizado
Publicado em 29/06/2015 18:56:59 |
Xiao Zhazha Postado em 28-06-2015 17:33
Aprendizado

Disclaimer:
Todo software, material de programação ou artigos publicados pela Code Farmer Network são apenas para fins de aprendizado e pesquisa; O conteúdo acima não deve ser usado para fins comerciais ou ilegais, caso contrário, os usuários terão todas as consequências. As informações deste site vêm da Internet, e disputas de direitos autorais não têm nada a ver com este site. Você deve deletar completamente o conteúdo acima do seu computador em até 24 horas após o download. Se você gosta do programa, por favor, apoie um software genuíno, compre o registro e obtenha serviços genuínos melhores. Se houver qualquer infração, por favor, entre em contato conosco por e-mail.
Mail To:help@itsvse.com