Dieser Artikel ist ein Spiegelartikel der maschinellen Übersetzung, bitte klicken Sie hier, um zum Originalartikel zu springen.

Architect_Programmer_Code Landwirtschaftsnetzwerk»Architekt › Programmieren › .Net/C # › Highcharts kombiniert Asp.net, um dynamische Beispiele für Stock-Grafiken zu realisieren ...
Ansehen: 23205|Antwort: 6

[ASP.NET] Highcharts kombiniert Asp.net, um dynamische Beispiele für die Anzeige von Daten-Aktiendiagrammen zu realisieren

[Link kopieren]
Veröffentlicht am 28.06.2015 00:06:24 | | | |

Der spezifische Anwendungsmarkt für dieses Beispiel ist, dass ich regelmäßig den Preis eines Rohstoffs aus der Datenbank lesen und ihn dann auf der Webseite als Diagramm anzeigen muss, ähnlich wie das Kurs-Trenddiagramm von Handelsinstrumenten in Aktien.

Ich nutze asp.net, kombiniert mit der Highcharts-Plugin-Implementierung in jQuery, das Plugin unterstützt viele Arten von Grafiken, aber sie sind statisch, und die angegebenen Beispiele müssen transformiert werden. Interessierte Freunde können auf die offizielle Highcharts-Website gehen und (http://www.highcharts.com/) sehen, die viele Demos bietet. Ehrlich gesagt, um meine Bedürfnisse zu erfüllen, sollte ich Highstock verwenden. Nachdem ich mir jedoch das dynamische Update-Beispiel von Highcharts angesehen habe, erkenne ich auch, dass meine Anforderungsoberfläche prägnanter ist, weshalb dieser Artikel das dynamische Update-Modell in Highcharts verwendet, und der Grafiktyp ist Spline. Die endgültige Effektkarte ist wie folgt (der Preis von Pinqijin wird alle 10 Sekunden aktualisiert, und alle 10 Sekunden wird ein Punkt zum Liniendiagramm hinzugefügt):

Erreichen Sie das Sammeln von Schritten:

Erstellen Sie eine neue Website mit VS und erstellen Sie eine asp.net Seite DynamicUpdate.aspx, der Seitencode lautet wie folgt:


  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>
Code kopieren

Highcharts-Eigenschaft renderTo zeigt Display-Container an,

events repräsentiert das Ereignis, das der Container registrieren muss, wobei Load bedeutet, dass es nach Abschluss des Ladens erfolgt. Hier wird ein JS-Timer im Load eingestellt, der alle 10 Sekunden stattfindet, und der Code darin ist, das neueste GOLD aus der dataupdate.ashx-Datei des ajaxhandler-Ordners im selben Root-Verzeichnis wie die DynamicUpdate.aspx Seite durch ajax in jQuery anzufordern Die Preisdaten der Varietät, hier ist der Grund, warum ich randomCode + "=" + oldrandomCode in der Ajax-URL hinzufüge, weil das Hinzufügen einer Zufallszahl Caching vermeiden kann, und flag=1 ist, weil meine dataupdate.ashx-Datei mehrere Anfragen von verschiedenen ajax akzeptieren will, also benutze Flag zur Unterscheidung

xAxis stellt die Sammlung der für die x-Achse des Containers definierten Attributen dar, type steht für den angezeigten Texttyp, optional, hier fülle ich den Zeittyp ein, hier beachte, dass der Standard für die Instanz GMT-Zeit ist, man kann auch UTC-Zeit verwenden, aber wir verwenden im Allgemeinen die Peking-Zeit (GMT oder UTC) + 8 Stunden = Peking-Zeit, also wenn wir ajax verwenden, um die Zeit als Peking-Zeit zu bestimmen, sollten wir 8 Stunden von der Stunde abziehen (hier möchte ich auch eine Erfahrung teilen, Wie man Serverzeit in js-Zeit umwandelt, die mit der .getTime()-Methode verwendet werden kann, also die Serverzeit von 1970-1-1 subtrahiert, die verbleibenden Tage in Millisekunden umwandelt und dann der neu initialisierten Zeit mit der setTime-Methode in js einen Wert zuweist? Ich habe festgestellt, dass das Ergebnis von getTime() falsch ist, um eine js-Zeit direkt in js in Form eines neuen Datums (Jahr, Monat, Tag, Stunde, Minute, Sekunde, Millisekunde) mit getTime() zu initialisieren, Warum 1970-1-1 subtrahiert wird, liegt daran, dass die Definition der getTime()-Methode darin besteht, die Anzahl der Millisekunden aus der aktuellen Zeit von 1970-1-1 zu erhalten; wenn die x-Achse nicht als Zeit angezeigt wird oder man sie selbst definieren muss, kann sie auch durch das categories-Attribut definiert werden, tickPixelInterval stellt die Dichte der x-Achse dar und Labels werden verwendet, um das Anzeigeformat der x-Achse zu formatieren

yAxis stellt eine Sammlung von Attributen dar, die für die y-Achse des Containers definiert sind, was ungefähr mit den Attributen der x-Achse übereinstimmt, aber in Highcharts ist es nicht möglich, den festen Wert der y-Achse durch Kategorien zu definieren; die y-Achse von Highcharts wird automatisch basierend auf den gegebenen Koordinatenpunktdaten generiert, die vom Daten-Unterattribut des Serienattributs abhängen, zum Beispiel wenn man Daten einen Wert zuweist. Der maximale Wert beträgt 300, der minimale Wert ist 100. Dann liegt die Anzeige der y-Achse zwischen 100 und 300, oder du kannst auch das Max- oder Min-Attribut von yAxis festlegen

Serie stellt die Sammlung aller im Container angezeigten Kurven dar, hier zeige ich nur eine Kurve, Name steht für den Namen der Kurve, Data steht für die Sammlung einer Reihe von Koordinatenpunkten der Kurve, x liegt vorne, y dahinter, es ist ein js-Array, in diesem Fall zeigt die x-Achse die Zeit an, daher muss die x-Eigenschaft des Array-Objekts auf Zeit gesetzt werden, aber in Highcharts wird der x-Achse keine Zeit direkt zugewiesen, Stattdessen wird die Anzahl der Millisekunden zwischen 1970-1-1 und einer bestimmten Zeit der x-Achse zugewiesen, um diese Zeit darzustellen, daher muss die getTime()-Methode verwendet werden, die Form des y-Achsen-Koordinatenpunkts muss y = kleine Zahl * ganzzahlige Form sein, und ich habe nicht verstanden, warum Highcharts das tun musste, denn die Preisdaten der Varietät in diesem Beispiel sind im Allgemeinen ungefähr gleich, also musste ich bei der Datenerhebung durch 200 teilen und dann mit 200 multiplizieren, wenn ich der y-Achse einen Wert zuweisen.


<%= jsonstr %> im Seitencode sind die Anfangsdaten, die ich vom Server beziehen muss, um den Graphen zu initialisieren, also die CS-Generierung der Seite


  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.         }
Code kopieren

Dazu gehört die TabMerPrice-Tabelle, die Variety-Preisinformationstabelle, TMPTime-Zeit, TMPPrice-Preis, das TMPTime-Zeitintervall beträgt zehn Sekunden, ich verwende einen Datenbankjob, um den Datensatz der Tabelle zu erzeugen, der alle zehn Sekunden einmal passiert

AddHours(-8) dient dazu, die Zeit in Beijing-Zeit umzuwandeln, und das erzeugte Datenformat ist im JSON-Format

Der dataupdate.ashx-Code sieht so aus:


  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.         }
