Questo articolo è un articolo speculare di traduzione automatica, clicca qui per saltare all'articolo originale.

Architect_Programmer_Code Rete Agricola»Architetto › Programmazione › .Net/C # › Highcharts combina Asp.net per realizzare dati dinamici esempi di visualizzazione grafica di stock ...
Vista: 23205|Risposta: 6

[ASP.NET] Highcharts combina Asp.net per realizzare esempi dinamici di grafici di stock

[Copiato link]
Pubblicato su 28/06/2015 00:06:24 | | | |

Il mercato specifico per applicazioni di questo esempio è che devo leggere regolarmente il prezzo di una commodity dal database e poi visualizzarlo sulla pagina web come grafico, simile al grafico di tendenza dei prezzi degli strumenti di trading azionari.

Io uso asp.net, combinato con l'implementazione del plugin Highcharts in jQuery, il plugin può supportare molti tipi di grafica, ma sono statici, e gli esempi forniti devono essere trasformati, gli amici interessati possono andare sul sito ufficiale di Highcharts per vedere (http://www.highcharts.com/), che fornisce molte demo, ad essere onesti, per capire le mie esigenze, dovrei usare Highstock, Tuttavia, dopo aver esaminato l'esempio di aggiornamento dinamico di Highcharts, posso anche rendermi conto che la mia interfaccia di requisiti è più concisa, quindi questo articolo utilizza il modello di aggiornamento dinamico in Highcharts, e il tipo grafico è spline. La mappa finale dell'effetto è la seguente (il prezzo di Pinqijin viene aggiornato ogni 10 secondi e un punto viene aggiunto al grafico a linee ogni 10 secondi):

Raggiungere i gradini:

Crea un nuovo sito web con VS e crea una pagina asp.net DynamicUpdate.aspx, il codice della pagina è il seguente:


  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>
Copia codice

Highcharts proprietà renderTo indica i contenitori di visualizzazione,

events rappresenta l'evento che il container deve registrare, dove load significa che avviene dopo il completamento del load; qui viene impostato un timer js nel load, che avviene ogni 10 secondi, e il codice in esso serve a richiedere l'ultimo GOLD dal file dataupdate.ashx della cartella ajaxhandler nella stessa directory radice della pagina DynamicUpdate.aspx tramite ajax in jQuery Per quanto riguarda i dati di prezzo di questa varietà, ecco perché aggiungo randomCode + "=" + oldrandomCode nell'URL ajax, perché aggiungere un numero casuale può evitare la caching, e flag=1 è perché il mio file dataupdate.ashx vuole accettare più richieste da diversi ajax, quindi usa flag per distinguerlo

xAxis rappresenta la collezione di attributi definiti per l'asse x del container, il tipo rappresenta il tipo di testo visualizzato, opzionale, qui rifill il tipo di tempo, qui si noti che il predefinito per l'istanza è l'ora GMT, puoi anche usare l'ora UTC, ma generalmente usiamo l'ora di Pechino, (GMT o UTC) + 8 ore = ora di Pechino, quindi quando usiamo l'ajax per ottenere l'ora di Pechino, dovremmo sottrarre 8 ore dall'ora (qui voglio anche condividere un'esperienza, Come convertire il tempo del server in tempo js che può essere usato dal metodo .getTime(), cioè sottrarre l'ora del server da 1970-1-1, convertire i giorni restanti in millisecondi e poi assegnare un valore al tempo appena inizializzato tramite il metodo setTime in js, ho scoperto che il risultato ottenuto da getTime() è errato per inizializzare un tempo js direttamente in js sotto forma di nuova Data (anno, mese, giorno, ora, minuto, secondo, millisecondo) con getTime(), Per quanto riguarda il motivo per cui 1970-1-1 viene sottratto, è perché la definizione del metodo getTime() è ottenere il numero di millisecondi dal tempo corrente da 1970-1-1), quando l'asse x non è visualizzato come un tempo o devi definirlo da solo, può anche essere definito dall'attributo categories, tickPixelInterval rappresenta la densità dell'asse x, e etichette viene usato per formattare il formato di visualizzazione dell'asse x

yAsse rappresenta una raccolta di attributi definiti per l'asse y del contenitore, che è approssimativamente uguale agli attributi dell'asse x, ma in Highcharts non è possibile definire il valore fisso dell'asse y tramite categorie; l'asse y di Highchart viene generato automaticamente in base ai dati dati dei punti di coordinata, che dipendono dal sottoattributo dati dell'attributo serie, ad esempio, quando si assegna un valore ai dati. Il valore massimo è 300 e il valore minimo è 100. Poi la visualizzazione dell'asse y sarà tra 100 e 300, oppure puoi anche impostare l'attributo massimo o minimo dell'asse y.

