Acest articol este un articol oglindă al traducerii automate, vă rugăm să faceți clic aici pentru a sări la articolul original.

Architect_Programmer_Code Rețeaua Agricolă»Arhitect › Programare › .Net/C # › Highcharts combină Asp.net pentru a realiza exemple dinamice de afișare grafică a stocurilor ...
Vedere: 23205|Răspunde: 6

[ASP.NET] Highcharts combină Asp.net pentru a realiza exemple dinamice de grafice stock

[Copiază linkul]
Postat pe 28.06.2015 00:06:24 | | | |

Piața specifică de aplicații pentru acest exemplu este că trebuie să citesc regulat prețul unei mărfuri din baza de date și apoi să o afișez pe pagina web ca un grafic, similar graficului de tendință al prețurilor pentru instrumentele de tranzacționare din acțiuni.

Eu folosesc asp.net, combinat cu implementarea pluginului Highcharts în jQuery, pluginul poate suporta multe tipuri de grafică, dar acestea sunt statice, iar exemplele oferite trebuie transformate, prietenii interesați pot intra pe site-ul oficial Highcharts să vadă (http://www.highcharts.com/), care oferă multe demo-uri, sincer, ca să-mi înțeleg nevoile, ar trebui să folosesc Highstock, Totuși, după ce am analizat exemplul de actualizare dinamică al Highcharts, pot realiza că interfața mea de cerințe este mai concisă, așa că acest articol folosește modelul de actualizare dinamică din Highcharts, iar tipul grafic este spline. Harta finală a efectului este următoarea (prețul Pinqijin este actualizat la fiecare 10 secunde, iar un punct este adăugat la graficul liniar la fiecare 10 secunde):

Obține pași:

Creează un site nou cu VS și creează o pagină asp.net DynamicUpdate.aspx, codul paginii este următorul:


  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>
Cod de copiere

Proprietatea Highcharts renderTo indică containerele de afișare,

events reprezintă evenimentul pe care containerul trebuie să-l înregistreze, unde încărcarea înseamnă că are loc după ce încărcarea s-a încheiat, aici se setează un cronometru js în încărcare, care apare o dată la fiecare 10 secunde, iar codul din acesta este pentru a solicita cel mai recent GOLD din fișierul dataupdate.ashx al folderului ajaxhandler în același director rădăcină ca pagina DynamicUpdate.aspx prin ajax în jQuery Datele despre prețuri de acest tip, iată de ce adaug randomCode + "=" + oldrandomCode în URL-ul ajax, pentru că adăugarea unui număr aleatoriu poate evita cache-ul, iar flag=1 este pentru că fișierul meu dataupdate.ashx vrea să accepte mai multe cereri de la diferite ajax, deci folosesc flag pentru a o distinge

xAxis reprezintă colecția de atribute definite pentru axa x a containerului, tipul reprezintă tipul textului afișat, opțional, aici completez tipul de timp, aici observați că implicit pentru această instanță este ora GMT, puteți folosi și ora UTC, dar în general folosim ora Beijing, (GMT sau UTC) + 8 ore = ora Beijing, deci când folosim ajax pentru a obține ora de la Beijing, ar trebui să scădem 8 ore din oră (aici vreau să împărtășesc și o experiență, Cum să convertești timpul serverului în timp js care poate fi folosit de metoda .getTime(), adică să scazi timpul serverului din 1970-1-1, să convertești zilele rămase în milisecunde și apoi să atribui o valoare noului timp inițializat prin metoda setTime în js, am constatat că rezultatul obținut de getTime() este incorect pentru a inițializa un timp js direct în js sub forma noului Date (an, lună, zi, oră, minut, secundă, milisecundă) cu getTime(), Cât despre motivul pentru care 1970-1-1 este scăzut, este pentru că definiția metodei getTime() este de a obține numărul de milisecunde din timpul curent din 1970-1-1), când axa x nu este afișată ca timp sau trebuie să o definești singur, poate fi definită și prin atributul categorii, tickPixelInterval reprezintă densitatea axei x, iar etichetele sunt folosite pentru a formata formatul de afișare al axei x

yAxis reprezintă o colecție de atribute definite pentru axa y a containerului, care este aproximativ aceeași cu atributele axei x, dar în Highcharts nu este posibilă definirea valorii fixe a axei y prin categorii, axa y a Highcharts este generată automat pe baza datelor date de puncte de coordonate, care depinde de subatributul de date al atributului seriei, de exemplu, când atribui o valoare datelor. Valoarea maximă este 300, iar valoarea minimă este 100. Atunci afișarea axei y va fi între 100 și 300, sau poți seta și atributul maxim sau minim al axei y.

seria reprezintă colecția tuturor curbelor afișate în container, aici arăt o singură curbă, numele reprezintă numele curbei, datele reprezintă colecția unei serii de puncte coordonate ale curbei, x este în față, y este în spate, este un tablou js, în acest caz, deoarece axa x arată ora, deci proprietatea x a obiectului tabloului trebuie setată pe timp, dar în Highcharts nu este direct atribuită timp axei x, În schimb, numărul de milisecunde dintre 1970-1-1 și un anumit timp este atribuit axei x pentru a reprezenta acest timp, deci trebuie folosită metoda getTime(), forma punctului coordonatului axei y trebuie să fie y = număr mic * formă întreagă, și nu înțelegeam de ce Highcharts trebuia să facă asta, pentru că datele de preț ale varietății din acest exemplu sunt în general cam aceleași, așa că a trebuit să împart la 200 când obțineam datele, apoi să înmulțesc cu 200 când atribuiam o valoare axei y.


<%= jsonstr %> în codul paginii este datele inițiale pe care trebuie să le obțin de la server pentru a inițializa graful, generarea cs a paginii


  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.         }
