Ten artykuł jest lustrzanym artykułem tłumaczenia maszynowego, kliknij tutaj, aby przejść do oryginalnego artykułu.

Architect_Programmer_Code Sieć Rolnicza»Architekt › Programowanie › .Net/C # › Highcharts łączy Asp.net realizację dynamicznych przykładów graficznych obrazów akcji ...
Widok: 23205|Odpowiedź: 6

[ASP.NET] Highcharts łączy Asp.net, aby zrealizować dynamiczne przykłady wykresów giełdowych

[Skopiuj link]
Opublikowano 28.06.2015 00:06:24 | | | |

Specyficznym zastosowaniem tego przykładu jest to, że muszę regularnie odczytywać cenę towaru z bazy danych, a następnie wyświetlać ją na stronie internetowej jako wykres, podobnie jak wykres trendu cen instrumentów handlowych akcji.

Używam asp.net, w połączeniu z implementacją wtyczki Highcharts w jQuery, wtyczka obsługuje wiele typów grafik, ale są statyczne, a podane przykłady trzeba przekształcić, zainteresowani znajomi mogą wejść na oficjalną stronę Highcharts, żeby zobaczyć (http://www.highcharts.com/), która oferuje wiele dem, szczerze mówiąc, żeby zrozumieć moje potrzeby, powinienem użyć Highstock, Jednak po przejrzeniu przykładu dynamicznej aktualizacji Highcharts zauważam też, że mój interfejs wymagań jest bardziej zwięzły, dlatego ten artykuł wykorzystuje model dynamicznej aktualizacji w Highcharts, a typ graficzny to spline. Ostateczna mapa efektów wygląda następująco (cena Pinqijin jest aktualizowana co 10 sekund, a punkt dodawany jest do wykresu liniowego co 10 sekund):

Osiągnij krok do pracy:

Stwórz nową stronę internetową za pomocą VS i stwórz asp.net stronę DynamicUpdate.aspx, a kod strony wygląda następująco:


  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>
Skopiuj kod

Właściwość Highcharts renderuje To oznacza kontenery wyświetlania,

zdarzenia reprezentuje zdarzenie, które kontener musi zarejestrować, gdzie ładowanie oznacza, że następuje ono po zakończeniu ładowania; tutaj w ładowaniu ustawiany jest timer js, który następuje raz na 10 sekund, a kod w nim polega na żądaniu najnowszego GOLD z pliku dataupdate.ashx w folderze ajaxhandler w tym samym katalogu głównym co DynamicUpdate.aspx strona przez ajax w jQuery Dane cenowe tej odmiany, oto dlaczego dodaję randomCode + "=" + oldrandomCode do adresu AJAX, bo dodanie losowej liczby pozwala uniknąć buforowania, a flag=1 wynika z tego, że mój plik dataupdate.ashx chce przyjmować wiele żądań od różnych ajax, więc używam flagi, żeby je odróżnić

xAxis reprezentuje zbiór atrybutów zdefiniowanych dla osi x kontenera, typ reprezentuje wyświetlany typ tekstu, opcjonalnie, tutaj wpisuję typ czasu, tutaj zauważ, że domyślnym dla instancji jest czas GMT, można też użyć czasu UTC, ale my zazwyczaj używamy czasu pekińskiego (GMT lub UTC) + 8 godzin = czas pekiński, więc gdy używamy ajax, aby uzyskać czas czasu pekińskiego, powinniśmy odejmować 8 godzin od godziny (tutaj chcę też podzielić się doświadczeniem, Jak przekształcić czas serwera na czas js, który może być użyty metodą .getTime(), czyli odejmować czas serwera od 1970-1-1, przeliczyć pozostałe dni na milisekundy, a następnie przypisać wartość nowo zainicjalizowanemu czasie za pomocą metody setTime w js. Stwierdziłem, że wynik uzyskany przez getTime() jest nieprawidłowy, aby inicjalizować czas js bezpośrednio w js w postaci nowej daty (rok, miesiąc, dzień, godzina, minuta, sekunda, milisekunda) za pomocą getTime(), Jeśli chodzi o powód, dla którego 1970-1-1 jest odejmowany, to dlatego, że definicja metody getTime() polega na uzyskaniu liczby milisekund od bieżącego czasu z 1970-1-1), gdy oś x nie jest wyświetlana jako czas lub trzeba ją sam zdefiniować, można ją również zdefiniować przez atrybut kategorii, tickPixelInterval oznacza gęstość osi x, a etykiety służą do formatowania formatu wyświetlania osi x

yAxis reprezentuje zbiór atrybutów zdefiniowanych dla osi y kontenera, która jest mniej więcej taka sama jak atrybuty osi x, ale w Highcharts nie jest możliwe zdefiniowanie stałej wartości osi y przez kategorie; oś y w Highcharts jest automatycznie generowana na podstawie danych punktu współrzędnych, które zależą od podatrybutu danych atrybutu szeregowego, na przykład gdy przypisujesz wartość danym Maksymalna wartość to 300, a minimalna 100. Wtedy oś y będzie wyświetlana między 100 a 300, albo możesz też ustawić atrybut max lub min dla osi yAxis

seria reprezentuje zbiór wszystkich krzywych wyświetlanych w kontenerze, tutaj I pokazuje tylko jedną krzywą, nazwa oznacza nazwę krzywej, dane reprezentują zbiór szeregu punktów współrzędnych krzywej, x jest z przodu, y jest za nią, jest to tablica js, w tym przypadku, ponieważ oś x pokazuje czas, więc właściwość x obiektu tablicy musi być ustawiona na czas, ale w Highcharts nie jest bezpośrednio przypisywana do osi x, Zamiast tego liczba milisekund między 1970-1-1 a określonym czasem jest przypisana osi x, aby reprezentować ten czas, więc trzeba użyć metody getTime(), forma punktu współrzędnej osi y musi być y = mała liczba * całkowita forma, i nie rozumiałem, dlaczego Highcharts musiał to robić, bo dane cenowe odmiany w tym przykładzie są zazwyczaj takie same, więc musiałem podzielić przez 200 przy uzyskaniu danych, a następnie pomnożyć przez 200 przy przypisaniu wartości osi y.


<%= jsonstr %> w kodzie strony są dane początkowe, które muszę pobrać z serwera, aby zainicjować wykres, czyli generowanie strony w cs


  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.         }
