Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Architect_Programmer_Code Jordbruksnätverket»Arkitekt › Programmering › .Net/C # › Highcharts kombinerar Asp.net för att realisera dynamiska exempel på grafikvisning av data i stock ...
Utsikt: 23205|Svar: 6

[ASP.NET] Highcharts kombinerar Asp.net för att realisera dynamiska exempel på bildskärm av datastocksgrafer

[Kopiera länk]
Publicerad på 2015-06-28 00:06:24 | | | |

Den specifika applikationsmarknaden för detta exempel är att jag regelbundet måste läsa priset på en råvara från databasen och sedan visa det på webbsidan som en graf, liknande pristrenddiagrammet för handelsinstrument i aktier.

Jag använder asp.net, kombinerat med Highcharts plugin-implementation i jQuery, pluginet kan stödja många typer av grafik, men de är statiska och exemplen måste transformeras, intresserade vänner kan gå till Highcharts officiella webbplats för att se (http://www.highcharts.com/), som erbjuder många demos, ärligt talat, för att uppfylla mina behov borde jag använda Highstock, Men efter att ha tittat på exemplet med dynamisk uppdatering i Highcharts kan jag också inse att mitt kravgränssnitt är mer koncist, så den här artikeln använder den dynamiska uppdateringsmodellen i Highcharts, och grafiktypen är spline. Den slutliga effektkartan är som följer (priset på Pinqijin uppdateras var tionde sekund och en punkt läggs till linjegrafen var tionde sekund):

Uppnå stegsamling:

Skapa en ny webbplats med VS och skapa en asp.net sida DynamicUpdate.aspx, sidkoden är följande:


  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>
Kopiera koden

Highcharts-egenskapen renderTo indikerar displaybehållare,

händelser representerar den händelse som containern behöver registrera, där load betyder att den sker efter att laddningen är klar, här sätts en js-timer i loaden, som sker var tionde sekund, och koden i den är att begära den senaste GOLD från dataupdate.ashx-filen i ajaxhandler-mappen i samma rotkatalog som DynamicUpdate.aspx-sidan via ajax i jQuery Prisdata för varianten, här är varför jag lägger till randomCode + "=" + oldrandomCode i ajax-URL:en eftersom tillägg av ett slumpnummer kan undvika caching, och flag=1 är för att min dataupdate.ashx-fil vill acceptera flera förfrågningar från olika ajax, så använd flagga för att skilja den åt

xAxis representerar samlingen av attribut som definierats för x-axeln i containern, type representerar den visade texttypen, valfritt, här fyller jag i tidstypen, notera att standarden för instansen är GMT-tid, du kan också använda UTC-tid, men vi använder vanligtvis Beijing-tid (GMT eller UTC) + 8 timmar = Beijing-tid, så när vi använder ajax för att få tiden är Beijing-tid bör vi dra av 8 timmar från timmen (här vill jag också dela en upplevelse, Hur man konverterar servertid till js-tid som kan användas med .getTime()-metoden, det vill säga subtrahera servertiden från 1970-1-1, konvertera de återstående dagarna till millisekunder och sedan tilldela ett värde till den nyinitierade tiden via setTime-metoden i js, jag fann att resultatet som getTime() erhåller är felaktigt för att initialisera en js-tid direkt i js i form av nytt datum (år, månad, dag, timme, minut, sekund, millisekund) med getTime(), När det gäller varför 1970-1-1 subtraheras beror det på att definitionen av getTime()-metoden är att få antalet millisekunder från den aktuella tiden från 1970-1-1), när x-axeln inte visas som en tid eller du behöver definiera den själv, kan den också definieras av attributet categories, tickPixelInterval representerar tätheten av x-axeln, och labels används för att formatera visningsformatet för x-axeln

yAxis representerar en samling attribut definierade för y-axeln i containern, vilket ungefär är samma som attributen för x-axeln, men i Highcharts är det inte möjligt att definiera det fasta värdet av y-axeln genom kategorier, y-axeln för Highcharts genereras automatiskt baserat på den givna koordinatpunktdatan, vilket beror på dataunderattributet för serieattributet, till exempel när du tilldelar ett värde till data. Maxvärdet är 300 och minimivärdet är 100. Då kommer displayen för y-axeln att ligga mellan 100 och 300, eller så kan du också ställa in max- eller min-attributet för yAxis

serie representerar samlingen av alla kurvor som visas i behållaren, här visar jag bara en kurva, namnet representerar namnet på kurvan, data representerar insamlingen av en serie koordinatpunkter på kurvan, x är fram, y bakom, det är en js-array, i detta fall eftersom x-axeln visar tid, så x-egenskapen för arrayobjektet måste sättas till tid, men i Highcharts tilldelas inte tid direkt till x-axeln, Istället tilldelas antalet millisekunder mellan 1970-1-1 och en viss tid x-axeln för att representera denna tid, så getTime()-metoden måste användas, formen på y-axelns koordinatpunkt måste vara y = litet tal * heltalsform, och jag förstod inte varför Highcharts var tvungen att göra detta, eftersom prisdatan för varieteten i detta exempel generellt är ungefär densamma, så jag var tvungen att dividera med 200 när jag fick data, och sedan multiplicera med 200 när jag tilldelade ett värde till y-axeln.


<%= jsonstr %> i sidkoden finns den initiala datan jag behöver hämta från servern för att initiera grafen, alltså CS-genereringen av sidan


  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.         }
