Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Architect_Programmer_Code Tarım Ağı»Mimar › Programlama › .Net/C # › Highcharts, dinamik verileri gerçekleştirmek için Asp.net birleştirir, stok grafik ekran örnekleri ...
Görünüm: 23205|Yanıt: 6

[ASP.NET] Highcharts, dinamik veri stok grafik görüntüleme örnekleri oluşturmak için Asp.net birleştirir

[Bağlantıyı kopyala]
Yayınlandı 28.06.2015 00:06:24 | | | |

Bu örnek için özel uygulama piyasası, bir emtianın fiyatını veritabanından düzenli olarak okumam ve ardından bunu web sayfasında grafik olarak göstermem, hisse senetlerindeki işlem araçlarının fiyat trend grafiğine benzer şekilde.

asp.net kullanıyorum, jQuery'deki Highcharts eklentisi uygulamasıyla birleşince, eklenti birçok tür grafiki destekleyebiliyor ama bunlar statik ve verilen örneklerin dönüştürülmesi gerekiyor, ilgilenen arkadaşlar Highcharts resmi web sitesine gidip (http://www.highcharts.com/) görebilir, dürüst olmak gerekirse, ihtiyaçlarımı anlamak için Highstock kullanmalıyım, Ancak, Highcharts'ın dinamik güncelleme örneğine baktıktan sonra, gereksinim arayüzümün daha özlü olduğunu fark ettim; bu makale Highcharts'ta dinamik güncelleme modelini kullanıyor ve grafik tipi spline'dır. Son etki haritası şöyledir (Pinqijin fiyatı her 10 saniyede bir güncellenir ve çizgi grafiğe her 10 saniyede bir puan eklenir):

Adım toplama yeteneğini gerçekleştirin:

VS ile yeni bir web sitesi oluşturun ve asp.net bir sayfa oluşturun DynamicUpdate.aspx, sayfa kodu şu şekildedir:


  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>
Kopya kodu

Highcharts özelliği renderTo gösteri konteynerlerini gösterir,

Olaylar, konteynerin kaydetmesi gereken olayı temsil eder; yük, yükleme tamamlandıktan sonra gerçekleşir demektir; burada yük içinde bir js zamanlayıcısı ayarlanır ve bu her 10 saniyede bir gerçekleşir ve içindeki kod, jQuery'deki DynamicUpdate.aspx sayfasının kök dizinindeki ajaxhandler klasörünün dataupdate.ashx dosyasından en son GOLD'u talep etmektir Fiyat verileri, ajax URL'sine randomCode + "=" + oldrandomCode eklememin nedeni rastgele sayı eklemenin önbelleğe alınması için ve flag=1 ise, dataupdate.ashx dosyamın farklı ajax'ten birden fazla isteği kabul etmek istemesi, bu yüzden bayrak kullanarak ayırt etmem

xAxis, konteynerin x ekseni için tanımlanmış özellikler koleksiyonunu temsil eder, type ise gösterilen metin tipini temsil eder, isteğe bağlı, burada zaman tipini dolduruyorum, burada belirtmek gerekir ki örnek için varsayılan olarak GMT saati, UTC saati de kullanılabilir, ama genellikle Pekin saati (GMT veya UTC) + 8 saat = Pekin saati kullanırız, bu yüzden ajax kullanarak Pekin saati olduğunu aldığımızda, saatten 8 saat çıkarmalıyız (burada ayrıca bir deneyim paylaşmak istiyorum, .getTime() yöntemiyle kullanılabilecek sunucu zamanını js zamanına nasıl dönüştürürüm, yani sunucu zamanını 1970-1-1'den çıkarmak, kalan günleri milisaniyelere çevirmek ve ardından setTime yöntemiyle yeni başlatılan zamana bir değer atanmak, getTime() tarafından elde edilen sonucun, yeni Tarih (yıl, ay, gün, saat, dakika, saniye, milisaniye) şeklinde js zamanını doğrudan js'de başlatmak için getTime() ile doğru olduğunu gördüm, 1970-1-1'in neden çıkarıldığına gelince, getTime() yönteminin tanımının 1970-1-1 arasındaki mevcut zamandan milisaniye sayısını elde etmek olmasıdır, x-ekseni zaman olarak gösterilmediğinde veya kendiniz tanımlamanız gerektiğinde, kategoriler özniteliğiyle de tanımlanabilir, tickPixelInterval x ekseninin yoğunluğunu temsil eder ve etiketler x ekseninin görüntü formatını biçimlendirmek için kullanılır

yAxis, konteynerin y ekseni için tanımlanmış bir öznitelik koleksiyonunu temsil eder; bu özellik x ekseninin özellikleriyle yaklaşık olarak aynıdır, ancak Highcharts'ta y ekseninin sabit değerini kategoriler aracılığıyla tanımlamak mümkün değildir, Highcharts'ın y ekseni, verilen koordinat noktası verisine göre otomatik olarak üretilir ve bu da seri özniteliğinin veri alt özniteliğine bağlıdır; örneğin, veriye bir değer ataydığınızda maksimum değer 300, minimum değer ise 100'dür. O zaman y ekseninin görüntülenmesi 100 ile 300 arasında olur ya da yAxis'in maksimum veya minimum özelliğini de ayarlayabilirsiniz

seri, konteynerde gösterilen tüm eğrilerin koleksiyonunu temsil eder, burada sadece bir eğri gösteriyorum, isim eğrinin adını, veri eğrinin bir dizi koordinat noktasının toplanmasını temsil eder, x önde, y arkada, bu bir js dizisi, bu durumda x ekseni zamanı gösterdiği için dizi nesnesinin x özelliği zamana ayarlanmalıdır, ancak Highcharts'ta bu doğrudan x eksenine zaman atanmaz, Bunun yerine, 1970-1-1 ile belirli bir zaman arasındaki milisaniye sayısı bu zamanı temsil etmek için x eksenine atanır, bu yüzden getTime() yöntemi kullanılmalıdır, y ekseni koordinat noktasının formu y = küçük sayı * tam sayı formu olmalı ve neden Highcharts'ın bunu yapması gerektiğini anlamadım, çünkü bu örnekteki çeşitliliğin fiyat verileri genellikle yaklaşık aynıdır, bu yüzden veriyi elde ederken 200'e bölmem ve y eksenine değer atarken 200'e çarpmam gerekti.


<%= jsonstr %> sayfa kodundaki grafiği başlatmak için sunucudan almam gereken ilk veri, sayfanın cs üretimi


  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.         }
