Tämä artikkeli on konekäännöksen peiliartikkeli, klikkaa tästä siirtyäksesi alkuperäiseen artikkeliin.

Architect_Programmer_Code Maatalousverkosto»Arkkitehti › Ohjelmointi › .Net/C # › Highcharts yhdistää Asp.net toteuttaakseen dynaamisen datan varaston graafisia esimerkkejä ...
Näkymä: 23205|Vastaus: 6

[ASP.NET] Highcharts yhdistää Asp.net toteuttaakseen dynaamisen datan osakegraafien näyttöesimerkit

[Kopioi linkki]
Julkaistu 28.6.2015 0.06.24 | | | |

Tämän esimerkin erityinen sovellusmarkkina on, että minun täytyy lukea hyödykkeen hinta säännöllisesti tietokannasta ja näyttää se verkkosivulla graafina, samankaltaisesti kuin osakeinstrumenttien hintatrendikaavio.

Käytän asp.net, yhdistettynä Highcharts-lisäosan toteutukseen jQueryssä, plugin tukee monenlaisia grafiikkatyyppejä, mutta ne ovat staattisia, ja annetut esimerkit täytyy muokata, kiinnostuneet ystävät voivat mennä Highchartsin viralliselle sivustolle katsomaan (http://www.highcharts.com/), joka tarjoaa paljon demoja, rehellisesti sanottuna tarpeideni ymmärtämiseksi minun pitäisi käyttää Highstockia, Kuitenkin, kun katsoin Highchartsin dynaamisen päivityksen esimerkkiä, huomaan myös, että vaatimusrajapintani on tiiviimpi, joten tässä artikkelissa käytetään Highchartsin dynaamisen päivityksen mallia, ja grafiikkatyyppi on spline. Lopullinen efektikartta on seuraava (Pinqijinin hinta päivitetään 10 sekunnin välein, ja piste lisätään viivakaavioon joka 10 sekunti):

Saavuta askelten kerääminen:

Luo uusi verkkosivusto VS:llä ja luo asp.net sivu DynamicUpdate.aspx, sivun koodi on seuraava:


  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>
Kopioi koodi

Highcharts-ominaisuus renderTo tarkoittaa näyttökontteja,

events edustaa tapahtumaa, joka kontin täytyy rekisteröidä, missä load tarkoittaa, että se tapahtuu latauksen jälkeen. Tässä kuormaan asetetaan js-ajastin, joka tapahtuu kerran 10 sekunnissa, ja sen koodi pyytää uusinta GOLD-tiedostoa ajaxhandler-kansion dataupdate.ashx-tiedostosta samasta juurihakemistosta kuin DynamicUpdate.aspx-sivu ajaxin kautta jQueryssä Hintadatan perusteella lisään ajax-URL-osoitteeseen randomCode + "=" + oldrandomCode, koska satunnaisnumeron lisääminen voi välttää välimuistin, ja flag=1 johtuu siitä, että dataupdate.ashx-tiedostoni haluaa hyväksyä useita pyyntöjä eri ajax-tiedostoilta, joten käytä lippua erottaaksesi sen

xAxis edustaa säiliön x-akselille määriteltyjen attribuuttien kokoelmaa, type edustaa näytettyä tekstityyppiä, valinnainen, tässä täytän aikatyypin, tässä huomaa, että instanssin oletus on GMT-aika, voit myös käyttää UTC-aikaa, mutta yleensä käytämme Pekingin aikaa (GMT tai UTC) + 8 tuntia = Pekingin aikaa, joten kun käytämme ajax-aikaa saadaksemme ajan Pekingin aikaa, meidän tulisi vähentää 8 tuntia tunnista (tässä haluan myös jakaa kokemuksen, Kuinka muuntaa palvelinaika js-ajaksi, jota voi käyttää .getTime()-menetelmällä, eli vähentää palvelimen aika 1970-1-1, muuntaa jäljelle jääneet päivät millisekunneiksi ja sitten määrittää arvo uudelle alustetulle ajalle setTime-menetelmällä js:ssä. Huomasin, että getTime():n saama tulos on virheellinen, kun js-aika alistetaan suoraan js:ssä uuden päivämäärän muodossa (vuosi, kuukausi, päivä, tunti, minuutti, sekunti, millisekunti) ja getTime(), Miksi 1970-1-1 vähennetään, se johtuu siitä, että getTime()-menetelmän määritelmä on saada millisekuntien määrä nykyisestä ajasta 1970-1-1), kun x-akselia ei näytetä ajana tai sinun täytyy määritellä se itse, se voidaan määritellä myös kategoriattribuutilla, tickPixelInterval edustaa x-akselin tiheyttä ja tunnisteita käytetään x-akselin näyttömuodon muotoiluun

yAxis edustaa attribuuttien kokoelmaa, jotka on määritelty kontin y-akselille, mikä on suunnilleen sama kuin x-akselin attribuutit, mutta Highchartsissa y-akselin kiinteää arvoa ei voi määritellä kategorioiden avulla; Highchartsin y-akseli generoidaan automaattisesti annetun koordinaattipistedatan perusteella, mikä riippuu sarjaattribuutin data-aliattribuutista, esimerkiksi kun datalle annetaan arvo, maksimiarvo on 300 ja minimiarvo 100. Silloin y-akselin näyttö on välillä 100–300, tai voit myös asettaa yAxisin maksimi- tai minimiattribuutin

sarja edustaa kaikkien käyrien kokoelmaa, jotka näkyvät kontissa, tässä näytän vain yhden käyrän, nimi edustaa käyrän nimeä, data edustaa käyrän koordinaattipisteiden sarjaa, x on edessä, y on takana, se on js-taulukko, tässä tapauksessa, koska x-akseli näyttää ajan, joten taulukon objektin x-ominaisuus täytyy asettaa ajaksi, mutta Highchartsissa sitä ei suoraan osoiteta aikaa x-akselille, Sen sijaan millisekuntien määrä välillä 1970-1-1 ja tietty aika on määritetty x-akselille tämän ajan kuvaamiseksi, joten getTime()-menetelmää on käytettävä, y-akselin koordinaatispisteen muodon on oltava y = pieni luku * kokonaisluku, enkä ymmärtänyt, miksi Highchartsin piti tehdä näin, koska tämän esimerkin hintatiedot ovat yleensä suunnilleen samat, joten minun piti jakaa 200:lla dataa hakiessani ja kertoa 200:lla, kun annan arvon y-akselille.


<%= jsonstr %> sivukoodissa on alkuperäinen data, jonka minun täytyy saada palvelimelta graafin alustamiseen, eli sivun cs-generointi


  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.         }
