Ця стаття є дзеркальною статтею машинного перекладу, будь ласка, натисніть тут, щоб перейти до оригінальної статті.

Architect_Programmer_Code Сільськогосподарська мережа»Архітектор › Програмування › .Net/C # › Highcharts поєднує Asp.net для реалізації динамічних графічних прикладів відображення запасів даних ...
Вид: 23205|Відповідь: 6

[ASP.NET] Highcharts поєднує Asp.net для реалізації динамічних прикладів відображення графіків запасу даних

[Копіювати посилання]
Опубліковано 28.06.2015 00:06:24 | | | |

Конкретний прикладний ринок для цього прикладу полягає в тому, що мені потрібно регулярно читати ціну товару з бази даних, а потім відображати її на веб-сторінці у вигляді графіка, подібно до графіка тренду цін у торгових інструментах у акціях.

Я використовую asp.net, у поєднанні з реалізацією плагіна Highcharts у jQuery, плагін підтримує багато типів графіки, але вони статичні, і наведені приклади потрібно трансформувати, зацікавлені друзі можуть зайти на офіційний сайт Highcharts (http://www.highcharts.com/), де є багато демонстрацій, чесно кажучи, щоб реалізувати мої потреби, мені слід скористатися Highstock, Однак, розглянувши приклад з динамічним оновленням Highcharts, я також розумію, що інтерфейс вимог більш лаконічний, тому в цій статті використовується модель динамічного оновлення у Highcharts, а графічний тип — сплайн. Остаточна карта ефектів виглядає так: ціна Pinqijin оновлюється кожні 10 секунд, а точка додається на лінійний графік кожні 10 секунд):

Досягніть швидкого збіру кроків:

Створіть новий вебсайт за допомогою VS і створіть asp.net сторінку DynamicUpdate.aspx, код сторінки виглядає так:


  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>
Копія коду

Властивість Highcharts renderTo позначає контейнери для відображення,

Події представляють подію, яку контейнер має зареєструвати, де завантаження означає, що воно відбувається після завершення завантаження, тут у завантаженні встановлюється таймер js, який відбувається раз на 10 секунд, а код у ньому має запит останнього GOLD з файлу dataupdate.ashx папки ajaxhandler у тому ж кореневому каталозі, що й сторінка DynamicUpdate.aspx, через ajax у jQuery Цінові дані цього типу: ось чому я додаю randomCode + "=" + oldrandomCode у ajax URL, бо додавання випадкового числа дозволяє уникнути кешування, а flag=1 — бо мій dataupdate.ashx файл хоче приймати кілька запитів від різних ajax, тому використовуйте flag для розрізнення

xAxis позначає набір атрибутів, визначених для осі x контейнера, тип — відображений тип тексту, опціонально, тут я вводжу тип часу, тут звертаю увагу, що за замовчуванням для інстансу — час GMT, також можна використовувати UTC-час, але ми зазвичай використовуємо пекінський час (GMT або UTC) + 8 годин = пекінський час, тому коли ми використовуємо ajax для отримання часу — це пекінський час, слід віднімати 8 годин із години (тут я також хочу поділитися досвідом, Як перетворити серверний час у час js, який може використовуватися методом .getTime(), тобто відняти час сервера з 1970-1-1, перетворити решту днів у мілісекунди, а потім присвоїти значення новоініціалізованому часу через метод setTime у js. Я виявив, що результат, отриманий getTime(), є неправильним для ініціалізації часу js безпосередньо в js у вигляді нової дати (рік, місяць, день, година, хвилина, секунда, мілісекунда) з getTime(), Щодо того, чому 1970-1-1 віднімається, це тому, що визначення методу getTime() полягає в отриманні кількості мілісекунд від поточного часу з 1970-1-1), коли вісь x не відображається як час або потрібно визначити її самостійно, її також можна визначити атрибутом categories, tickPixelInterval позначає щільність осі x, а мітки використовуються для форматування формату відображення осі x

yAxis представляє набір атрибутів, визначених для осі y контейнера, які приблизно збігаються з атрибутами осі x, але в Highcharts неможливо визначити фіксоване значення осі y через категорії, вісь Highcharts автоматично генерується на основі даних координатної точки, що залежить від підатрибута атрибута серії, наприклад, коли ви присвоюєте значення даним Максимальне значення — 300, а мінімальне — 100. Тоді відображення осі y буде між 100 і 300, або ви також можете встановити максимальний або мінімальний атрибут осі yAxis

Серія представляє колекцію всіх кривих, що відображаються в контейнері, тут я показую лише одну криву, ім'я позначає назву кривої, дані — сукупність ряду координатних точок кривої, x — попереду, y — позаду, це js-масив, у цьому випадку, оскільки вісь x показує час, тому властивість x масиву має бути встановлена на час, але у Highcharts це не призначено час безпосередньо осі x, Натомість кількість мілісекунд між 1970-1-1 і певним часом призначається осі x для представлення цього часу, тому потрібно використовувати метод getTime(), форма координатної точки осі y має бути y = мале число * ціле число, і я не розумів, чому Highcharts так робить, бо дані про ціни різноманіття в цьому прикладі зазвичай приблизно однакові, тому мені довелося ділити на 200 при отриманні даних, а потім множити на 200 при призначенні значення осі y.


<%= jsonstr %> у коді сторінки — це початкові дані, які мені потрібно отримати з сервера для ініціалізації графа, тобто генерації сторінки на 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.         }
Копія коду