Cod de copiere

Dintre acestea, tabelul TabMerPrice este tabelul de informații despre prețuri variații, timpul TMPTime, prețul TMPPrice, intervalul de timp TMPTime este de zece secunde, folosesc o lucrare de bază de date pentru a genera înregistrarea tabelului, care se întâmplă o dată la zece secunde

AddHours(-8) este pentru a converti ora în ora Beijingului, iar formatul de date generat este format json

Codul dataupdate.ashx arată astfel:


  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.         }
Cod de copiere

Aceasta este implementarea aproximativă a agregării pașilor, care poate realiza afișarea în timp real a datelor de pe partea serverului cu un grafic similar cu formatul stock


HighCharts演示.zip (48.69 KB, Numărul de descărcări: 1)


Scor

Numărul participanților1MB+1 Contribui+1 Colaps rațiune
Felicitări pentru zeul masculin + 1 + 1 Poate proprietarul să-mi dea o informație de contact? Ajută mult

Vezi toate ratingurile





Precedent:Cum să intri în modul dezvoltator pentru Android 4.4.x
Următor:Pe baza Sina@ exemplu simplu al funcției

Postări conexe
Postat pe 28.06.2015 10:34:21 |
Această postare a fost editată ultima dată de microxdd pe 28-06-2015, 10:35

Cuserea corzilor este cea mai risipitoare dintre performanțe și poate fi folosită cu StringBuilder. Totuși, se recomandă utilizarea serializării JSON, care poate converti direct obiectele în șiruri JSON. De asemenea, poate fi deseriarizată
Recomand biblioteca de icoane Baidu http://echarts.baidu.com/doc/example.html
 Proprietarul| Postat pe 28.06.2015 10:54:45 |
microxdd postat pe 28-06-2015 10:34
Cuserea corzilor este cea mai risipitoare dintre performanțe și poate fi folosită cu StringBuilder. Totuși, se recomandă utilizarea serializării JSON, care poate converti direct obiectele în ...

Avantajul lui json este că este un cal divin? Am auzit doar de chestia asta
Postat pe 28.06.2015 16:02:07 |
Publicat la 28-6-2015, 22:54
Avantajul lui json este că este un cal divin? Am auzit doar de chestia asta

JSON este un format de date independent de limbă
Postat pe 28.06.2015 16:03:36 |
Delver_Si Postat pe 28-06-2015 16:02
JSON este un format de date independent de limbă

Transferă direct datele necesare de JS din fundal în format JSON, cum să gestionezi JS
 Proprietarul| Postat pe 28.06.2015 17:33:24 |
Delver_Si Postat pe 28-06-2015 16:03
Transferă direct datele necesare de JS din fundal în format JSON, cum să gestionezi JS

Învățare
Postat pe 29.06.2015 18:56:59 |
Xiao Zhazha Postat pe 28-06-2015 17:33
Învățare

Disclaimer:
Tot software-ul, materialele de programare sau articolele publicate de Code Farmer Network sunt destinate exclusiv scopurilor de învățare și cercetare; Conținutul de mai sus nu va fi folosit în scopuri comerciale sau ilegale, altfel utilizatorii vor suporta toate consecințele. Informațiile de pe acest site provin de pe Internet, iar disputele privind drepturile de autor nu au legătură cu acest site. Trebuie să ștergi complet conținutul de mai sus de pe calculatorul tău în termen de 24 de ore de la descărcare. Dacă îți place programul, te rugăm să susții software-ul autentic, să cumperi înregistrarea și să primești servicii autentice mai bune. Dacă există vreo încălcare, vă rugăm să ne contactați prin e-mail.
Mail To:help@itsvse.com