Tento článok je zrkadlovým článkom o strojovom preklade, kliknite sem pre prechod na pôvodný článok.

Architect_Programmer_Code Poľnohospodárska sieť»Architekt › Programovanie › .Net/C # › Highcharts kombinuje Asp.net na realizáciu dynamických dátových grafických zobrazení akcií ...
Pohľad: 23205|Odpoveď: 6

[ASP.NET] Highcharts kombinuje Asp.net na realizáciu dynamických dát – príklady zobrazenia akciových grafov

[Kopírovať odkaz]
Zverejnené 28. 6. 2015 0:06:24 | | | |

Špecifická aplikácia tohto príkladu je, že musím pravidelne čítať cenu komodity z databázy a potom ju zobrazovať na webovej stránke ako graf, podobne ako cenový trendový graf obchodných nástrojov v akciách.

Používam asp.net, v kombinácii s implementáciou pluginu Highcharts v jQuery, plugin dokáže podporovať mnoho typov grafiky, ale sú statické a poskytnuté príklady je potrebné transformovať, záujemcovia môžu ísť na oficiálnu stránku Highcharts a pozrieť si to (http://www.highcharts.com/), ktorá ponúka veľa ukážok, úprimne, aby som pochopil svoje potreby, mal by som použiť Highstock, Avšak po pohľade na príklad dynamickej aktualizácie Highcharts si tiež uvedomujem, že moje rozhranie požiadaviek je stručnejšie, takže tento článok používa dynamický update model v Highcharts a grafický typ je spline. Konečná mapa efektov je nasledovná (cena Pinqijin sa aktualizuje každých 10 sekúnd a bod sa pridáva do čiarového grafu každých 10 sekúnd):

Dosiahnite krok navyše:

Vytvorte novú webovú stránku pomocou VS a vytvorte asp.net stránku DynamicUpdate.aspx, kód stránky je nasledovný:


  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>
Kopírovať kód

Vlastnosť Highcharts renderTo označuje zobrazovacie kontajnery,

udalosti predstavujú udalosť, ktorú kontajner potrebuje zaregistrovať, kde načítanie znamená, že nastáva až po dokončení načítania, tu je v načítaní nastavený časovač js, ktorý nastáva raz za 10 sekúnd, a kód v ňom je na požiadavku najnovšieho GOLD zo súboru dataupdate.ashx priečinka ajaxhandler v rovnakom koreňovom adresári ako DynamicUpdate.aspx stránka cez ajax v jQuery Čo sa týka cenových údajov variety, tu je dôvod, prečo pridávam randomCode + "=" + oldrandomCode do ajax URL, pretože pridaním náhodného čísla sa vyhnem cache, a flag=1 je preto, že môj dataupdate.ashx súbor chce prijať viacero požiadaviek z rôznych ajaxov, takže používam flag na jeho rozlíšenie

xAxis predstavuje kolekciu atribútov definovaných pre x-os kontajnera, typ predstavuje zobrazený typ textu, voliteľné, tu vyplňujem typ času, tu si všimnite, že predvolený čas pre inštanciu je GMT čas, môžete použiť aj UTC čas, ale my zvyčajne používame pekingský čas (GMT alebo UTC) + 8 hodín = pekingský čas, takže keď použijeme ajax, aby sme zistili, že čas je pekingský čas, mali by sme od hodiny odčítať 8 hodín (tu chcem tiež zdieľať skúsenosť, Ako previesť serverový čas na js čas, ktorý môže použiť metóda .getTime(), teda odčítať serverový čas od 1970-1-1, previesť zostávajúce dni na milisekundy a potom priradiť hodnotu novo inicializovanému času pomocou metódy setTime v js. Zistil som, že výsledok získaný getTime() je nesprávny na inicializáciu js času priamo v js vo forme nového dátumu (rok, mesiac, deň, hodina, minúta, sekunda, milisekunda) pomocou getTime(), Čo sa týka toho, prečo sa 1970-1-1 odpočítava, je to preto, že definícia metódy getTime() je získať počet milisekúnd od aktuálneho času z 1970-1-1). Keď sa os x nezobrazuje ako čas alebo si ju musíte definovať sami, môže byť definovaná atribútom kategórie, tickPixelInterval predstavuje hustotu osi x a štítky sa používajú na formátovanie zobrazovacieho formátu osi x

yAxis predstavuje kolekciu atribútov definovaných pre y-os kontajnera, ktorá je približne rovnaká ako atribúty x-osi, ale v Highcharts nie je možné definovať pevnú hodnotu y-osi cez kategórie, y-os Highcharts sa automaticky generuje na základe daných údajov o súradnicovom bode, ktoré závisí od dátového podatribútu atribútu série, napríklad keď dátam priradíte hodnotu. Maximálna hodnota je 300 a minimálna 100. Potom bude zobrazenie y-osi medzi 100 a 300, alebo môžete nastaviť atribút max či min pre yAxis

séria predstavuje kolekciu všetkých kriviek zobrazených v kontajneri, tu ukazujem len jednu krivku, názov predstavuje názov krivky, dáta predstavujú kolekciu série súradnicových bodov krivky, x je vpredu, y je za ním, je to js pole, v tomto prípade, pretože os x ukazuje čas, takže vlastnosť x objektu poľa musí byť nastavená na čas, ale vo Highcharts nie je čas priamo priradený osi x, Namiesto toho sa počet milisekúnd medzi 1970-1-1 a určitým časom priradí osi x, aby reprezentoval tento čas, takže sa musí použiť metóda getTime(), tvar bodu na y-osi musí byť y = malé číslo * celočíselná forma, a nerozumel som, prečo to Highcharts musel robiť, pretože cenové údaje pre varietu v tomto príklade sú vo všeobecnosti približne rovnaké, takže som musel pri získavaní údajov deliť 200 a pri priraďovaní hodnoty y-osi vynásobiť 200.


<%= jsonstr %> v kóde stránky sú počiatočné dáta, ktoré potrebujem získať zo servera na inicializáciu grafu, generovanie stránky v cs


  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.         }
