[ASP.NET] Highcharts združuje Asp.net za uresničitev dinamičnih podatkovnih prikazov grafov delnic

Specifična uporaba trga za ta primer je, da moram redno brati ceno surovine iz baze podatkov in jo nato prikazati na spletni strani kot graf, podobno kot graf trendov cen pri trgovanju z instrumenti v delnicah.

Uporabljam asp.net, v kombinaciji z implementacijo vtičnika Highcharts v jQueryju, vtičnik podpira veliko vrst grafike, vendar so statični, in primere, ki jih podate, je treba preoblikovati, zainteresirani prijatelji lahko obiščejo uradno spletno stran Highcharts (http://www.highcharts.com/), ki ponuja veliko demonstracij, iskreno, da bi razumel svoje potrebe, bi moral uporabiti Highstock, Vendar pa po ogledu primera dinamične posodobitve Highcharts ugotavljam, da je moj vmesnik za zahteve bolj jedrnat, zato ta članek uporablja model dinamične posodobitve v Highcharts, grafični tip pa je spline. Končni zemljevid učinkov je naslednji (cena Pinqijina se posodablja vsakih 10 sekund, vsakih 10 sekund pa se doda točka na graf):

Napredujte po korakih:

Ustvarite novo spletno stran z VS in ustvarite asp.net stran DynamicUpdate.aspx, koda strani je naslednja:

Lastnost Highcharts renderTo označuje prikazne kontejnerje,

dogodki predstavljajo dogodek, ki ga mora kontejner registrirati, kjer nalaganje pomeni, da se nalaganje zgodi po zaključku nalaganja, tukaj je v nalaganju nastavljen js časovnik, ki se zgodi vsakih 10 sekund, koda v njem pa zahteva najnovejši GOLD iz datoteke dataupdate.ashx mape ajaxhandler v isti korenski mapi kot DynamicUpdate.aspx stran preko ajax v jQuery Podatki o cenah te vrste, tukaj je razlog, zakaj dodam randomCode + "=" + oldrandomCode v ajax URL, ker dodajanje naključne številke prepreči predpomnjenje, flag=1 pa zato, ker moja dataupdate.ashx datoteka želi sprejeti več zahtevkov iz različnih ajax, zato uporabljam flag za razlikovanje

xAxis predstavlja zbirko atributov, definiranih za x-os vsebnika, type predstavlja prikazani tip besedila, opcijsko, tukaj vnesem tip časa, tukaj upoštevajte, da je privzeta vrednost primera GMT čas, lahko uporabite tudi UTC čas, vendar običajno uporabljamo pekinški čas (GMT ali UTC) + 8 ur = pekinški čas, zato ko uporabimo ajax, da določimo, da je čas pekinški čas, moramo od ure odšteti 8 ur (tukaj želim deliti tudi izkušnjo, Kako pretvoriti strežniški čas v js čas, ki ga lahko uporabi metoda .getTime(), torej odšteti strežniški čas od 1970-1-1, pretvori preostale dni v milisekunde in nato dodeli vrednost novo inicializiranemu času z metodo setTime v js. Ugotovil sem, da rezultat, pridobljen z getTime(), ni pravilen za inicializacijo js časa neposredno v js v js v obliki novega datuma (leto, mesec, dan, ura, minuta, sekunda, milisekunda) z getTime(), Kar zadeva razlog, zakaj se 1970-1-1 odšteje, je to zato, ker je definicija metode getTime(), da se število milisekund pridobi od trenutnega časa iz 1970-1-1). Ko x-os ni prikazana kot čas ali jo morate sami definirati, jo je mogoče definirati tudi z atributom kategorij, tickPixelInterval predstavlja gostoto x-osi, oznake pa se uporabljajo za oblikovanje prikaznega formata x-osi

yAxis predstavlja zbirko atributov, definiranih za y-os vsebnika, ki je približno enaka atributom x-osi, vendar v Highcharts ni mogoče določiti fiksne vrednosti y-osi preko kategorij; y-os Highcharts se samodejno generira na podlagi podatkov o koordinatnih točkah, ki so odvisni od podatkovnega podatributa atributa serije, na primer, ko podatke dodelite vrednost, je največja vrednost 300, najmanjša pa 100. Nato bo prikaz y-osi med 100 in 300, ali pa lahko nastavite tudi atribut max ali min za yAxis

serija predstavlja zbirko vseh krivulj, prikazanih v vsebniku, tukaj prikazujem samo eno krivuljo, ime predstavlja ime krivulje, podatki predstavljajo zbirko niza koordinatnih točk krivulje, x je spredaj, y je zadaj, to je js matrika, v tem primeru ker x-os prikazuje čas, zato mora biti x-lastnost objekta polja nastavljena na čas, vendar v Highcharts ni neposredno dodeljen čas x-osi, Namesto tega je število milisekund med 1970-1-1 in določenim časom dodeljeno x-osi, da predstavlja ta čas, zato je treba uporabiti metodo getTime(), oblika y-osi koordinatne točke mora biti y = majhno število * cela številska oblika, in nisem razumel, zakaj mora Highcharts to početi, saj so podatki o cenah v tem primeru večinoma enaki, zato sem moral pri pridobivanju podatkov deliti z 200, nato pa pomnožiti z 200, ko sem y-osi dodelil vrednost.

<%= jsonstr %> v kodi strani so začetni podatki, ki jih moram pridobiti od strežnika za inicializacijo grafa, to je generiranje strani CS

Med njimi je tabela TabMerPrice tabela o različnih cenah, TMPTime čas, TMPPrice cena, TMPTime časovni interval je deset sekund, uporabljam podatkovno nalogo za generiranje zapisa tabele, kar se zgodi vsakih deset sekund

AddHours(-8) je namenjen pretvorbi časa v pekinški čas, generirani podatkovni format pa je json format

Koda dataupdate.ashx izgleda takole:

To je groba izvedba agregacije korakov, ki omogoča prikaz podatkov na strežniški strani v realnem času z grafom, podobnim formatu delnic

HighCharts演示.zip (48.69 KB, Število prenosov: 1)