Ez a cikk egy tükör gépi fordítás, kérjük, kattintson ide, hogy ugorjon az eredeti cikkre.

Architect_Programmer_Code Mezőgazdasági Hálózat»Építész › Programozás › .Net/C # › A Highcharts Asp.net kombinálva dinamikus adat megvalósításához, stock grafikus megjelenítési példákhoz ...
Nézet: 23205|Válasz: 6

[ASP.NET] A Highcharts Asp.net kombinálva dinamikus adat megvalósításához tövsárgrafikon megjelenítési példák

[Linket másol]
Közzétéve 2015. 06. 28. 0:06:24 | | | |

A konkrét alkalmazási piac ebben a példában az, hogy rendszeresen el kell olvasnom egy árucikk árát az adatbázisból, majd grafikonként kell megjelenítenem a weboldalon, hasonlóan a részvénykereskedési eszközök ártrenddiagramjához.

Én asp.net-t használok, kombinálva a Highcharts bővítmény megvalósításával a jQuery-ben, a bővítmény sokféle grafikát támogat, de azok statikus módok, és a bemutatott példákat át kell alakítani, az érdeklődő barátok elmehetnek a Highcharts hivatalos weboldalára, hogy megnézzék (http://www.highcharts.com/), ahol sok demó található, őszintén szólva, hogy megértsem az igényeimet, érdemes a Highstockot használnom. Azonban a Highcharts dinamikus frissítési példájának megnézése után rájöttem, hogy a követelmény felületem rövidebb, ezért ez a cikk a Highcharts dinamikus-frissítési modelljét használja, a grafika típusa pedig spline. A végső hatástérkép a következő (a Pinqijin ára 10 másodpercenként frissül, és 10 másodpercenként egy pontot adnak hozzá a vonalgrafikonhoz):

Lépésgyűjtés elérése:

Hozzon létre egy új weboldalt VS-szel, és hozzon létre egy asp.net oldalt, DynamicUpdate.aspx, az oldalkód a következő:


  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>
Kód másolása

Highcharts property renderTo a megjelenítő konténereket jelzi,

az események azt az eseményt jelentik, amelyet a konténernek regisztrálnia kell, ahol a betöltés esetén történik, itt a betöltés után jön be egy js időzítő, ami 10 másodpercenként egyszer történik, és a benne lévő kód a legfrissebb GOLD-ot kéri az ajaxhandler mappának dataupdate.ashx fájljából ugyanabban a gyökérkönyvtárban, ahol az DynamicUpdate.aspx oldal a jQuery-ben az ajax-on keresztül keresztül A különböző áradatok: itt van a véletlen kód + "=" + oldrandomCode hozzáadása az ajax URL-hez, mert véletlenszám hozzáadása elkerülheti a gyorsítótárat, és a flag=1 azért, mert a dataupdate.ashx fájlom több kérést akar fogadni különböző ajax-tól, ezért használd a flag-et a megkülönböztetéshez

az xAxis a konténer x-tengelyéhez definiált attribútumok gyűjteményét jelenti, a type a megjelenített szövegtípust, opcionális, itt kitöltöm az idő típust, itt megjegyzem, hogy az instance alapértelmezett GMT idő, használhatsz UTC időt is, de általában Pekingi időt használunk, (GMT vagy UTC) + 8 óra = Pekingi idő, tehát amikor az ajax-ot használjuk a pekingi idő eléréséhez, 8 órát kell levonni az órából (itt szeretnék megosztani egy élményt is, Hogyan lehet a szerver idejét js időre konvertálni, amelyet a .getTime() módszerrel lehet használni, vagyis levonjuk a szerver idejét az 1970-1-1-ből, a fennmaradó napokat ezrévudmire, majd az újonnan inicializált időhöz a setTime módszerrel a js-ben, azt találtam, hogy a getTime() által kapott eredmény helytelen, hogy egy js időt közvetlenül js-ben inicializáljuk új Date (év, hónap, nap, óra, perc, másodperc, milliszekundum) formájában getTime() segítségével, Ami azt illeti, miért vonják le a 1970-1-1-et, az azért van, mert a getTime() módszer definíciója az, hogy megkapjuk a 1970-1-1 aktuális időből származó milliszekundumok számát), amikor az x-tengely nem időként jelenik meg, vagy magadnak kell definiálnod, akkor a categories attribútummal is meghatározható, a tickPixelInterval az x-tengely sűrűségét jelöli, és a címkék az x-tengely megjelenítési formátumának formázásához használják

A yAxis egy olyan attribútumgyűjteményt képvisel, amelyeket a konténer y-tengelyére definiálnak, ami nagyjából megegyezik az x-tengely attribútumaival, de a Highcharts-ban nem lehet az y tengely fix értékét kategóriákon keresztül meghatározni; a Highcharts y-tengelye automatikusan generálódik a megadott koordináta-pont adatok alapján, ami a sorozat attribútumjának adat-alattribútumjától függ, például amikor értéket rendelünk az adatokhoz, a maximális érték 300, a minimum érték 100. Ezután az y-tengely megjelenítése 100 és 300 között lesz, vagy beállíthatod a yAxis max vagy minimum attribútumát is

a sorozat az összes görbének gyűjteményét jelöli, amely a konténerben jelenik meg, itt csak egy görbét mutatok, a név a görbe nevét jelenti, data a görbe koordináta-pontok sorozatának összegyűjtését jelenti, x elöl, y mögött, ez egy js tömb, ebben az esetben azért, mert az x-tengely időt mutatja, így a tömbobjektum x tulajdonságát időre kell állítani, de a Highcharts-ban nem közvetlenül az idő az x-tengelyhez rendelve, Ehelyett az 1970-1-1 és egy adott idő közötti milliszekundumok száma az x-tengelyhez van rendelve, hogy ezt az időt képviselje, így a getTime() módszert kell használni, az y tengely koordináta-pontjának alakja y = kis szám * egész szám formában kell legyen, és nem értettem, miért kell ezt a Highcharts-nak megtennie, mert a változat áradatai általában nagyjából ugyanazok, ezért az adatok megszerzésekor 200-zal kellett osztanom őket, majd 200-zal szoroznom, amikor értéket rendeltem az y-tengelyhez.


<%= jsonstr %> az oldalkódban az az első adat, amire a szerverről szükségem van a grafikon inicializálásához, az oldal cs generálásához


  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.         }
