Denne artikkelen er en speilartikkel om maskinoversettelse, vennligst klikk her for å hoppe til originalartikkelen.

Architect_Programmer_Code Landbruksnettverket»Arkitekt › Programmering › .Net/C # › Highcharts kombinerer Asp.net for å realisere dynamiske eksempler på grafisk visning av data ...
Utsikt: 23205|Svare: 6

[ASP.NET] Highcharts kombinerer Asp.net for å realisere dynamiske eksempler på visning av dataaksjegrafer

[Kopier lenke]
Publisert på 28.06.2015 00:06:24 | | | |

Det spesifikke bruksmarkedet for dette eksempelet er at jeg må lese prisen på en råvare fra databasen regelmessig, og deretter vise det på nettsiden som en graf, likt pristrenddiagrammet for handelsinstrumenter i aksjer.

Jeg bruker asp.net, kombinert med Highcharts-plugin-implementeringen i jQuery, pluginen kan støtte mange typer grafikk, men de er statiske, og eksemplene som gis må transformeres, interesserte venner kan gå til Highcharts' offisielle nettside for å se (http://www.highcharts.com/), som tilbyr mange demoer, for å være ærlig, for å realisere mine behov bør jeg bruke Highstock, Men etter å ha sett på eksempelet med dynamisk oppdatering av Highcharts, kan jeg også innse at kravgrensesnittet mitt er mer konsist, så denne artikkelen bruker den dynamiske oppdateringsmodellen i Highcharts, og grafikktypen er spline. Det endelige effektkartet er som følger (prisen på Pinqijin oppdateres hvert 10. sekund, og et punkt legges til linjegrafen hvert 10. sekund):

Oppnå trinnsamling:

Opprett et nytt nettsted med VS og lag en asp.net side DynamicUpdate.aspx, sidekoden er som følger:


  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>
Kopier koden

Highcharts-egenskapen renderTo indikerer visningscontainere,

hendelser representerer hendelsen containeren må registrere, der last betyr at den skjer etter at lastingen er fullført, her settes en js-timer i lasten, som skjer hvert 10. sekund, og koden i den er å be om siste GOLD fra dataupdate.ashx-filen i ajaxhandler-mappen i samme rotmappe som DynamicUpdate.aspx-siden gjennom ajax i jQuery Prisdataene for varianten, her er grunnen til at jeg legger til randomCode + "=" + oldrandomCode i ajax-URL-en fordi å legge til et tilfeldig tall kan unngå caching, og flag=1 er fordi dataupdate.ashx-filen min vil akseptere flere forespørsler fra forskjellige ajax, så bruk flagg for å skille den

xAxis representerer samlingen av attributter definert for x-aksen til containeren, type representerer den viste teksttypen, valgfritt, her fyller jeg inn tidstypen, her merk at standarden for instansen er GMT-tid, du kan også bruke UTC-tid, men vi bruker vanligvis Beijing-tid, (GMT eller UTC) + 8 timer = Beijing-tid, så når vi bruker ajax for å få tiden er Beijing-tid, bør vi trekke 8 timer fra timen (her vil jeg også dele en erfaring, Hvordan konvertere servertid til js-tid som kan brukes med .getTime()-metoden, det vil si trekke servertiden fra 1970-1-1, konvertere de resterende dagene til millisekunder, og deretter tildele en verdi til den nylig initialiserte tiden via setTime-metoden i js, fant jeg at resultatet oppnådd av getTime() er feil for å initialisere en js-tid direkte i js i form av ny dato (år, måned, dag, time, minutt, sekund, millisekund) med getTime(), Når det gjelder hvorfor 1970-1-1 trekkes fra, er det fordi definisjonen av getTime()-metoden er å hente antall millisekunder fra nåværende tid fra 1970-1-1), når x-aksen ikke vises som en tid eller du må definere den selv, kan den også defineres av kategori-attributtet, tickPixelInterval representerer tettheten til x-aksen, og labels brukes for å formatere visningsformatet til x-aksen

yAxis representerer en samling attributter definert for y-aksen til containeren, som omtrent er den samme som attributtene til x-aksen, men i Highcharts er det ikke mulig å definere den faste verdien av y-aksen gjennom kategorier; y-aksen til Highcharts genereres automatisk basert på de gitte koordinatpunktdataene, som avhenger av dataunderattributten til serieattributtet, for eksempel når du tildeler en verdi til data. Maksimumsverdien er 300, og minimumsverdien er 100. Da vil visningen av y-aksen være mellom 100 og 300, eller du kan også sette maks- eller minimumsattributten til yAxis