Kopiera koden

Bland dem är TabMerPrice-tabellen en tabell för variationsprisinformation, TMPTime-tid, TMPPrice-pris, TMPTime-tidsintervall är tio sekunder, jag använder ett databasjobb för att generera tabellen som sker var tionde sekund

AddHours(-8) är för att konvertera tiden till Beijing-tid, och det genererade dataformatet är json-format

Dataupdate.ashx-koden ser ut så här:


  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.         }
Kopiera koden

Detta är den grova implementeringen av stegaggregering, som kan realisera realtidsvisning av serverdata med en graf liknande standardformatet


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


Tjog

Antal deltagare1MB+1 bidra+1 Kollaps förnuft
Manliga gudens gratulationer + 1 + 1 Kan hyresvärden ge mig kontaktuppgifter? Det hjälper mycket

Se alla betyg





Föregående:Hur man kommer in i utvecklarläge för Android 4.4.x
Nästa:Baserat på Sina@ enkelt exempel

Relaterade inlägg
Publicerad på 2015-06-28 10:34:21 |
Detta inlägg redigerades senast av microxdd den 28-6-2015 10:35

Att sy strängar är den mest slösaktiga prestandan och kan användas med StringBuilder. Det rekommenderas dock att använda JSON-serialisering, som kan konvertera objekt direkt till JSON-strängar. Det kan också avserialiseras.
Rekommenderar Baidu ikonbibliotek http://echarts.baidu.com/doc/example.html
 Hyresvärd| Publicerad på 2015-06-28 10:54:45 |
MicroXDD publicerades den 28 juni 2015 10:34
Att sy strängar är den mest slösaktiga prestandan och kan användas med StringBuilder. Det rekommenderas dock att använda JSON-serialisering, som kan konvertera objekt direkt till ...

Fördelen med JSON är att det är en gudomlig häst? Jag har bara hört talas om den här saken
Publicerad på 2015-06-28 16:02:07 |
Publicerad den 28 juni 2015 kl. 10:54
Fördelen med JSON är att det är en gudomlig häst? Jag har bara hört talas om den här saken

JSON är ett dataformat som är språkagnostiskt
Publicerad på 2015-06-28 16:03:36 |
Delver_Si Publicerad den 28-6-6 2015 16:02
JSON är ett dataformat som är språkagnostiskt

Överför direkt de data som krävs av JS från bakgrunden i JSON-format, hur man hanterar JS
 Hyresvärd| Publicerad på 2015-06-28 17:33:24 |
Delver_Si Publicerad den 28 juni 2015 16:03
Överför direkt de data som krävs av JS från bakgrunden i JSON-format, hur man hanterar JS

Lärande
Publicerad på 2015-06-29 18:56:59 |
Xiao Zhazha Publicerad den 2015-6-28 17:33
Lärande

Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.
Mail To:help@itsvse.com