Kód másolása

Ezek közül a TabMerPrice táblázat a változatos árinformációs táblázat, a TMPTime idő, TMPPrice ár, a TMPTime időintervallum tíz másodperc, egy adatbázis feladattal generálom a tábla rekordját, ami tíz másodpercenként történik

Az AddHours(-8) az idő pekingi időre történő átalakítására szolgál, és a generált adatformátum json formátum

A dataupdate.ashx kód így néz ki:


  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.         }
Kód másolása

Ez a lépésaggregáció durva megvalósítása, amely képes valós idejű megjelenítést valósítani a szerveroldali adatok megjelenítését egy grafikonnal, amely hasonló a gyári formátumhoz


HighCharts演示.zip (48.69 KB, Letöltések száma: 1)


Pontszám

A résztvevők száma1MB+1 hozzájárul+1 Összeomlás ok
Férfi isten, gratulálok + 1 + 1 Tudna a főbérlő megadni egy elérhetőséget, sokat segít

Minden értékelés megtekintése





Előző:Hogyan lépj fejlesztői módba Android 4.4.x-en
Következő:Sina@ egyszerű függvény alapján

Kapcsolódó bejegyzések
Közzétéve 2015. 06. 28. 10:34:21 |
Ezt a bejegyzést utoljára microxdd szerkesztette: 2015-06-28, 10:35

A húrok varrása a legpazarlóbb teljesítmény, és használható a StringBuilderrel. Ugyanakkor ajánlott a JSON serializáció használata, amely közvetlenül képes objektumokat JSON stringekké alakítani. Deserializálható is
Ajánlom a Baidu ikonkönyvtárat http://echarts.baidu.com/doc/example.html
 Háziúr| Közzétéve 2015. 06. 28. 10:54:45 |
microxdd közzétéve: 2015-06-28, 10:34
A húrok varrása a legpazarlóbb teljesítmény, és használható a StringBuilderrel. Ugyanakkor ajánlott a JSON serializáció használata, amely közvetlenül képes objektumokat ...

A JSON előnye, hogy isteni ló? Csak erről hallottam
Közzétéve 2015. 06. 28. 16:02:07 |
Megjelent: 2015-06-28, 10:54
A JSON előnye, hogy isteni ló? Csak erről hallottam

A JSON egy nyelvfüggetlen adatformátum
Közzétéve 2015. 06. 28. 16:03:36 |
Delver_Si Közzétéve: 2015-06-28, 16:02
A JSON egy nyelvfüggetlen adatformátum

Közvetlenül a JS által igényelt adatok átvitele háttérből JSON formátumban, hogyan kezeljük a JS-t
 Háziúr| Közzétéve 2015. 06. 28. 17:33:24 |
Delver_Si Közzétéve: 2015-06-28, 16:03
Közvetlenül a JS által igényelt adatok átvitele háttérből JSON formátumban, hogyan kezeljük a JS-t

Tanulás
Közzétéve 2015. 06. 29. 18:56:59 |
Xiao Zhazha Közzétéve: 2015-06-28, 17:33
Tanulás

Lemondás:
A Code Farmer Network által közzétett összes szoftver, programozási anyag vagy cikk kizárólag tanulási és kutatási célokra szolgál; A fenti tartalmat nem szabad kereskedelmi vagy illegális célokra használni, különben a felhasználók viselik az összes következményet. Az oldalon található információk az internetről származnak, és a szerzői jogi vitáknak semmi köze ehhez az oldalhoz. A fenti tartalmat a letöltés után 24 órán belül teljesen törölni kell a számítógépéről. Ha tetszik a program, kérjük, támogassa a valódi szoftvert, vásároljon regisztrációt, és szerezzen jobb hiteles szolgáltatásokat. Ha bármilyen jogsértés történik, kérjük, vegye fel velünk a kapcsolatot e-mailben.
Mail To:help@itsvse.com