Kopírovať kód

Medzi nimi je tabuľka TabMerPrice, ktorá je tabuľkou o rôznych cenách, TMPTime čas, TMPPrice cena, TMPTime časový interval je desať sekúnd, používam databázovú úlohu na generovanie záznamu tabuľky, čo sa deje raz za desať sekúnd

AddHours(-8) slúži na konverziu času na pekingský čas a generovaný dátový formát je json formát

Kód dataupdate.ashx vyzerá takto:


  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.         }
Kopírovať kód

Ide o hrubú implementáciu agregácie krokov, ktorá dokáže realizovať zobrazenie serverových dát v reálnom čase pomocou grafu podobného formátu akcií


HighCharts演示.zip (48.69 KB, Počet stiahnutí: 1)


Skóre

Počet účastníkov1MB+1 prispieť+1 Kolaps dôvod
Mužský božský blahoželanie + 1 + 1 Môže mi prenajímateľ dať kontaktné údaje? Veľmi by to pomohlo?

Zobraziť všetky hodnotenia





Predchádzajúci:Ako sa dostať do vývojárskeho režimu pre Android 4.4.x
Budúci:Na základe Sina@ funkcie jednoduchý príklad

Súvisiace príspevky
Zverejnené 28. 6. 2015 10:34:21 |
Tento príspevok naposledy upravil microxdd 28. 6. 2015 o 10:35

Šitie šnúr je najplytvavejšia časť výkonu a dá sa použiť so StringBuilderom. Odporúča sa však používať JSON serializáciu, ktorá dokáže priamo konvertovať objekty na JSON reťazce. Môže byť tiež deserializovaný
Odporúčam knižnicu ikon Baidu http://echarts.baidu.com/doc/example.html
 Prenajímateľ| Zverejnené 28. 6. 2015 10:54:45 |
microxdd zverejnené 28. 6. 2015 10:34
Šitie šnúr je najplytvavejšia časť výkonu a dá sa použiť so StringBuilderom. Odporúča sa však používať serializáciu JSON, ktorá dokáže priamo konvertovať objekty na ...

Výhodou json je, že je to božský kôň? O tomto som len počul
Zverejnené 28. 6. 2015 16:02:07 |
Publikované 28. 6. 2015 o 10:54
Výhodou json je, že je to božský kôň? O tomto som len počul

JSON je dátový formát, ktorý je jazykovo nezávislý
Zverejnené 28. 6. 2015 16:03:36 |
Delver_Si Zverejnené 28. 6. 2015 o 16:02
JSON je dátový formát, ktorý je jazykovo nezávislý

Priamy prenos dát potrebných pre JS z pozadia v JSON formáte, ako pracovať s JS
 Prenajímateľ| Zverejnené 28. 6. 2015 17:33:24 |
Delver_Si Zverejnené 28. 6. 2015 o 16:03
Priamy prenos dát potrebných pre JS z pozadia v JSON formáte, ako pracovať s JS

Učenie
Zverejnené 29. 6. 2015 18:56:59 |
Xiao Zhazha Zverejnené 28.6.2015 o 17:33
Učenie

Vyhlásenie:
Všetok softvér, programovacie materiály alebo články publikované spoločnosťou Code Farmer Network slúžia len na vzdelávacie a výskumné účely; Vyššie uvedený obsah nesmie byť použitý na komerčné alebo nezákonné účely, inak nesú všetky následky používateľmi. Informácie na tejto stránke pochádzajú z internetu a spory o autorské práva s touto stránkou nesúvisia. Musíte úplne vymazať vyššie uvedený obsah zo svojho počítača do 24 hodín od stiahnutia. Ak sa vám program páči, podporte originálny softvér, zakúpte si registráciu a získajte lepšie originálne služby. Ak dôjde k akémukoľvek porušeniu, kontaktujte nás prosím e-mailom.
Mail To:help@itsvse.com