Code kopieren

Dies ist die grobe Umsetzung der Schrittaggregation, die die Echtzeitanzeige von serverseitigen Daten mit einem Graphen ähnlich dem Standardformat realisieren kann


HighCharts演示.zip (48.69 KB, Anzahl der Downloads: 1)


Punktzahl

Anzahl der Teilnehmer1MB+1 beitragen+1 Zusammenbruch Grund
Männlicher Gott, herzlichen Glückwunsch + 1 + 1 Kann mir der Vermieter eine Kontaktdaten geben? Das hilft sehr

Alle Bewertungen sehen





Vorhergehend:Wie man in den Entwicklermodus für Android 4.4.x einsteigt
Nächster:Basierend auf Sina@ einfachen Beispiel

Verwandte Beiträge
Veröffentlicht am 28.06.2015 10:34:21 |
Dieser Beitrag wurde zuletzt am 28.06.2015 um 10:35 Uhr von microxdd bearbeitet

Das Nähen von Saiten ist die verschwenderischste Leistung und kann mit StringBuilder verwendet werden. Es wird jedoch empfohlen, JSON-Serialisierung zu verwenden, die Objekte direkt in JSON-Strings umwandeln kann. Es kann auch deserialisiert werden
Empfehle die Baidu-Icon-Bibliothek http://echarts.baidu.com/doc/example.html
 Vermieter| Veröffentlicht am 28.06.2015 10:54:45 |
microxdd veröffentlicht am 28.06.2015 um 10:34 Uhr
Das Nähen von Saiten ist die verschwenderischste Leistung und kann mit StringBuilder verwendet werden. Es wird jedoch empfohlen, JSON-Serialisierung zu verwenden, die Objekte direkt in ... umwandeln kann.

Der Vorteil von JSON ist, dass es ein göttliches Pferd ist? Ich habe nur von diesem Ding gehört
Veröffentlicht am 28.06.2015 16:02:07 |
Veröffentlicht am 28.6.2015, 10:54 Uhr
Der Vorteil von JSON ist, dass es ein göttliches Pferd ist? Ich habe nur von diesem Ding gehört

JSON ist ein sprachunabhängiges Datenformat
Veröffentlicht am 28.06.2015 16:03:36 |
Delver_Si Veröffentlicht am 28.6.2015, 16:02 Uhr
JSON ist ein sprachunabhängiges Datenformat

Übertragen Sie die von JS benötigten Daten direkt aus dem Hintergrund im JSON-Format, wie man mit JS umgeht
 Vermieter| Veröffentlicht am 28.06.2015 17:33:24 |
Delver_Si Veröffentlicht am 28.6.2015, 16:03
Übertragen Sie die von JS benötigten Daten direkt aus dem Hintergrund im JSON-Format, wie man mit JS umgeht

Lernen
Veröffentlicht am 29.06.2015 18:56:59 |
Xiao Zhazha veröffentlicht am 28.6.2015, 17:33 Uhr
Lernen

Verzichtserklärung:
Alle von Code Farmer Network veröffentlichten Software, Programmiermaterialien oder Artikel dienen ausschließlich Lern- und Forschungszwecken; Die oben genannten Inhalte dürfen nicht für kommerzielle oder illegale Zwecke verwendet werden, andernfalls tragen die Nutzer alle Konsequenzen. Die Informationen auf dieser Seite stammen aus dem Internet, und Urheberrechtsstreitigkeiten haben nichts mit dieser Seite zu tun. Sie müssen die oben genannten Inhalte innerhalb von 24 Stunden nach dem Download vollständig von Ihrem Computer löschen. Wenn Ihnen das Programm gefällt, unterstützen Sie bitte echte Software, kaufen Sie die Registrierung und erhalten Sie bessere echte Dienstleistungen. Falls es eine Verletzung gibt, kontaktieren Sie uns bitte per E-Mail.
Mail To:help@itsvse.com