See artikkel on masintõlke peegelartikkel, palun klõpsake siia, et hüpata algse artikli juurde.

Architect_Programmer_Code Põllumajandusvõrgustik»Arhitekt › Programmeerimine › .Net/C # › Highcharts ühendab Asp.net dünaamiliste andmete realiseerimiseks, aktsia graafiliste kuvamisnäidete loomiseks ...
Vaade: 23205|Vastuse: 6

[ASP.NET] Highcharts ühendab Asp.net, et realiseerida dünaamilisi andmeid, aktsiagraafiku näiteid

[Kopeeri link]
Postitatud 28.06.2015 00:06:24 | | | |

Selle näite konkreetne rakendusturg on see, et pean regulaarselt lugema kauba hinda andmebaasist ja seejärel kuvama seda veebilehel graafikuna, sarnaselt aktsiatega kauplemisinstrumentide hinnatrendide graafikule.

Kasutan asp.net koos Highchartsi plugina rakendusega jQuery's, plugin toetab mitut tüüpi graafikat, kuid need on staatilised ja näited vajavad muutmist, huvitatud sõbrad saavad minna Highchartsi ametlikule veebilehele (http://www.highcharts.com/), mis pakub palju demosid, ausalt öeldes, et oma vajadusi realiseerida, peaksin kasutama Highstocki, Kuid pärast Highchartsi dünaamilise uuenduse näite vaatamist saan aru, et minu nõuete liides on täpsem, seega kasutab see artikkel Highchartsi dünaamilise uuenduse mudelit ja graafikatüüp on spline. Lõplik efektikaart on järgmine (Pinqijini hind uuendatakse iga 10 sekundi järel ja iga 10 sekundi järel lisatakse punkt joongraafikule):

Saavuta sammude kogumine:

Loo uus veebileht VS-iga ja loo asp.net leht DynamicUpdate.aspx, lehe kood on järgmine:


  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>
Kopeeri kood

Highcharts omadus renderTo näitab kuvakonteinereid,

sündmused tähistavad sündmust, mida konteiner peab registreerima, kus koormus tähendab, et see toimub pärast laadimise lõpetamist, siin on laadimisse seatud js-taimer, mis toimub iga 10 sekundi järel, ning selle kood on taotleda uusimat GOLD-faili dataupdate.ashx failist ajaxhandler kaustas samas juurkataloogis kui DynamicUpdate.aspx leht ajax-i kaudu jQuery's Hinnaandmed, miks lisan ajaxi URL-i randomCode + "=" + oldrandomCode, sest juhusliku arvu lisamine aitab vältida vahemällu salvestamist, ja flag=1 on see, et minu dataupdate.ashx fail tahab vastu võtta mitut päringut erinevatelt ajax-idelt, seega kasuta lipp selle eristamiseks

xAxis esindab konteineri x-telje jaoks defineeritud atribuutide kogumit, tüüp tähistab kuvatavat tekstitüüpi, valikuline, siin täidan ajatüübi, siin märgi, et vaikimisi on eksemplari aeg GMT aeg, võid kasutada ka UTC aega, aga üldiselt kasutame Pekingi aega (GMT või UTC) + 8 tundi = Pekingi aeg, nii et kui kasutame ajax-i, et saada aeg on Pekingi aeg, lahutame sellest 8 tundi (siin tahan jagada ka kogemust, Kuidas konverteerida serveri aeg js ajaks, mida saab kasutada .getTime() meetodiga, st lahutada serveri aeg vahemikus 1970-1-1, teisendada ülejäänud päevad millisekunditeks ja seejärel määrata väärtus äsja initsialiseeritud ajale setTime meetodi abil js-is, leidsin, et getTime() poolt saadud tulemus on vale, et initsialiseerida js aeg otse js-is uue kuupäeva (aasta, kuu, päev, tund, minut, sekund, millisekund) kujul getTime(), Miks 1970-1-1 lahutatakse, siis sellepärast, et getTime() meetodi definitsioon on saada millisekundite arv praegusest ajast 1970-1-1), kui x-telge ei kuvata ajana või pead selle ise defineerima, saab seda määratleda ka kategooriate atribuudi järgi, tickPixelInterval tähistab x-telje tihedust ja sildid kasutatakse x-telje kuvavormingu vormindamiseks

yAxis esindab atribuutide kogumit, mis on defineeritud konteineri y-telje jaoks, mis on ligikaudu sama mis x-telje atribuudid, kuid Highchartsis ei ole võimalik määratleda y-telje fikseeritud väärtust kategooriate kaudu; Highchartsi y-telg genereeritakse automaatselt antud koordinaatpunkti andmete põhjal, mis sõltub jada atribuudi andme-alamatribuudist, näiteks kui määrata andmetele väärtus, siis maksimaalne väärtus on 300 ja minimaalne väärtus 100. Siis kuvatakse y-telje vahemikus 100 kuni 300, või saad määrata ka y-telje maksimaalse või minimaalse atribuudi

