Šis straipsnis yra veidrodinis mašininio vertimo straipsnis, spauskite čia norėdami pereiti prie originalaus straipsnio.

Architect_Programmer_Code žemės ūkio tinklas»Architektas › Programavimo › .net/c # › Highcharts sujungia Asp.net realizuoti dinaminių duomenų atsargų grafinio rodymo pavyzdžiai ...
Rodinys: 23205|Atsakyti: 6

[ASP.NET] "Highcharts" sujungia Asp.net, kad būtų galima realizuoti dinaminių duomenų akcijų grafiko rodymo pavyzdžius

[Kopijuoti nuorodą]
Paskelbta 2015-06-28 00:06:24 | | | |

Specifinė šio pavyzdžio taikymo rinka yra ta, kad man reikia reguliariai skaityti prekės kainą iš duomenų bazės, o tada rodyti ją tinklalapyje kaip grafiką, panašų į prekybos akcijomis kainų tendencijų diagramą.

Aš naudoju asp.net, kartu su Highcharts įskiepiai įgyvendinimas jQuery, įskiepiai gali palaikyti daugelio tipų grafiką, tačiau jie yra statiški, ir pateikti pavyzdžiai turi būti transformuoti, suinteresuoti draugai gali eiti į Highcharts oficialią svetainę pamatyti (http://www.highcharts.com/), kuri suteikia daug demonstracinių versijų, tiesą sakant, realizuoti savo poreikius, aš turėčiau naudoti Highstock, Tačiau, pažvelgęs į dinaminio atnaujinimo pavyzdį Highcharts, aš taip pat galiu suprasti, kad mano reikalavimų sąsaja yra glaustesnė, todėl šiame straipsnyje naudojamas dinaminio atnaujinimo modelis Highcharts, o grafikos tipas yra spline. Galutinis efekto žemėlapis yra toks (Pinqijin kaina atnaujinama kas 10 sekundžių, o taškas pridedamas prie linijinės diagramos kas 10 sekundžių):

Pasiekite žingsnių surinkimą:

Sukurkite naują svetainę naudodami VS ir sukurkite asp.net puslapį DynamicUpdate.aspx, puslapio kodas yra toks:


  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>
Kopijuoti kodą

Highcharts ypatybė renderTo nurodo rodymo konteinerius,

Įvykiai reiškia įvykį, kurį konteineris turi užregistruoti, kai įkėlimas reiškia, kad jis įvyksta po to, kai pakrovimas yra baigtas, čia JS laikmatis yra nustatytas įkelti, kuris įvyksta kartą per 10 sekundžių, ir kodas jame yra prašyti naujausio GOLD iš dataupdate.ashx failo ajaxhandler aplanko tame pačiame šakniniame kataloge kaip DynamicUpdate.aspx puslapis per ajax jQuery Veislės kainos duomenys, štai kodėl aš pridedu randomCode + "=" + oldrandomCode į ajax URL, nes pridedant atsitiktinį skaičių galima išvengti talpyklos, o flag=1 yra todėl, kad mano dataupdate.ashx failas nori priimti kelias užklausas iš skirtingų ajax, todėl naudokite vėliavėlę, kad jį atskirtumėte

xAxis reiškia atributų rinkinį, apibrėžtą konteinerio x ašiai, tipas reiškia rodomą teksto tipą, neprivaloma, čia aš užpildau laiko tipą, čia atkreipkite dėmesį, kad numatytasis egzempliorius yra GMT laikas, taip pat galite naudoti UTC laiką, bet paprastai naudojame Pekino laiką, (GMT arba UTC) + 8 valandos = Pekino laikas, taigi, kai naudojame ajax, kad gautume laiką yra Pekino laikas, turėtume atimti 8 valandas iš valandos (čia aš taip pat noriu pasidalinti patirtimi, Kaip konvertuoti serverio laiką į js laiką, kurį galima naudoti .getTime() metodu, tai yra, atimti serverio laiką iš 1970-1-1, konvertuoti likusias dienas į milisekundes ir priskirti reikšmę naujai inicijuotam laikui naudojant setTime metodą js, radau, kad getTime() gautas rezultatas yra neteisingas inicijuojant js laiką tiesiai js naujos datos (metai, mėnuo, diena, valanda, minutė, sekundė, milisekundė) forma su getTime(), Kalbant apie tai, kodėl 1970-1-1 yra atimtas, tai yra todėl, kad getTime() metodo apibrėžimas yra gauti milisekundžių skaičių iš dabartinio laiko nuo 1970-1-1), kai x ašis nerodoma kaip laikas arba jums reikia ją apibrėžti patiems, ją taip pat galima apibrėžti pagal kategorijų atributą, tickPixelInterval reiškia x ašies tankį, o etiketės naudojamos x ašies rodymo formatui formatuoti

yAxis reiškia atributų rinkinį, apibrėžtą konteinerio y ašiai, kuris yra maždaug toks pat kaip x ašies atributai, tačiau Highcharts neįmanoma apibrėžti fiksuotos y ašies vertės per kategorijas, Highcharts y ašis automatiškai generuojama pagal nurodytus koordinačių taško duomenis, kurie priklauso nuo sekos atributo duomenų subatributo, pavyzdžiui, kai duomenims priskiriate reikšmę Didžiausia vertė yra 300, o mažiausia reikšmė yra 100. Tada y ašies ekranas bus nuo 100 iki 300 arba taip pat galite nustatyti yAxis atributą max arba min

serija reiškia visų konteineryje rodomų kreivių rinkinį, čia rodau tik vieną kreivę, pavadinimas reiškia kreivės pavadinimą, duomenys reiškia kreivės koordinačių taškų serijos rinkinį, x yra priekyje, y yra už nugaros, šiuo atveju tai yra js masyvas, nes x ašis rodo laiką, todėl masyvo objekto x savybė turi būti nustatyta į laiką, tačiau Highcharts jis nėra tiesiogiai priskirtas laikas x ašiai, Vietoj to, milisekundžių skaičius nuo 1970-1-1 iki tam tikro laiko priskiriamas x ašiai, kad būtų pavaizduotas šis laikas, todėl reikia naudoti getTime() metodą, y ašies koordinačių taško forma turi būti y = mažas skaičius * sveikojo skaičiaus forma, ir aš nesupratau, kodėl Highcharts turėjo tai padaryti, nes šiame pavyzdyje veislės kainų duomenys paprastai yra maždaug vienodi, todėl gaudamas duomenis turėjau padalyti iš 200, o tada padauginti iš 200, kai priskiriu reikšmę y ašiai.


<%= jsonstr %> puslapio kode yra pradiniai duomenys, kuriuos turiu gauti iš serverio, kad galėčiau inicijuoti grafiką, puslapio CS generavimą


  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.         }