serie representerer samlingen av alle kurver som vises i beholderen, her viser jeg bare én kurve, navnet representerer navnet på kurven, data representerer samlingen av en serie koordinatpunkter på kurven, x er foran, y er bak, det er et js-array, i dette tilfellet fordi x-aksen viser tid, så x-egenskapen til array-objektet må settes til tid, men i Highcharts er det ikke direkte tildelt tid til x-aksen, I stedet er antall millisekunder mellom 1970-1-1 og en viss tid tildelt x-aksen for å representere denne tiden, så getTime()-metoden må brukes, formen til y-aksens koordinatpunkt må være y = lite tall * heltallsform, og jeg forsto ikke hvorfor Highcharts måtte gjøre dette, fordi prisdataene for variasjonen i dette eksempelet generelt er omtrent de samme, så jeg måtte dele på 200 da jeg hentet dataene, og deretter multiplisere med 200 når jeg tilordnet en verdi til y-aksen.


<%= jsonstr %> i sidekoden er de opprinnelige dataene jeg trenger for å hente fra serveren for å initialisere grafen, altså datagenereringen av siden


  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.         }
Kopier koden

Blant dem er TabMerPrice-tabellen en variasjonsprisinformasjonstabell, TMPTime-tid, TMPPrice-pris, TMPTime-tidsintervallet er ti sekunder, jeg bruker en databasejobb for å generere tabellen som skjer hvert tiende sekund

AddHours(-8) er for å konvertere tiden til Beijing-tid, og det genererte dataformatet er json-format

Dataupdate.ashx-koden ser slik ut:


  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.         }
Kopier koden

Dette er den grove implementeringen av stegaggregering, som kan realisere sanntidsvisning av serverdata med en graf lik standardformatet


HighCharts演示.zip (48.69 KB, Antall nedlastinger: 1)


Score

Antall deltakere1MB+1 bidra+1 Sammenbrudd grunn
Mannlige gud, gratulerer + 1 + 1 Kan utleier gi meg kontaktinformasjon? Det hjelper mye

Se alle vurderinger





Foregående:Hvordan komme inn i utviklermodus for Android 4.4.x
Neste:Basert på Sina@ enkelt eksempel med funksjonen

Relaterte innlegg
Publisert på 28.06.2015 10:34:21 |
Dette innlegget ble sist redigert av microxdd 2015-6-28 kl. 10:35

Å sy strenger er den mest sløsende ytelsen og kan brukes med StringBuilder. Det anbefales imidlertid å bruke JSON-serialisering, som kan konvertere objekter direkte til JSON-strenger. Det kan også deserialiseres
Anbefaler Baidu ikonbibliotek http://echarts.baidu.com/doc/example.html
 Vert| Publisert på 28.06.2015 10:54:45 |
MicroXDD Postet 2015-06.28 kl. 10:34
Å sy strenger er den mest sløsende ytelsen og kan brukes med StringBuilder. Det anbefales imidlertid å bruke JSON-serialisering, som kan konvertere objekter direkte til ...

Fordelen med json er at det er en guddommelig hest? Jeg har bare hørt om denne tingen
Publisert på 28.06.2015 16:02:07 |
Publisert 28.06.2015 kl. 10:54
Fordelen med json er at det er en guddommelig hest? Jeg har bare hørt om denne tingen

JSON er et dataformat som er språkuavhengig
Publisert på 28.06.2015 16:03:36 |
Delver_Si Publisert 28.06.2015 kl. 16:02
JSON er et dataformat som er språkuavhengig

Overfør dataene som kreves av JS direkte fra bakgrunnen i JSON-format, hvordan man håndterer JS
 Vert| Publisert på 28.06.2015 17:33:24 |
Delver_Si Publisert 28.06.2015 kl. 16:03
Overfør dataene som kreves av JS direkte fra bakgrunnen i JSON-format, hvordan man håndterer JS

Læring
Publisert på 29.06.2015 18:56:59 |
Xiao Zhazha Publisert 28.06.2015 kl. 17:33
Læring

Ansvarsfraskrivelse:
All programvare, programmeringsmateriell eller artikler publisert av Code Farmer Network er kun for lærings- og forskningsformål; Innholdet ovenfor skal ikke brukes til kommersielle eller ulovlige formål, ellers skal brukerne bære alle konsekvenser. Informasjonen på dette nettstedet kommer fra Internett, og opphavsrettstvister har ingenting med dette nettstedet å gjøre. Du må fullstendig slette innholdet ovenfor fra datamaskinen din innen 24 timer etter nedlasting. Hvis du liker programmet, vennligst støtt ekte programvare, kjøp registrering, og få bedre ekte tjenester. Hvis det foreligger noen krenkelse, vennligst kontakt oss på e-post.
Mail To:help@itsvse.com