Denne artikel er en spejling af maskinoversættelse, klik venligst her for at springe til den oprindelige artikel.

Architect_Programmer_Code Landbrugsnetværk»Arkitekt › Programmering › .Net/C # › Highcharts kombinerer Asp.net for at realisere dynamiske eksempler på grafisk visning af data stock ...
Udsigt: 23205|Svar: 6

[ASP.NET] Highcharts kombinerer Asp.net for at realisere dynamiske eksempler på visning af dataaktiegrafer

[Kopier link]
Opslået på 28/06/2015 00.06.24 | | | |

Det specifikke anvendelsesmarked for dette eksempel er, at jeg regelmæssigt skal læse prisen på en råvare fra databasen og derefter vise det på websiden som en graf, ligesom pristrenddiagrammet for handelsinstrumenter i aktier.

Jeg bruger asp.net, kombineret med Highcharts-plugin-implementeringen i jQuery, plugin'et kan understøtte mange typer grafik, men de er statiske, og de eksempler, der gives, skal transformeres, interesserede venner kan gå ind på Highcharts' officielle hjemmeside for at se (http://www.highcharts.com/), som tilbyder mange demoer, for at opfylde mine behov bør jeg bruge Highstock, Men efter at have set på eksempelet med dynamisk opdatering i Highcharts, kan jeg også indse, at mit kravinterface er mere kortfattet, så denne artikel bruger den dynamiske opdateringsmodel i Highcharts, og grafiktypen er spline. Det endelige effektkort er som følger (prisen på Pinqijin opdateres hvert 10. sekund, og et punkt tilføjes til linjegrafen hvert 10. sekund):

Opnå trappeophobning:

Opret en ny hjemmeside med VS og lav en asp.net side DynamicUpdate.aspx, sidekoden er som følger:


  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>
Kopier kode

Highcharts-egenskaben renderTo angiver displaycontainere,

events repræsenterer den begivenhed, containeren skal registrere, hvor load betyder, at den sker efter loadingen er afsluttet, her sættes en js-timer i loaden, som sker én gang hvert 10. sekund, og koden i den er at anmoder om den nyeste GOLD fra dataupdate.ashx-filen i ajaxhandler-mappen i samme rodmappe som DynamicUpdate.aspx-siden gennem ajax i jQuery Prisdataene for varianten, her er grunden til, at jeg tilføjer randomCode + "=" + oldrandomCode i ajax-URL'en, fordi tilføjelse af et tilfældigt tal kan undgå caching, og flag=1 er fordi min dataupdate.ashx-fil vil acceptere flere forespørgsler fra forskellige ajax, så brug flag til at skelne det

xAxis repræsenterer samlingen af attributter defineret for x-aksen af containeren, type repræsenterer den viste teksttype, valgfrit, her udfylder jeg tidstypen, her bemærk, at standarden for instansen er GMT-tid, du kan også bruge UTC-tid, men vi bruger generelt Beijing-tid (GMT eller UTC) + 8 timer = Beijing-tid, så når vi bruger ajax til at få tiden til Beijing-tid, bør vi trække 8 timer fra timen (her vil jeg også dele en oplevelse, Hvordan man konverterer servertid til js-tid, der kan bruges med .getTime()-metoden, det vil sige at trække servertiden fra 1970-1-1, konvertere de resterende dage til millisekunder og derefter tildele en værdi til den nyinitierede tid via setTime-metoden i js, fandt jeg ud af, at resultatet opnået af getTime() er forkert til at initialisere en js-tid direkte i js i form af ny dato (år, måned, dag, time, minut, sekund, millisekund) med getTime(), Hvad angår hvorfor 1970-1-1 trækkes fra, skyldes det, at definitionen af getTime()-metoden er at få antallet af millisekunder fra den aktuelle tid fra 1970-1-1), når x-aksen ikke vises som en tid, eller du selv skal definere den, kan den også defineres af kategoriattributten, tickPixelInterval repræsenterer densiteten af x-aksen, og labels bruges til at formatere visningsformatet for x-aksen

yAxis repræsenterer en samling af attributter defineret for y-aksen af containeren, som omtrent svarer til attributterne for x-aksen, men i Highcharts er det ikke muligt at definere den faste værdi af y-aksen gennem kategorier; y-aksen i Highcharts genereres automatisk baseret på de givne koordinatpunktdata, som afhænger af dataunderattributten for serieattributten, for eksempel når du tildeler en værdi til data. Maksimum er 300, og minimumsværdien er 100. Så vil visningen af y-aksen være mellem 100 og 300, eller du kan også sætte maks- eller minimumsattributten for yAxis

serien repræsenterer samlingen af alle kurver, der vises i beholderen, her viser jeg kun én kurve, navnet repræsenterer kurvens navn, data repræsenterer samlingen af en række koordinatpunkter på kurven, x er foran, y bagved, det er et js-array, i dette tilfælde fordi x-aksen viser tid, så x-egenskaben for array-objektet skal sættes til tid, men i Highcharts tildeles x-aksen ikke direkte tid, I stedet tildeles antallet af millisekunder mellem 1970-1-1 og en bestemt tid x-aksen for at repræsentere denne tid, så getTime()-metoden skal bruges, formen af y-aksens koordinatpunkt skal være y = lille tal * heltalsform, og jeg forstod ikke, hvorfor Highcharts skulle gøre dette, fordi prisdataene for varietéen i dette eksempel generelt er omtrent de samme, så jeg måtte dividere med 200, da jeg fik dataene, og derefter gange med 200, når jeg tildelte en værdi til y-aksen.


<%= jsonstr %> i sidekoden er de indledende data, jeg skal hente fra serveren for at initialisere grafen, altså cs-genereringen af siden


  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.         }
