Dit artikel is een spiegelartikel van machinevertaling, klik hier om naar het oorspronkelijke artikel te gaan.

Architect_Programmer_Code Landbouwnetwerk»Architect › Programmeren › .Net/C # › Highcharts combineert Asp.net om dynamische data-standaard grafische weergavevoorbeelden te realiseren ...
Bekijken: 23205|Antwoord: 6

[ASP.NET] Highcharts combineert Asp.net om dynamische voorbeelden van het weergeven van data-aandelengrafieken te realiseren

[Link kopiëren]
Geplaatst op 28-06-2015 00:06:24 | | | |

De specifieke toepassingsmarkt voor dit voorbeeld is dat ik regelmatig de prijs van een grondstof uit de database moet lezen en deze vervolgens op de webpagina als een grafiek moet weergeven, vergelijkbaar met de prijstrendgrafiek van handelsinstrumenten in aandelen.

Ik gebruik asp.net, gecombineerd met de Highcharts-plugin-implementatie in jQuery, de plugin kan veel soorten graphics ondersteunen, maar die zijn statisch, en de gegeven voorbeelden moeten worden getransformeerd; geïnteresseerde vrienden kunnen naar de officiële Highcharts-website gaan om (http://www.highcharts.com/) te bekijken, die veel demo's biedt; eerlijk gezegd, om mijn behoeften te realiseren, zou ik Highstock moeten gebruiken. Na het bekijken van het dynamische updatevoorbeeld van Highcharts realiseer ik me echter ook dat mijn requirements-interface beknopter is, dus dit artikel gebruikt het dynamische-updatemodel in Highcharts, en het grafische type is spline. De uiteindelijke effectkaart is als volgt (de prijs van Pinqijin wordt elke 10 seconden bijgewerkt, en er wordt elke 10 seconden een punt aan de lijngrafiek toegevoegd):

Stap verzamelen:

Maak een nieuwe website aan met VS en maak een asp.net pagina DynamicUpdate.aspx, de paginacode is als volgt:


  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>
Code kopiëren

Highcharts-eigenschap renderTo duidt displaycontainers aan,

events vertegenwoordigt het event dat de container moet registreren, waarbij load betekent dat het plaatsvindt nadat het laden is voltooid, hier wordt een js-timer ingesteld in de load, die eens per 10 seconden plaatsvindt, en de code daarin is om de nieuwste GOLD op te vragen uit het dataupdate.ashx-bestand van de ajaxhandler-map in dezelfde hoofdmap als de DynamicUpdate.aspx pagina door ajax in jQuery De prijsgegevens van de variëteit, hier is waarom ik randomCode + "=" + oldrandomCode toevoeg aan de ajax-URL, omdat het toevoegen van een willekeurig nummer caching kan voorkomen, en flag=1 is omdat mijn dataupdate.ashx-bestand meerdere verzoeken van verschillende ajax wil accepteren, dus gebruik vlag om het te onderscheiden

xAxis vertegenwoordigt de verzameling attributen die gedefinieerd zijn voor de x-as van de container, type vertegenwoordigt het weergegeven teksttype, optioneel, hier vul ik het tijdtype in, hier merk op dat de standaard voor de instantie GMT-tijd is, je kunt ook UTC-tijd gebruiken, maar we gebruiken meestal Beijing-tijd (GMT of UTC) + 8 uur = Beijing-tijd, dus wanneer we ajax gebruiken om te bepalen dat de tijd Beijing-tijd is, moeten we 8 uur van het uur aftrekken (hier wil ik ook een ervaring delen, Hoe je servertijd omzet naar js-tijd die gebruikt kan worden door de .getTime()-methode, dat wil zeggen, de servertijd van 1970-1-1 aftrekt, de resterende dagen omzet in milliseconden, en vervolgens een waarde toekent aan de nieuw geïnitialiseerde tijd via de setTime-methode in js, ik ontdekte dat het resultaat dat getTime() krijgt onjuist is om een js-tijd direct in js te initialiseren in de vorm van nieuwe Datum (jaar, maand, dag, uur, minuut, seconde, milliseconde) met getTime(), Waarom 1970-1-1 wordt afgetrokken, komt dat doordat de definitie van de getTime()-methode is om het aantal milliseconden van de huidige tijd van 1970-1-1 te krijgen; wanneer de x-as niet als tijd wordt weergegeven of je deze zelf moet definiëren, kan deze ook worden gedefinieerd door het categorieën-attribuut, tickPixelInterval geeft de dichtheid van de x-as weer en wordt labels gebruikt om het weergaveformaat van de x-as te formatteren

yAxis vertegenwoordigt een verzameling attributen die gedefinieerd zijn voor de y-as van de container, wat ongeveer gelijk is aan de attributen van de x-as, maar in Highcharts is het niet mogelijk om de vaste waarde van de y-as via categorieën te definiëren; de y-as van Highcharts wordt automatisch gegenereerd op basis van de gegeven coördinatenpuntgegevens, die afhangen van de datasub-attribuut van het serie-attribuut, bijvoorbeeld wanneer je een waarde aan data toekent. De maximale waarde is 300 en de minimale waarde is 100. Dan zal de weergave van de y-as tussen 100 en 300 liggen, of je kunt ook het max- of minimumattribuut van yAxis instellen

reeks vertegenwoordigt de verzameling van alle krommen die in de container worden weergegeven, hier toon ik slechts één kromme, naam staat voor de naam van de kromme, data vertegenwoordigt de verzameling van een reeks coördinatenpunten van de kromme, x staat vooraan, y erachter, het is een js-array, in dit geval omdat de x-as tijd aangeeft, dus de x-eigenschap van het arrayobject moet op tijd worden gezet, maar in Highcharts wordt de tijd niet direct toegewezen aan de x-as, In plaats daarvan wordt het aantal milliseconden tussen 1970-1-1 en een bepaalde tijd toegekend aan de x-as om deze tijd weer te geven, dus de getTime()-methode moet worden gebruikt, de vorm van het y-as coördinaatpunt moet y = klein getal * geheel getal zijn, en ik begreep niet waarom Highcharts dit moest doen, want de prijsgegevens van de variëteit in dit voorbeeld zijn over het algemeen ongeveer hetzelfde, dus moest ik delen door 200 bij het verkrijgen van de gegevens, en vervolgens vermenigvuldigen met 200 bij het toekennen van een waarde aan de y-as.


<%= jsonstr %> in de paginacode staat de initiële data die ik van de server moet halen om de grafiek te initialiseren, de CS-generatie van de 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.         }
Code kopiëren

Daaronder is de tabel van TabMerPrice de tabel met de variatieprijsinformatie, TMPTime-tijd, TMPPrice-prijs, TMPTime-tijdsinterval is tien seconden, ik gebruik een databasetaak om het record van de tabel te genereren, wat elke tien seconden gebeurt

AddHours(-8) is bedoeld om de tijd om te zetten naar Beijing-tijd, en het gegenereerde dataformaat is json-formaat

De dataupdate.ashx-code ziet er zo uit:


  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.         }
