Šis raksts ir mašīntulkošanas spoguļraksts, lūdzu, noklikšķiniet šeit, lai pārietu uz oriģinālo rakstu.

Architect_Programmer_Code Lauksaimniecības tīkls»Arhitekts › Programmēšanas › .net/c # › Highcharts apvieno Asp.net, lai realizētu dinamisko datu krājumu grafisko displeju piemērus ...
Skats: 23205|Atbildi: 6

[ASP.NET] Highcharts apvieno Asp.net, lai realizētu dinamisko datu krājumu grafiku attēlošanas piemērus

[Kopēt saiti]
Publicēts 28.06.2015 00:06:24 | | | |

Šī piemēra specifiskais lietojumprogrammu tirgus ir tāds, ka man regulāri jālasa preces cena no datu bāzes un pēc tam jāparāda tā tīmekļa lapā kā grafiks, līdzīgi kā akciju tirdzniecības instrumentu cenu tendenču diagramma.

Es izmantoju asp.net, apvienojumā ar Highcharts spraudņa ieviešanu jQuery, spraudnis var atbalstīt daudzu veidu grafiku, taču tie ir statiski, un sniegtie piemēri ir jāpārveido, ieinteresētie draugi var doties uz Highcharts oficiālo vietni, lai redzētu (http://www.highcharts.com/), kas nodrošina daudz demonstrāciju, godīgi sakot, lai realizētu savas vajadzības, man vajadzētu izmantot Highstock, Tomēr, apskatot Highcharts dinamiskās atjaunināšanas piemēru, es varu arī saprast, ka mans prasību interfeiss ir kodolīgāks, tāpēc šajā rakstā tiek izmantots dinamiskās atjaunināšanas modelis Highcharts, un grafikas tips ir spline. Galīgā efekta karte ir šāda (Pinqijin cena tiek atjaunināta ik pēc 10 sekundēm, un punkts tiek pievienots līniju diagrammai ik pēc 10 sekundēm):

Sasniedziet soļu apkopošanu:

Izveidojiet jaunu vietni ar VS un izveidojiet asp.net lapas DynamicUpdate.aspx, lapas kods ir šāds:


  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>
Kopēt kodu

Highcharts rekvizīts renderTo norāda displeja konteinerus,

Notikumi ir notikums, kas konteineram ir jāreģistrē, kur ielāde nozīmē, ka tas notiek pēc ielādes pabeigšanas, šeit ielādē ir iestatīts js taimeris, kas notiek reizi 10 sekundēs, un tajā esošais kods ir pieprasīt jaunāko GOLD no mapes ajaxhandler faila dataupdate.ashx tajā pašā saknes direktorijā kā DynamicUpdate.aspx lapa, izmantojot ajax jQuery Šķirnes cenu dati, šeit ir iemesls, kāpēc es pievienoju randomCode + "=" + oldrandomCode ajax URL, jo nejauša skaitļa pievienošana var izvairīties no kešatmiņas, un flag=1 ir tāpēc, ka mans dataupdate.ashx fails vēlas pieņemt vairākus pieprasījumus no dažādiem ajax, tāpēc izmantojiet karodziņu, lai to atšķirtu

xAxis attēlo konteinera x asij definēto atribūtu kolekciju, tips apzīmē parādīto teksta tipu, pēc izvēles, šeit es aizpildu laika tipu, šeit ņemiet vērā, ka noklusējums gadījumam ir GMT laiks, varat izmantot arī UTC laiku, bet mēs parasti izmantojam Pekinas laiku, (GMT vai UTC) + 8 stundas = Pekinas laiks, tāpēc, kad mēs izmantojam ajax, lai iegūtu laiku ir Pekinas laiks, mums vajadzētu atņemt 8 stundas no stundas (šeit es arī vēlos dalīties pieredzē, Kā konvertēt servera laiku uz js laiku, ko var izmantot ar .getTime() metodi, tas ir, atņemt servera laiku no 1970-1-1, pārvērst atlikušās dienas milisekundēs un pēc tam piešķirt vērtību jauninicializētajam laikam, izmantojot setTime metodi js, es atklāju, ka getTime() iegūtais rezultāts ir nepareizs, lai inicializētu js laiku tieši js jauna datuma veidā (gads, mēnesis, diena, stunda, minūte, sekunde, milisekunde) ar getTime(), Kas attiecas uz to, kāpēc 1970-1-1 tiek atņemts, tas ir tāpēc, ka getTime() metodes definīcija ir iegūt milisekunžu skaitu no pašreizējā laika no 1970-1-1), kad x ass netiek parādīta kā laiks vai jums tas ir jādefinē pats, to var definēt arī ar kategoriju atribūtu, tickPixelInterval attēlo x ass blīvumu, un etiķetes tiek izmantotas, lai formatētu x ass displeja formātu

yAxis ir atribūtu kolekcija, kas definēta konteinera y asij, kas ir aptuveni tāda pati kā x ass atribūtiem, bet Highcharts nav iespējams definēt y ass fiksēto vērtību, izmantojot kategorijas, Highcharts y ass tiek automātiski ģenerēta, pamatojoties uz dotajiem koordinātu punkta datiem, kas ir atkarīgi no sērijas atribūta datu apakšatribūta, piemēram, piešķirot vērtību datiem Maksimālā vērtība ir 300, un minimālā vērtība ir 100. Tad y ass displejs būs no 100 līdz 300, vai arī varat iestatīt yAxis max vai min atribūtu

sērija attēlo visu konteinerā parādīto līkņu kolekciju, šeit es parādu tikai vienu līkni, nosaukums apzīmē līknes nosaukumu, dati atspoguļo līknes koordinātu punktu sēriju, x ir priekšā, y ir aiz muguras, šajā gadījumā tas ir js masīvs, jo x ass parāda laiku, tāpēc masīva objekta x rekvizīts ir jāiestata uz laiku, bet Highcharts tas nav tieši piešķirts laiks x asij, Tā vietā milisekunžu skaits starp 1970-1-1 un noteiktu laiku tiek piešķirts x asij, lai attēlotu šo laiku, tāpēc jāizmanto getTime() metode, y ass koordinātu punkta formai jābūt y = mazam skaitlim * veselam skaitlim, un es nesapratu, kāpēc Highcharts tas bija jādara, jo šķirnes cenu dati šajā piemērā parasti ir aptuveni vienādi, tāpēc, iegūstot datus, man bija jādala ar 200 un pēc tam jāreizina ar 200, piešķirot vērtību y asij.


<%= jsonstr %> lapas kodā ir sākotnējie dati, kas man jāsaņem no servera, lai inicializētu grafiku, lapas CS ģenerēšanu


  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.         }
