Artikel ini adalah artikel cermin dari terjemahan mesin, silakan klik di sini untuk melompat ke artikel aslinya.

Jaringan Pertanian Architect_Programmer_Code»Arsitek › Pemrograman › .Net/C # › Highcharts menggabungkan Asp.net untuk mewujudkan contoh tampilan grafis stok data dinamis ...
Melihat: 23205|Jawab: 6

[ASP.NET] Highcharts menggabungkan Asp.net untuk mewujudkan contoh tampilan grafik stok data dinamis

[Salin tautan]
Diposting pada 28/06/2015 00.06.24 | | | |

Pasar aplikasi khusus untuk contoh ini adalah bahwa saya perlu membaca harga komoditas dari database secara teratur, dan kemudian menampilkannya di halaman web sebagai grafik, mirip dengan grafik tren harga instrumen perdagangan saham.

Saya menggunakan asp.net, dikombinasikan dengan implementasi plugin Highcharts di jQuery, plugin dapat mendukung banyak jenis grafik, tetapi statis, dan contoh yang diberikan perlu diubah, teman-teman yang tertarik dapat mengunjungi situs web resmi Highcharts untuk melihat (http://www.highcharts.com/), yang menyediakan banyak demo, sejujurnya, untuk mewujudkan kebutuhan saya, saya harus menggunakan Highstock, Namun, setelah melihat contoh pembaruan dinamis Highcharts, saya juga dapat menyadari bahwa antarmuka persyaratan saya lebih ringkas, jadi artikel ini menggunakan model pembaruan dinamis di Highcharts, dan jenis grafisnya adalah spline. Peta efek terakhir adalah sebagai berikut (harga Pinqijin diperbarui setiap 10 detik, dan satu titik ditambahkan ke grafik garis setiap 10 detik):

Mencapai pengumpulan langkah:

Buat situs web baru dengan VS dan buat halaman asp.net DynamicUpdate.aspx, kode halamannya adalah sebagai berikut:


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

Highcharts properti renderTo menunjukkan kontainer tampilan,

events mewakili peristiwa yang perlu didaftarkan oleh kontainer, di mana pemuatan berarti terjadi setelah pemuatan selesai, di sini pengatur waktu js diatur dalam pemuatan, yang terjadi setiap 10 detik sekali, dan kode di dalamnya adalah untuk meminta GOLD terbaru dari file dataupdate.ashx dari folder ajaxhandler di direktori root yang sama dengan halaman DynamicUpdate.aspx melalui ajax di jQuery Data harga varietas, inilah mengapa saya menambahkan randomCode + "=" + oldrandomCode di URL ajax karena menambahkan angka acak dapat menghindari caching, dan flag=1 karena file dataupdate.ashx saya ingin menerima banyak permintaan dari ajax yang berbeda, jadi gunakan flag untuk membedakannya

xAxis mewakili kumpulan atribut yang ditentukan untuk sumbu x kontainer, jenis mewakili jenis teks yang ditampilkan, opsional, di sini saya mengisi jenis waktu, di sini perhatikan bahwa default untuk instance adalah waktu GMT, Anda juga dapat menggunakan waktu UTC, tetapi kami umumnya menggunakan waktu Beijing, (GMT atau UTC) + 8 jam = waktu Beijing, jadi ketika kami menggunakan ajax untuk mendapatkan waktu adalah waktu Beijing, kami harus mengurangi 8 jam dari jam (di sini saya juga ingin berbagi pengalaman, Cara mengonversi waktu server ke waktu js yang dapat digunakan dengan metode .getTime(), yaitu mengurangi waktu server dari 1970-1-1, mengonversi hari yang tersisa menjadi milidetik, lalu menetapkan nilai ke waktu yang baru diinisialisasi melalui metode setTime di js, saya menemukan bahwa hasil yang diperoleh oleh getTime() salah untuk menginisialisasi waktu js secara langsung di js dalam bentuk Tanggal baru (tahun, bulan, hari, jam, menit, detik, milidetik) dengan getTime(), Adapun mengapa 1970-1-1 dikurangi, itu karena definisi metode getTime() adalah untuk mendapatkan jumlah milidetik dari waktu saat ini dari 1970-1-1), ketika sumbu x tidak ditampilkan sebagai waktu atau Anda perlu mendefinisikannya sendiri, itu juga dapat didefinisikan oleh atribut kategori, tickPixelInterval mewakili kepadatan sumbu x, dan label digunakan untuk memformat format tampilan sumbu x

yAxis mewakili kumpulan atribut yang ditentukan untuk sumbu y kontainer, yang kira-kira sama dengan atribut sumbu x, tetapi di Highcharts tidak mungkin untuk menentukan nilai tetap sumbu y melalui kategori, sumbu y Highcharts secara otomatis dihasilkan berdasarkan data titik koordinat yang diberikan, yang bergantung pada sub-atribut data dari atribut seri, misalnya, ketika Anda menetapkan nilai ke data Nilai maksimum adalah 300, dan nilai minimum adalah 100. Kemudian tampilan sumbu y akan berada di antara 100 dan 300, atau Anda juga dapat mengatur atribut max atau min dari yAxis

seri mewakili kumpulan semua kurva yang ditampilkan dalam wadah, di sini saya hanya menunjukkan satu kurva, nama mewakili nama kurva, data mewakili kumpulan serangkaian titik koordinat kurva, x di depan, y di belakang, itu adalah array js, dalam hal ini, karena sumbu x menunjukkan waktu, jadi properti x dari objek array harus diatur ke waktu, tetapi di Highcharts tidak secara langsung ditetapkan waktu ke sumbu x, Sebagai gantinya, jumlah milidetik antara 1970-1-1 dan waktu tertentu ditetapkan ke sumbu x untuk mewakili waktu ini, jadi metode getTime() harus digunakan, bentuk titik koordinat sumbu y harus y = bilangan kecil * bentuk bilangan bulat, dan saya tidak mengerti mengapa Highcharts harus melakukan ini, karena data harga varietas dalam contoh ini umumnya hampir sama, jadi saya harus membagi dengan 200 saat mendapatkan data, dan kemudian mengalikan dengan 200 saat menetapkan nilai ke sumbu y.


<%= jsonstr %> dalam kode halaman adalah data awal yang perlu saya dapatkan dari server untuk menginisialisasi grafik, generasi cs halaman


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

Diantaranya, tabel TabMerPrice adalah tabel informasi harga variasi, waktu TMPime, harga TMPPrice, interval waktu TMPTime adalah sepuluh detik, saya menggunakan pekerjaan database untuk menghasilkan catatan tabel, yang terjadi setiap sepuluh detik sekali

AddHours(-8) adalah untuk mengonversi waktu ke waktu Beijing, dan format data yang dihasilkan adalah format json

Kode dataupdate.ashx terlihat seperti ini:


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

Ini adalah implementasi kasar dari agregasi langkah, yang dapat mewujudkan tampilan real-time data sisi server dengan grafik yang mirip dengan format stok


HighCharts演示.zip (48.69 KB, Jumlah unduhan: 1)


Skor

Jumlah peserta1MB+1 sumbang+1 Roboh alasan
Selamat dewa laki-laki + 1 + 1 Bisakah pemilik memberi saya informasi kontak, itu sangat membantu

Lihat semua penilaian





Mantan:Cara masuk ke mode pengembang untuk Android 4.4.x
Depan:Berdasarkan Sina@ fungsi contoh sederhana

Pos terkait
Diposting pada 28/06/2015 10.34.21 |
Posting ini terakhir diedit oleh microxdd pada 2015-6-28 10:35

Menjahit senar adalah kinerja yang paling boros dan dapat digunakan dengan StringBuilder. Namun, disarankan untuk menggunakan serialisasi JSON, yang dapat langsung mengonversi objek menjadi string JSON. Itu juga dapat dideserialisasi
Rekomendasikan perpustakaan ikon Baidu http://echarts.baidu.com/doc/example.html
 Tuan tanah| Diposting pada 28/06/2015 10.54.45 |
microxdd Posted on 2015-6-28 10:34
Menjahit senar adalah kinerja yang paling boros dan dapat digunakan dengan StringBuilder. Namun, disarankan untuk menggunakan serialisasi JSON, yang dapat langsung mengubah objek menjadi ...

Keuntungan dari json adalah bahwa itu adalah kuda ilahi? Saya baru mendengar tentang hal ini
Diposting pada 28/06/2015 16.02.07 |
Diterbitkan pada 2015-6-28 10:54
Keuntungan dari json adalah bahwa itu adalah kuda ilahi? Saya baru mendengar tentang hal ini

JSON adalah format data yang agnostik bahasa
Diposting pada 28/06/2015 16.03.36 |
Delver_Si Dipaparkan pada 2015-6-28 16:02
JSON adalah format data yang agnostik bahasa

Langsung mentransfer data yang dibutuhkan JS dari latar belakang dalam format JSON, cara menangani JS
 Tuan tanah| Diposting pada 28/06/2015 17.33.24 |
Delver_Si Dipaparkan pada 2015-6-28 16:03
Langsung mentransfer data yang dibutuhkan JS dari latar belakang dalam format JSON, cara menangani JS

Pembelajaran
Diposting pada 29/06/2015 18.56.59 |
Xiao Zhazha Dipaparkan pada 2015-6-28 17:33
Pembelajaran

Sanggahan:
Semua perangkat lunak, materi pemrograman, atau artikel yang diterbitkan oleh Code Farmer Network hanya untuk tujuan pembelajaran dan penelitian; Konten di atas tidak boleh digunakan untuk tujuan komersial atau ilegal, jika tidak, pengguna akan menanggung semua konsekuensi. Informasi di situs ini berasal dari Internet, dan sengketa hak cipta tidak ada hubungannya dengan situs ini. Anda harus sepenuhnya menghapus konten di atas dari komputer Anda dalam waktu 24 jam setelah pengunduhan. Jika Anda menyukai program ini, harap dukung perangkat lunak asli, pembelian pendaftaran, dan dapatkan layanan asli yang lebih baik. Jika ada pelanggaran, silakan hubungi kami melalui email.
Mail To:help@itsvse.com