Tento článek je zrcadlovým článkem o strojovém překladu, klikněte zde pro přechod na původní článek.

Architect_Programmer_Code Zemědělská síť»Architekt › Programování › .Net/C # › Highcharts kombinuje Asp.net k realizaci dynamických grafických zobrazení dat o akciích ...
Pohled: 23205|Odpověď: 6

[ASP.NET] Highcharts kombinuje Asp.net pro realizaci dynamických datových příkladů zobrazení grafů akcií

[Kopírovat odkaz]
Zveřejněno 28.06.2015 0:06:24 | | | |

Konkrétní aplikace tohoto příkladu spočívá v tom, že musím pravidelně číst cenu komodity z databáze a pak ji zobrazovat na webové stránce jako graf, podobně jako cenový trendový graf obchodních nástrojů v akciích.

Používám asp.net, v kombinaci s implementací pluginu Highcharts v jQuery, plugin podporuje mnoho typů grafiky, ale jsou statické a příklady je třeba přetvořit, zájemci mohou navštívit oficiální web Highcharts (http://www.highcharts.com/), kde je spousta dem, upřímně, abych pochopil své potřeby, měl bych použít Highstock, Po prohlédnutí příkladu dynamické aktualizace Highcharts si však také uvědomuji, že mé rozhraní požadavků je stručnější, takže tento článek používá model dynamické aktualizace v Highcharts a grafický typ je spline. Konečná mapa efektů je následující (cena Pinqijinu se aktualizuje každých 10 sekund a do čárového grafu se každých 10 sekund přidává bod):

Zvyšujte krok na světě:

Vytvořte nový web pomocí VS a vytvořte asp.net stránku DynamicUpdate.aspx, kód stránky je následující:


  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írovat kód

Vlastnost Highcharts renderTo označuje zobrazovací kontejnery,

events představuje událost, kterou musí kontejner zaregistrovat, kde načítání znamená, že nastává po dokončení načítání, zde je v načítání nastaven časovač js, který nastává jednou za 10 sekund, a kód v něm slouží k požadavku na nejnovější GOLD ze souboru dataupdate.ashx složky ajaxhandler ve stejném kořenovém adresáři jako DynamicUpdate.aspx stránka přes ajax v jQuery Cenová data této variety, tady je důvod, proč přidávám randomCode + "=" + oldrandomCode do URL ajax, protože přidání náhodného čísla může zabránit cachování, a flag=1 je proto, že můj dataupdate.ashx soubor chce přijímat více požadavků od různých ajaxů, takže používám flag k rozlišení

xAxis představuje kolekci atributů definovaných pro x-osu kontejneru, typ představuje zobrazovaný typ textu, volitelné, zde vyplňuji typ času, zde si všimněte, že výchozí pro instanci je GMT čas, můžete také použít UTC čas, ale my obecně používáme pekingský čas (GMT nebo UTC) + 8 hodin = pekingský čas, takže když použijeme AJAX, abychom zjistili, že čas je pekingský čas, měli bychom od hodiny odečíst 8 hodin (zde také chci sdílet jednu zkušenost, Jak převést server time na js čas, který lze použít metodou .getTime(), tedy odečíst server time od 1970-1-1, převést zbývající dny na milisekundy a pak přiřadit hodnotu nově inicializovanému času pomocí metody setTime v js. Zjistil jsem, že výsledek získaný getTime() je nesprávný pro inicializaci js času přímo v js ve formě nového Date (rok, měsíc, den, hodina, minuta, sekunda, milisekunda) pomocí getTime(), Pokud jde o to, proč se 1970-1-1 odečítá, je to proto, že definice metody getTime() je získat počet milisekund od aktuálního času z 1970-1-1). Když osa x není zobrazena jako čas nebo ji musíte definovat sami, může být také definována podle atributu kategorie, tickPixelInterval představuje hustotu osy x a štítky slouží k formátování zobrazovacího formátu osy x

yAxis představuje soubor atributů definovaných pro y-osu kontejneru, která je přibližně stejná jako atributy osy x, ale v Highcharts není možné definovat pevnou hodnotu osy y pomocí kategorií, osa y v Highcharts je automaticky generována na základě daných dat o souřadnicovém bodě, což závisí na podatributu atributu série, například když přiřadíte hodnotu datům, maximální hodnota je 300 a minimální hodnota 100. Pak bude zobrazení osy y mezi 100 a 300, nebo můžete také nastavit atribut max či min pro yAxis

série představuje kolekci všech křivek zobrazených v kontejneru, zde ukazuji pouze jednu křivku, název představuje název křivky, data představují kolekci řady souřadnicových bodů křivky, x je před nimi, y je za ní, je to js pole, v tomto případě protože osa x ukazuje čas, takže vlastnost x objektu pole musí být nastavena na čas, ale ve Highcharts není čas přímo přiřazen ose x, Místo toho je počet milisekund mezi 1970-1-1 a určitým časem přiřazen ose x, aby tento čas reprezentoval, takže je třeba použít metodu getTime(), tvar souřadnicového bodu na ose y musí být y = malé číslo * celočíselná forma, a nechápal jsem, proč to Highcharts musel dělat, protože cenová data varianty v tomto příkladu jsou obecně podobná, takže jsem musel při získávání dat dělit 200 a při přiřazování hodnoty ose y násobit 200.


<%= jsonstr %> v kódu stránky jsou počáteční data, která potřebuji získat ze serveru k inicializaci grafu, tedy generování 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írovat kód

Mezi nimi je tabulka TabMerPrice tabulka s informacemi o různých cenách, TMPTime čas, TMPPrice cena, TMPTime časový interval je deset sekund, používám databázovou úlohu k vytvoření záznamu tabulky, což se děje jednou za deset sekund

AddHours(-8) slouží k převodu času na pekingský čas a generovaný datový formát je json formát

Kód dataupdate.ashx vypadá 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írovat kód

Jedná se o hrubou implementaci agregace kroků, která umožňuje zobrazit data na serveru v reálném čase pomocí grafu podobného formátu stock


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


Partitura

Počet účastníků1MB+1 přispět+1 Zhroucení důvod
Mužský bože, gratuluji + 1 + 1 Může mi pronajímatel dát kontaktní údaje? Hodně by to pomohlo?

Zobrazit všechna hodnocení





Předchozí:Jak se dostat do vývojářského režimu pro Android 4.4.x
Další:Na základě Sina@ funkce jednoduchý příklad

Související příspěvky
Zveřejněno 28.06.2015 10:34:21 |
Tento příspěvek byl naposledy upraven microxdd dne 28. 6. 2015 v 10:35

Šití provázků je nejplýtvavější výkonem a lze ho použít se StringBuilderem. Doporučuje se však používat serializaci JSON, která dokáže přímo převádět objekty na řetězce JSON. Může být také deserializován
Doporučuji Baidu ikonovou knihovnu http://echarts.baidu.com/doc/example.html
 Pronajímatel| Zveřejněno 28.06.2015 10:54:45 |
microxdd zveřejněno 28. 6. 2015 10:34
Šití provázků je nejplýtvavější výkonem a lze ho použít se StringBuilderem. Doporučuje se však používat JSON serializaci, která dokáže přímo převádět objekty do ...

Výhodou jsonu je, že je to božský kůň? O tomhle jsem slyšel jen
Zveřejněno 28.06.2015 16:02:07 |
Publikováno 28. 6. 2015 v 10:54
Výhodou jsonu je, že je to božský kůň? O tomhle jsem slyšel jen

JSON je datový formát, který je jazykově nezávislý
Zveřejněno 28.06.2015 16:03:36 |
Delver_Si Zveřejněno 28. 6. 2015 16:02
JSON je datový formát, který je jazykově nezávislý

Přímo přenášet data potřebná pro JS z pozadí ve formátu JSON, jak s JS jednat
 Pronajímatel| Zveřejněno 28.06.2015 17:33:24 |
Delver_Si Zveřejněno 28. 6. 2015 16:03
Přímo přenášet data potřebná pro JS z pozadí ve formátu JSON, jak s JS jednat

Učení
Zveřejněno 29.06.2015 18:56:59 |
Xiao Zhazha Zveřejněno 28. 6. 2015 17:33
Učení

Zřeknutí se:
Veškerý software, programovací materiály nebo články publikované organizací Code Farmer Network slouží pouze k učení a výzkumu; Výše uvedený obsah nesmí být používán pro komerční ani nelegální účely, jinak nesou všechny důsledky uživatelé. Informace na tomto webu pocházejí z internetu a spory o autorská práva s tímto webem nesouvisí. Musíte výše uvedený obsah ze svého počítače zcela smazat do 24 hodin od stažení. Pokud se vám program líbí, podporujte prosím originální software, kupte si registraci a získejte lepší skutečné služby. Pokud dojde k jakémukoli porušení, kontaktujte nás prosím e-mailem.
Mail To:help@itsvse.com