Kopioi koodi

Näistä TabMerPrice-taulukko on lajitelmien hintatietotaulukko, TMPTime-aika, TMPPrice-hinta, TMPTime-aikaväli on kymmenen sekuntia, käytän tietokantatyötä taulukon tietueen luomiseen, joka tapahtuu kerran kymmenessä sekunnissa

AddHours(-8) muuntaa aika Pekingin aikaan, ja generoitu datamuoto on json-muoto

dataupdate.ashx-koodi näyttää tältä:


  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.         }
Kopioi koodi

Tämä on karkea vaihekokouksen toteutus, joka mahdollistaa palvelinpuolen datan reaaliaikaisen näyttämisen graafilla, joka muistuttaa vakiomuotoa


HighCharts演示.zip (48.69 KB, Latausten määrä: 1)


Pistetilanne

Osallistujien määrä1MB+1 myötävaikuttaa+1 Romahdus syy
Miesjumala, onnittelut + 1 + 1 Voisiko vuokranantaja antaa minulle yhteystiedot, siitä on paljon apua

Katso kaikki arviot





Edellinen:Kuinka päästä kehittäjämoodiin Android 4.4.x:lle
Seuraava:Perustuu Sina@ funktion yksinkertaiseen esimerkkiin

Aiheeseen liittyvät julkaisut
Julkaistu 28.6.2015 10.34.21 |
Tätä julkaisua on viimeksi muokattu microxdd:n toimesta 28.6.2015 klo 10:35

Kielten ompelu on hukalinta suorituskykyä ja sitä voi käyttää StringBuilderin kanssa. On kuitenkin suositeltavaa käyttää JSON-serialisointia, joka voi muuntaa objektit suoraan JSON-merkkijonoiksi. Se voidaan myös deserialisoida
Suosittelen Baidu-ikonikirjastoa http://echarts.baidu.com/doc/example.html
 Vuokraisäntä| Julkaistu 28.6.2015 10.54.45 |
microxdd julkaistu 28.6.2015 klo 10:34
Kielten ompelu on hukalinta suorituskykyä ja sitä voi käyttää StringBuilderin kanssa. On kuitenkin suositeltavaa käyttää JSON-serialisointia, joka voi muuntaa objektit suoraan ...

JSONin etu on, että se on jumalallinen hevonen? Olen kuullut tästä vain
Julkaistu 28.6.2015 16.02.07 |
Julkaistu 28.6.2015 klo 10:54
JSONin etu on, että se on jumalallinen hevonen? Olen kuullut tästä vain

JSON on kieliriippumaton tietoformaatti
Julkaistu 28.6.2015 16.03.36 |
Delver_Si Julkaistu 28.6.2015 klo 16:02
JSON on kieliriippumaton tietoformaatti

Siirrä suoraan JS:n vaatimat tiedot taustasta JSON-muodossa, miten käsitellä JS:ää
 Vuokraisäntä| Julkaistu 28.6.2015 17.33.24 |
Delver_Si Julkaistu 28.6.2015 klo 16:03
Siirrä suoraan JS:n vaatimat tiedot taustasta JSON-muodossa, miten käsitellä JS:ää

Oppiminen
Julkaistu 29.6.2015 18.56.59 |
Xiao Zhazha Julkaistu 28.6.2015 klo 17:33
Oppiminen

Vastuuvapauslauseke:
Kaikki Code Farmer Networkin julkaisemat ohjelmistot, ohjelmamateriaalit tai artikkelit ovat tarkoitettu vain oppimis- ja tutkimustarkoituksiin; Yllä mainittua sisältöä ei saa käyttää kaupallisiin tai laittomiin tarkoituksiin, muuten käyttäjät joutuvat kantamaan kaikki seuraukset. Tämän sivuston tiedot ovat peräisin internetistä, eikä tekijänoikeuskiistat liity tähän sivustoon. Sinun tulee poistaa yllä oleva sisältö kokonaan tietokoneeltasi 24 tunnin kuluessa lataamisesta. Jos pidät ohjelmasta, tue aitoa ohjelmistoa, osta rekisteröityminen ja hanki parempia aitoja palveluita. Jos rikkomuksia ilmenee, ota meihin yhteyttä sähköpostitse.
Mail To:help@itsvse.com