serie rappresenta la collezione di tutte le curve visualizzate nel contenitore, qui mostro una sola curva, nome rappresenta il nome della curva, data rappresenta la raccolta di una serie di punti coordinate della curva, x è davanti, y è dietro, è un array js, in questo caso, poiché l'asse x mostra il tempo, quindi la proprietà x dell'oggetto array deve essere impostata come tempo, ma in Highcharts non è direttamente assegnato tempo all'asse x, Invece, il numero di millisecondi tra 1970-1-1 e un certo tempo viene assegnato all'asse x per rappresentare questo tempo, quindi deve essere usato il metodo getTime(), la forma del punto coordinato sull'asse y deve essere y = piccolo numero * forma intera, e non capivo perché Highcharts dovesse farlo, perché i dati di prezzo della varietà in questo esempio sono generalmente gli stessi, quindi ho dovuto dividere per 200 quando ho ottenuto i dati, e poi moltiplicare per 200 quando assegno un valore all'asse y.


<%= jsonstr %> nel codice della pagina sono i dati iniziali che devo ottenere dal server per inizializzare il grafo, la generazione CS della pagina


  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.         }
Copia codice

Tra queste, la tabella TabMerPrice è la tabella informativa sui prezzi varietà, TMPTime time, TMPPrice price, TMPTime intervallo di tempo di dieci secondi, uso un lavoro di database per generare la registrazione della tabella, che avviene una volta ogni dieci secondi

AddHours(-8) serve a convertire l'ora in ora di Pechino, e il formato dati generati è il formato json

Il codice dataupdate.ashx appare così:


  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.         }
Copia codice

Questa è l'implementazione approssimativa dell'aggregazione a passi, che può realizzare la visualizzazione in tempo reale dei dati lato server con un grafico simile al formato stock


HighCharts演示.zip (48.69 KB, Numero di download: 1)


Punteggio

Numero di partecipanti1MB+1 contribuire+1 Collasso ragione
Congratulazioni al dio maschio + 1 + 1 Il proprietario può darmi un contatto? Aiuta molto

Vedi tutte le valutazioni





Precedente:Come entrare in modalità sviluppatore per Android 4.4.x
Prossimo:Basato su Sina@ funzione semplice esempio

Post correlati
Pubblicato su 28/06/2015 10:34:21 |
Questo post è stato modificato l'ultima volta da microxdd il 28-6-2015 alle 10:35

Cucire le corde è la performance più sprecosa e può essere usato con StringBuilder. Tuttavia, si consiglia di utilizzare la serializzazione JSON, che può convertire direttamente gli oggetti in stringhe JSON. Può anche essere deserializzato
Consiglio la libreria di icone Baidu http://echarts.baidu.com/doc/example.html
 Padrone di casa| Pubblicato su 28/06/2015 10:54:45 |
microxdd pubblicato il 28-06-2015 alle 10:34
Cucire le corde è la performance più sprecosa e può essere usato con StringBuilder. Tuttavia, si raccomanda di utilizzare la serializzazione JSON, che può convertire direttamente gli oggetti in ...

Il vantaggio del json è che è un cavallo divino? Ne ho sentito parlare solo
Pubblicato su 28/06/2015 16:02:07 |
Pubblicato il 28-6-2015 alle 10:54
Il vantaggio del json è che è un cavallo divino? Ne ho sentito parlare solo

JSON è un formato di dati indipendente dalla lingua
Pubblicato su 28/06/2015 16:03:36 |
Delver_Si Pubblicato il 28-6-2015 alle 16:02
JSON è un formato di dati indipendente dalla lingua

Trasferire direttamente i dati richiesti da JS dal background in formato JSON, come gestire JS
 Padrone di casa| Pubblicato su 28/06/2015 17:33:24 |
Delver_Si Pubblicato il 28-6-2015 alle 16:03
Trasferire direttamente i dati richiesti da JS dal background in formato JSON, come gestire JS

Apprendimento
Pubblicato su 29/06/2015 18:56:59 |
Xiao Zhazha Pubblicato il 28-6-2015 17:33
Apprendimento

Disconoscimento:
Tutto il software, i materiali di programmazione o gli articoli pubblicati dalla Code Farmer Network sono destinati esclusivamente all'apprendimento e alla ricerca; I contenuti sopra elencati non devono essere utilizzati per scopi commerciali o illegali, altrimenti gli utenti dovranno sostenere tutte le conseguenze. Le informazioni su questo sito provengono da Internet, e le controversie sul copyright non hanno nulla a che fare con questo sito. Devi eliminare completamente i contenuti sopra elencati dal tuo computer entro 24 ore dal download. Se ti piace il programma, ti preghiamo di supportare software autentico, acquistare la registrazione e ottenere servizi autentici migliori. In caso di violazione, vi preghiamo di contattarci via email.
Mail To:help@itsvse.com