Kopya kodu

Bunlar arasında, TabMerPrice tablosu çeşitlilik fiyat bilgi tablosu, TMPTime zamanı, TMPPrice fiyatı, TMPTime zaman aralığı on saniyedir, tablonun kaydını oluşturmak için veritabanı işi kullanıyorum ve bu her on saniyede bir gerçekleşiyor

AddHours(-8) zamanı Pekin zamanına dönüştürmek için kullanılır ve oluşturulan veri formatı json formatındadır

dataupdate.ashx kodu şöyle görünüyor:


  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.         }
Kopya kodu

Bu, servis tarafı verilerin gerçek zamanlı görüntülenmesini stok formata benzer bir grafikle gerçekleştirebilen step aggregation'un kaba uygulamasıdır


HighCharts演示.zip (48.69 KB, İndirme sayısı: 1)


Puan

Katılımcı sayısı1MB+1 Katkı+1 Çökmek sebep
Erkek tanrı tebrikler + 1 + 1 Ev sahibi bana iletişim bilgilerini verebilir mi, çok yardımcı oluyor

Tüm puanları gör





Önceki:Android 4.4.x için geliştirici moduna nasıl girilir
Önümüzdeki:Basit Sina@ fonksiyon örneğine dayanarak

İlgili Yazılar
Yayınlandı 28.06.2015 10:34:21 |
Bu gönderi en son microxdd tarafından 2015-6-28 10:35 tarihinde düzenlenmiştir

Tel dikmek en israflı performans yöntemidir ve StringBuilder ile kullanılabilir. Ancak, nesneleri doğrudan JSON dizlerine dönüştürebilen JSON serileştirme kullanımı önerilir. Ayrıca seri dışı bırakılabilir
Baidu icon library öneririm http://echarts.baidu.com/doc/example.html
 Ev sahibi| Yayınlandı 28.06.2015 10:54:45 |
microxdd 2015-6-28 10:34 tarihinde yayınlandı
Tel dikmek en israflı performans yöntemidir ve StringBuilder ile kullanılabilir. Ancak, nesneleri doğrudan ...

JSON'un avantajı, onun ilahi bir at olması? Bu şeyi sadece duydum
Yayınlandı 28.06.2015 16:02:07 |
2015-6-28 10:54 tarihinde yayımlandı
JSON'un avantajı, onun ilahi bir at olması? Bu şeyi sadece duydum

JSON, dil bağımsız bir veri formatıdır
Yayınlandı 28.06.2015 16:03:36 |
Delver_Si 2015-6-28 16:02 tarihinde yayınlandı
JSON, dil bağımsız bir veri formatıdır

JS için gereken verileri arka plandan JSON formatında doğrudan aktarmak, JS ile nasıl başa çıkılır
 Ev sahibi| Yayınlandı 28.06.2015 17:33:24 |
Delver_Si 2015-6-28 16:03 tarihinde yayınlandı
JS için gereken verileri arka plandan JSON formatında doğrudan aktarmak, JS ile nasıl başa çıkılır

Öğrenme
Yayınlandı 29.06.2015 18:56:59 |
Xiao Zhazha 2015-6-28 17:33 tarihinde yayınlandı
Öğrenme

Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.
Mail To:help@itsvse.com