Серед них таблиця TabMerPrice — це таблиця інформації про різновид, час TMPTime, ціна TMPP, інтервал часу TMPTime — десять секунд, я використовую завдання бази даних для створення запису таблиці, що відбувається раз на десять секунд

AddHours(-8) призначений для конвертації часу у пекінський час, а формат генерованих даних — json формат

Код dataupdate.ashx виглядає так:


  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.         }
Копія коду

Це приблизна реалізація агрегації кроків, яка дозволяє реалізувати відображення серверних даних у реальному часі за допомогою графіка, схожого на формат stock


HighCharts演示.zip (48.69 KB, Кількість завантажень: 1)


Забити

Кількість учасників1МБ+1 Сприяють+1 Колапс причина
Чоловічий бог, вітаю + 1 + 1 Чи може орендодавець надати мені контактну інформацію? Це дуже допоможе.

Переглянути всі рейтинги





Попередній:Як перейти в режим розробника для Android 4.4.x
Наступний:На основі Sina@ функції простий приклад

Пов'язані дописи
Опубліковано 28.06.2015 10:34:21 |
Цей допис востаннє відредаговано microxdd 2015-6-28 10:35

Вишивання струн — це найменш витратний спосіб продуктивності, і його можна використовувати з StringBuilder. Однак рекомендується використовувати серіалізацію JSON, яка дозволяє безпосередньо конвертувати об'єкти у рядки JSON. Його також можна десеріалізувати
Рекомендую бібліотеку іконок Baidu http://echarts.baidu.com/doc/example.html
 Орендодавець| Опубліковано 28.06.2015 10:54:45 |
microxdd опубліковано 2015-6-28 10:34
Вишивання струн — це найменш витратний спосіб продуктивності, і його можна використовувати з StringBuilder. Однак рекомендується використовувати серіалізацію JSON, яка може безпосередньо перетворювати об'єкти на ...

Перевага json у тому, що це божественний кінь? Я лише чув про цю штуку
Опубліковано 28.06.2015 16:02:07 |
Опубліковано 2015-6-28 10:54
Перевага json у тому, що це божественний кінь? Я лише чув про цю штуку

JSON — це формат даних, який не залежить від мови
Опубліковано 28.06.2015 16:03:36 |
Delver_Si Опубліковано 2015-6-28 16:02
JSON — це формат даних, який не залежить від мови

Безпосередньо перенесіть необхідні для JS дані з фону у форматі JSON, як працювати з JS
 Орендодавець| Опубліковано 28.06.2015 17:33:24 |
Delver_Si Опубліковано 2015-6-28 16:03
Безпосередньо перенесіть необхідні для JS дані з фону у форматі JSON, як працювати з JS

Навчання
Опубліковано 29.06.2015 18:56:59 |
Сяо Чжажа Опубліковано 2015-6-28 17:33
Навчання

Застереження:
Усе програмне забезпечення, програмні матеріали або статті, опубліковані Code Farmer Network, призначені лише для навчання та досліджень; Вищезазначений контент не повинен використовуватися в комерційних чи незаконних цілях, інакше користувачі несуть усі наслідки. Інформація на цьому сайті надходить з Інтернету, і спори щодо авторських прав не мають до цього сайту. Ви повинні повністю видалити вищезазначений контент зі свого комп'ютера протягом 24 годин після завантаження. Якщо вам подобається програма, будь ласка, підтримуйте справжнє програмне забезпечення, купуйте реєстрацію та отримайте кращі справжні послуги. Якщо є будь-яке порушення, будь ласка, зв'яжіться з нами електронною поштою.
Mail To:help@itsvse.com