Code kopiëren

Dit is de ruwe implementatie van stapaggregatie, waarmee de realtime weergave van server-side data mogelijk is met een grafiek vergelijkbaar met het standaardformaat


HighCharts演示.zip (48.69 KB, Aantal downloads: 1)


Partituur

Aantal deelnemers1MB+1 bijdragen+1 Instorting reden
Mannelijke god, gefeliciteerd + 1 + 1 Kan de verhuurder me een contactgegevens geven? Dat helpt enorm

Bekijk alle beoordelingen





Vorig:Hoe kom je in ontwikkelaarsmodus voor Android 4.4.x
Volgend:Gebaseerd op Sina@ eenvoudige functie voorbeeld

Gerelateerde berichten
Geplaatst op 28-06-2015 10:34:21 |
Dit bericht is voor het laatst bewerkt door microxdd op 28-6-2015 10:35

Het naaien van snaren is de meest verspilling van prestaties en kan worden gebruikt met StringBuilder. Het wordt echter aanbevolen om JSON-serialisatie te gebruiken, die objecten direct kan omzetten in JSON-strings. Het kan ook worden gedeserialiseerd
Aanbevolen Baidu icoonbibliotheek http://echarts.baidu.com/doc/example.html
 Huisbaas| Geplaatst op 28-06-2015 10:54:45 |
microxdd geplaatst op 28-6-2015 10:34
Het naaien van snaren is de meest verspilling van prestaties en kan worden gebruikt met StringBuilder. Het wordt echter aanbevolen om JSON-serialisatie te gebruiken, die objecten direct kan omzetten in ...

Het voordeel van JSON is dat het een goddelijk paard is? Ik heb alleen van dit ding gehoord
Geplaatst op 28-06-2015 16:02:07 |
Gepubliceerd op 28-6-2015 10:54
Het voordeel van JSON is dat het een goddelijk paard is? Ik heb alleen van dit ding gehoord

JSON is een dataformaat dat taalonafhankelijk is
Geplaatst op 28-06-2015 16:03:36 |
Delver_Si Geplaatst op 28-6-2015 16:02
JSON is een dataformaat dat taalonafhankelijk is

Rechtstreeks de gegevens die JS nodig heeft vanuit de achtergrond in JSON-formaat overbrengen, hoe je met JS omgaat
 Huisbaas| Geplaatst op 28-06-2015 17:33:24 |
Delver_Si Geplaatst op 28-6-2015 16:03
Rechtstreeks de gegevens die JS nodig heeft vanuit de achtergrond in JSON-formaat overbrengen, hoe je met JS omgaat

Leren
Geplaatst op 29-06-2015 18:56:59 |
Xiao Zhazha Geplaatst op 28-6-2015 17:33
Leren

Disclaimer:
Alle software, programmeermaterialen of artikelen die door Code Farmer Network worden gepubliceerd, zijn uitsluitend bedoeld voor leer- en onderzoeksdoeleinden; De bovenstaande inhoud mag niet worden gebruikt voor commerciële of illegale doeleinden, anders dragen gebruikers alle gevolgen. De informatie op deze site komt van het internet, en auteursrechtconflicten hebben niets met deze site te maken. Je moet bovenstaande inhoud volledig van je computer verwijderen binnen 24 uur na het downloaden. Als je het programma leuk vindt, steun dan de echte software, koop registratie en krijg betere echte diensten. Als er sprake is van een inbreuk, neem dan contact met ons op via e-mail.
Mail To:help@itsvse.com