Kopier kode

Blandt dem er TabMerPrice-tabellen en variationsprisinformationstabell, TMPTime-tid, TMPPrice-pris, TMPTime-tidsintervallet er ti sekunder, jeg bruger et databasejob til at generere tabellen i posten, hvilket sker én gang hvert tiende sekund

AddHours(-8) er til at konvertere tiden til Beijing-tid, og det genererede dataformat er json-format

Dataupdate.ashx-koden ser sådan ud:


  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.         }
Kopier kode

Dette er den grove implementering af trinaggregering, som kan realisere realtidsvisning af serverside data med en graf, der ligner standardformatet


HighCharts演示.zip (48.69 KB, Antal downloads: 1)


Score

Antal deltagere1MB+1 bidrage+1 Sammenbrud årsag
Mandlig gud, tillykke + 1 + 1 Kan udlejeren give mig kontaktoplysninger? Det hjælper meget

Se alle vurderinger





Tidligere:Sådan kommer du i udviklertilstand for Android 4.4.x
Næste:Baseret på Sina@ enkelt eksempel på funktionen

Relaterede indlæg
Opslået på 28/06/2015 10.34.21 |
Dette indlæg blev sidst redigeret af microxdd den 28-6-2015 kl. 10:35

At sy strenge er den mest spildte ydeevne og kan bruges med StringBuilder. Det anbefales dog at bruge JSON-serialisering, som kan konvertere objekter direkte til JSON-strenge. Det kan også deserialiseres
Anbefaler Baidu ikonbibliotek http://echarts.baidu.com/doc/example.html
 Udlejer| Opslået på 28/06/2015 10.54.45 |
MicroXDD Opslået den 28-6-2015 kl. 10:34
At sy strenge er den mest spildte ydeevne og kan bruges med StringBuilder. Det anbefales dog at bruge JSON-serialisering, som direkte kan konvertere objekter til ...

Fordelen ved JSON er, at det er en guddommelig hest? Jeg har kun hørt om den her ting
Opslået på 28/06/2015 16.02.07 |
Udgivet den 28-6-2015 kl. 10:54
Fordelen ved JSON er, at det er en guddommelig hest? Jeg har kun hørt om den her ting

JSON er et dataformat, der er sprogagnostisk
Opslået på 28/06/2015 16.03.36 |
Delver_Si Opslået den 28-6-2015 kl. 16:02
JSON er et dataformat, der er sprogagnostisk

Overfør de data, der kræves af JS direkte, fra baggrunden i JSON-format, hvordan man håndterer JS
 Udlejer| Opslået på 28/06/2015 17.33.24 |
Delver_Si Opslået den 28-6-2015 kl. 16:03
Overfør de data, der kræves af JS direkte, fra baggrunden i JSON-format, hvordan man håndterer JS

Læring
Opslået på 29/06/2015 18.56.59 |
Xiao Zhazha Opslået den 28-6-2015 kl. 17:33
Læring

Ansvarsfraskrivelse:
Al software, programmeringsmaterialer eller artikler udgivet af Code Farmer Network er kun til lærings- og forskningsformål; Ovenstående indhold må ikke bruges til kommercielle eller ulovlige formål, ellers skal brugerne bære alle konsekvenser. Oplysningerne på dette site kommer fra internettet, og ophavsretstvister har intet med dette site at gøre. Du skal slette ovenstående indhold fuldstændigt fra din computer inden for 24 timer efter download. Hvis du kan lide programmet, så understøt venligst ægte software, køb registrering og få bedre ægte tjenester. Hvis der er nogen overtrædelse, bedes du kontakte os via e-mail.
Mail To:help@itsvse.com