seeria tähistab kõigi konteinerisse kuvatud kõverate kogumit, siin näitan ainult ühte kõverat, nimi tähistab kõvera nime, andmed tähistavad kõvera koordinaatpunktide kogumist, x on ees, y on taga, see on js-massiivi, antud juhul kuna x-telg näitab aega, peab massiiviobjekti x-omadus olema seatud ajaks, kuid Highchartsis ei määrata sellele otseselt aega x-teljele, Selle asemel määratakse x-teljele millisekundite arv vahemikus 1970-1-1 ja teatud aja, et seda aega esindada, seega tuleb kasutada getTime() meetodit, y-telje koordinaatpunkti kuju peab olema y = väike arv * täisarvuline vorm, ja ma ei saanud aru, miks Highcharts pidi seda tegema, sest selle näite hinnaandmed on üldiselt umbes samad, nii et pidin andmete saamisel jagama 200-ga ja siis 200-ga väärtuse määramisel y-teljele.


<%= jsonstr %> lehekoodis on algne andmestik, mida pean serverist saama graafiku initsialiseerimiseks, lehe cs genereerimiseks


  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.         }
Kopeeri kood

Nende hulgas on TabMerPrice tabel mitmekesisuse hinnainfo tabel, TMPTime aeg, TMPPrice hind, TMPTime ajavahemik on kümme sekundit, kasutan andmebaasi tööd tabeli kirje genereerimiseks, mis toimub iga kümne sekundi järel

AddHours(-8) teisendab aja Pekingi ajaks ning genereeritud andmeformaat on json-formaat

dataupdate.ashx kood näeb välja selline:


  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.         }
Kopeeri kood

See on samm-agregatsiooni umbkaudne rakendus, mis võimaldab serveripoolsete andmete reaalajas kuvamist graafikuga, mis sarnaneb tavapärasele formaadile


HighCharts演示.zip (48.69 KB, Allalaadimiste arv: 1)


Skoor

Osalejate arv1MB+1 Aitavad kaasa+1 Ahenda põhjus
Mees jumal, õnnitlused + 1 + 1 Kas üürileandja saaks mulle kontaktandmed anda, see aitab väga palju

Vaata kõiki hinnanguid





Eelmine:Kuidas saada arendajarežiimi Android 4.4.x jaoks
Järgmine:Põhineb Sina@ funktsiooni lihtsal näitel

Seotud postitused
Postitatud 28.06.2015 10:34:21 |
Seda postitust toimetas viimati microxdd 2015-6-28 kell 10:35

Keelte õmblemine on kõige raiskavam jõudlus ja seda saab kasutada StringBuilderiga. Siiski soovitatakse kasutada JSON-serialiseerimist, mis suudab objekte otse JSON-stringideks teisendada. Seda saab ka deserialiseerida
Soovitan Baidu ikooniraamatukogu http://echarts.baidu.com/doc/example.html
 Üürileandja| Postitatud 28.06.2015 10:54:45 |
microxdd postitatud 2015-6-28 10:34
Keelte õmblemine on kõige raiskavam jõudlus ja seda saab kasutada StringBuilderiga. Siiski soovitatakse kasutada JSON-serialiseerimist, mis suudab objekte otse teisendada ...

JSON-i eelis on see, et see on jumalik hobune? Olen sellest asjast ainult kuulnud
Postitatud 28.06.2015 16:02:07 |
Avaldatud 2015-6-28 10:54
JSON-i eelis on see, et see on jumalik hobune? Olen sellest asjast ainult kuulnud

JSON on andmeformaat, mis on keelest sõltumatu
Postitatud 28.06.2015 16:03:36 |
Delver_Si Postitatud 2015-06-28 16:02
JSON on andmeformaat, mis on keelest sõltumatu

Otse JS-i poolt nõutavate andmete edastamine taustast JSON-formaadis, kuidas JS-iga toime tulla
 Üürileandja| Postitatud 28.06.2015 17:33:24 |
Delver_Si Postitatud 2015-6-28 16:03
Otse JS-i poolt nõutavate andmete edastamine taustast JSON-formaadis, kuidas JS-iga toime tulla

Õppimine
Postitatud 29.06.2015 18:56:59 |
Xiao Zhazha Postitatud 2015-6-28 17:33
Õppimine

Disclaimer:
Kõik Code Farmer Networki poolt avaldatud tarkvara, programmeerimismaterjalid või artiklid on mõeldud ainult õppimiseks ja uurimistööks; Ülaltoodud sisu ei tohi kasutada ärilistel ega ebaseaduslikel eesmärkidel, vastasel juhul kannavad kasutajad kõik tagajärjed. Selle saidi info pärineb internetist ning autoriõiguste vaidlused ei ole selle saidiga seotud. Ülaltoodud sisu tuleb oma arvutist täielikult kustutada 24 tunni jooksul pärast allalaadimist. Kui sulle programm meeldib, palun toeta originaaltarkvara, osta registreerimist ja saa paremaid ehtsaid teenuseid. Kui esineb rikkumist, palun võtke meiega ühendust e-posti teel.
Mail To:help@itsvse.com