Kopēt kodu

Starp tiem TabMerPrice tabula ir šķirnes cenu informācijas tabula, TMPTime laiks, TMPPrice cena, TMPTime laika intervāls ir desmit sekundes, es izmantoju datu bāzes darbu, lai ģenerētu tabulas ierakstu, kas notiek reizi desmit sekundēs

AddHours(-8) ir konvertēt laiku uz Pekinas laiku, un ģenerētais datu formāts ir json formāts

Dataupdate.ashx kods izskatās šādi:


  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.         }
Kopēt kodu

Šī ir aptuvena soļu apkopošanas ieviešana, kas var realizēt servera puses datu attēlošanu reāllaikā ar grafiku, kas līdzīgs krājuma formātam


HighCharts演示.zip (48.69 KB, Lejupielādes skaits: 1)


Vērtējums

Dalībnieku skaits1MB+1 Veicināt+1 Sakļaut iemesls
Vīriešu dievu apsveikumi + 1 + 1 Vai saimnieks var man sniegt kontaktinformāciju, tas ļoti palīdz

Skatīt visus vērtējumus





Iepriekšējo:Kā iekļūt izstrādātāja režīmā operētājsistēmai Android 4.4.x
Nākamo:Pamatojoties uz Sina@ funkciju vienkāršs piemērs

Saistītās ziņas
Publicēts 28.06.2015 10:34:21 |
Šo ziņu pēdējo reizi rediģēja microxdd 2015-6-28 10:35

Stīgu šūšana ir visizšķērdīgākā veiktspēja, un to var izmantot kopā ar StringBuilder. Tomēr ieteicams izmantot JSON serializāciju, kas var tieši pārvērst objektus JSON virknēs. To var arī deserializēt
Iesakiet Baidu ikonu bibliotēku http://echarts.baidu.com/doc/example.html
 Saimnieks| Publicēts 28.06.2015 10:54:45 |
microxdd Publicēts 2015-6-28 10:34
Stīgu šūšana ir visizšķērdīgākā veiktspēja, un to var izmantot kopā ar StringBuilder. Tomēr ieteicams izmantot JSON serializāciju, kas var tieši pārvērst objektus par ...

JSON priekšrocība ir tā, ka tas ir dievišķs zirgs? Es esmu dzirdējis tikai par šo lietu
Publicēts 28.06.2015 16:02:07 |
Publicēts 2015-6-28 10:54
JSON priekšrocība ir tā, ka tas ir dievišķs zirgs? Es esmu dzirdējis tikai par šo lietu

JSON ir datu formāts, kas ir valodas agnostisks
Publicēts 28.06.2015 16:03:36 |
Delver_Si Publicēts 2015-6-28 16:02
JSON ir datu formāts, kas ir valodas agnostisks

Tieši pārsūtiet JS nepieciešamos datus no fona JSON formātā, kā rīkoties ar JS
 Saimnieks| Publicēts 28.06.2015 17:33:24 |
Delver_Si Publicēts 2015-6-28 16:03
Tieši pārsūtiet JS nepieciešamos datus no fona JSON formātā, kā rīkoties ar JS

Mācīšanās
Publicēts 29.06.2015 18:56:59 |
Xiao Zhazha Publicēts 2015-6-28 17:33
Mācīšanās

Atruna:
Visa programmatūra, programmēšanas materiāli vai raksti, ko publicē Code Farmer Network, ir paredzēti tikai mācību un pētniecības mērķiem; Iepriekš minēto saturu nedrīkst izmantot komerciāliem vai nelikumīgiem mērķiem, pretējā gadījumā lietotājiem ir jāuzņemas visas sekas. Informācija šajā vietnē nāk no interneta, un autortiesību strīdiem nav nekāda sakara ar šo vietni. Iepriekš minētais saturs ir pilnībā jāizdzēš no datora 24 stundu laikā pēc lejupielādes. Ja jums patīk programma, lūdzu, atbalstiet oriģinālu programmatūru, iegādājieties reģistrāciju un iegūstiet labākus oriģinālus pakalpojumus. Ja ir kādi pārkāpumi, lūdzu, sazinieties ar mums pa e-pastu.
Mail To:help@itsvse.com