Kopijuoti kodą

Tarp jų "TabMerPrice" lentelė yra įvairovės kainos informacijos lentelė, TMPTime laikas, TMPPrice kaina, TMPTime laiko intervalas yra dešimt sekundžių, aš naudoju duomenų bazės užduotį, kad sugeneruočiau lentelės įrašą, kuris vyksta kartą per dešimt sekundžių

AddHours(-8) skirtas konvertuoti laiką į Pekino laiką, o sugeneruotas duomenų formatas yra json formatas

dataupdate.ashx kodas atrodo taip:


  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.         }
Kopijuoti kodą

Tai yra apytikslis žingsnių agregavimo įgyvendinimas, kuris gali realizuoti serverio duomenų rodymą realiuoju laiku su grafiku, panašiu į atsargų formatą


HighCharts演示.zip (48.69 KB, Atsisiuntimų skaičius: 1)


Vertinimas pagal

Dalyvių skaičius1MB+1 Prisidėti prie+1 Žlugimo priežastis
Vyrų dievas sveikina + 1 + 1 Ar nuomotojas gali duoti man kontaktinę informaciją, tai labai padeda

Peržiūrėti visus įvertinimus





Ankstesnis:Kaip įjungti "Android 4.4.x" kūrėjo režimą
Kitą:Remiantis Sina@ funkcija paprastas pavyzdys

Susijusios žinutės
Paskelbta 2015-06-28 10:34:21 |
Šį pranešimą paskutinį kartą redagavo microxdd 2015-6-28 10:35

Stygų susiuvimas yra labiausiai švaistomas našumas ir gali būti naudojamas su "StringBuilder". Tačiau rekomenduojama naudoti JSON serializaciją, kuri gali tiesiogiai konvertuoti objektus į JSON eilutes. Jis taip pat gali būti deserializuotas
Rekomenduokite Baidu piktogramų biblioteką http://echarts.baidu.com/doc/example.html
 Savininkas| Paskelbta 2015-06-28 10:54:45 |
microxdd Parašyta 2015-6-28 10:34
Stygų susiuvimas yra labiausiai švaistomas našumas ir gali būti naudojamas su "StringBuilder". Tačiau rekomenduojama naudoti JSON serializaciją, kuri gali tiesiogiai konvertuoti objektus į ...

JSON privalumas yra tas, kad jis yra dieviškas arklys? Aš tik girdėjau apie šį dalyką
Paskelbta 2015-06-28 16:02:07 |
Publikuota: 2015-6-28 10:54
JSON privalumas yra tas, kad jis yra dieviškas arklys? Aš tik girdėjau apie šį dalyką

JSON yra duomenų formatas, kuris yra nepriklausomas nuo kalbos
Paskelbta 2015-06-28 16:03:36 |
Delver_Si Publikuota: 2015-6-28 16:02
JSON yra duomenų formatas, kuris yra nepriklausomas nuo kalbos

Tiesiogiai perkelkite JS reikalingus duomenis iš fono JSON formatu, kaip elgtis su JS
 Savininkas| Paskelbta 2015-06-28 17:33:24 |
Delver_Si Publikuota: 2015-6-28 16:03
Tiesiogiai perkelkite JS reikalingus duomenis iš fono JSON formatu, kaip elgtis su JS

Mokymasis
Paskelbta 2015-06-29 18:56:59 |
Xiao Zhazha Publikuota: 2015-6-28 17:33
Mokymasis

Atsakomybės apribojimas:
Visa programinė įranga, programavimo medžiaga ar straipsniai, kuriuos skelbia Code Farmer Network, yra skirti tik mokymosi ir mokslinių tyrimų tikslams; Aukščiau nurodytas turinys negali būti naudojamas komerciniais ar neteisėtais tikslais, priešingu atveju vartotojai prisiima visas pasekmes. Šioje svetainėje pateikiama informacija gaunama iš interneto, o ginčai dėl autorių teisių neturi nieko bendra su šia svetaine. Turite visiškai ištrinti aukščiau pateiktą turinį iš savo kompiuterio per 24 valandas nuo atsisiuntimo. Jei jums patinka programa, palaikykite autentišką programinę įrangą, įsigykite registraciją ir gaukite geresnes autentiškas paslaugas. Jei yra kokių nors pažeidimų, susisiekite su mumis el. paštu.
Mail To:help@itsvse.com