Skopiuj kod

Wśród nich tabela TabMerPrice to tabela informacji o cenach różnorodności, czas TMPTime, cena TMPPrice, interwał czasowy TMPTime to dziesięć sekund, używam zadania bazodanowego do wygenerowania rekordu tabeli, co dzieje się raz na dziesięć sekund

AddHours(-8) służy do konwersji czasu na czas pekiński, a wygenerowany format danych to json

Kod dataupdate.ashx wygląda tak:


  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.         }
Skopiuj kod

Jest to przybliżona implementacja agregacji krokowej, która pozwala na wyświetlanie danych po stronie serwera w czasie rzeczywistym za pomocą wykresu podobnego do formatu stockowego


HighCharts演示.zip (48.69 KB, Liczba pobranych plików: 1)


Wynik

Liczba uczestników1MB+1 przyczynić się+1 Zapaść powód
Gratulacje dla męskiego boga + 1 + 1 Czy właściciel może podać mi dane kontaktowe? To bardzo pomaga.

Zobacz wszystkie oceny





Poprzedni:Jak wejść w tryb deweloperski dla Androida 4.4.x
Następny:Na podstawie Sina@ funkcji prosty przykład

Powiązane wpisy
Opublikowano 28.06.2015 10:34:21 |
Ten post został ostatnio edytowany przez microxdd 28.06.2015 o 10:35

Szycie sznurków to najbardziej marnotrawny sposób wydajności i można go używać ze StringBuilderem. Zaleca się jednak stosowanie serializacji JSON, która może bezpośrednio konwertować obiekty na ciągi JSON. Może być także zdeserializowany
Polecam bibliotekę ikon Baidu http://echarts.baidu.com/doc/example.html
 Ziemianin| Opublikowano 28.06.2015 10:54:45 |
microxdd opublikowano 2015-6-28 10:34
Szycie sznurków to najbardziej marnotrawny sposób wydajności i można go używać ze StringBuilderem. Zaleca się jednak stosowanie serializacji JSON, która może bezpośrednio konwertować obiekty na ...

Zaletą json jest to, że jest boskim koniem? Słyszałem tylko o tym
Opublikowano 28.06.2015 16:02:07 |
Opublikowano 2015-6-28 10:54
Zaletą json jest to, że jest boskim koniem? Słyszałem tylko o tym

JSON to format danych niezależny od języka
Opublikowano 28.06.2015 16:03:36 |
Delver_Si Opublikowano 2015-6-28 16:02
JSON to format danych niezależny od języka

Bezpośredni transfer danych wymaganych przez JS z tła w formacie JSON, jak radzić sobie z JS
 Ziemianin| Opublikowano 28.06.2015 17:33:24 |
Delver_Si Opublikowano 28.06.2015 o 16:03
Bezpośredni transfer danych wymaganych przez JS z tła w formacie JSON, jak radzić sobie z JS

Nauka
Opublikowano 29.06.2015 18:56:59 |
Xiao Zhazha Opublikowano 2015-6-28 17:33
Nauka

Zrzeczenie się:
Całe oprogramowanie, materiały programistyczne lub artykuły publikowane przez Code Farmer Network służą wyłącznie celom edukacyjnym i badawczym; Powyższe treści nie mogą być wykorzystywane do celów komercyjnych ani nielegalnych, w przeciwnym razie użytkownicy ponoszą wszelkie konsekwencje. Informacje na tej stronie pochodzą z Internetu, a spory dotyczące praw autorskich nie mają z nią nic wspólnego. Musisz całkowicie usunąć powyższą zawartość z komputera w ciągu 24 godzin od pobrania. Jeśli spodoba Ci się program, wspieraj oryginalne oprogramowanie, kup rejestrację i korzystaj z lepszych, autentycznych usług. W przypadku naruszenia praw prosimy o kontakt mailowy.
Mail To:help@itsvse.com