Тази статия е огледална статия за машинен превод, моля, кликнете тук, за да преминете към оригиналната статия.

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

[ASP.NET] Highcharts комбинира Asp.net, за да реализира динамични примери за график на натрупване на данни

[Копирай линк]
Публикувано в 28.06.2015 г. 0: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-оста на контейнера, type представлява показания тип текст, по желание, тук попълвам времевия тип, тук отбелязвам, че по подразбиране за инстанцията е 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 не се показва като време или трябва да я дефинирате сами, тя може да се дефинира и чрез атрибута категория, tickPixelInterval представлява плътността на оста x, а етикетите се използват за форматиране на формата на дисплея на оста x

yAxis представлява колекция от атрибути, дефинирани за y-оста на контейнера, която е приблизително същата като атрибутите на x-оста, но в Highcharts не е възможно фиксираната стойност на y-оста да се дефинира чрез категории, 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 време, TMPPrice цената, 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.         }
Копирай код

Това е грубата реализация на стъпковото агрегиране, която може да реализира реално време показване на сървърни данни с графика, подобна на стандартния формат


HighCharts演示.zip (48.69 KB, Брой изтегляния: 1)


Резултат

Брой участници1MB+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 публикувано на 28.06.2015 10:34
Шиенето на струни е най-разхищението на производителността и може да се използва със StringBuilder. Въпреки това се препоръчва използването на JSON сериализация, която може директно да преобразува обекти в ...

Предимството на json е, че е божествен кон? Само съм чувал за това нещо
Публикувано в 28.06.2015 г. 16:02:07 ч. |
Публикувано на 28.06.2015 10:54
Предимството на json е, че е божествен кон? Само съм чувал за това нещо

JSON е формат на данни, който е независим от езика
Публикувано в 28.06.2015 г. 16:03:36 ч. |
Delver_Si Публикувано на 28.06.2015 г.
JSON е формат на данни, който е независим от езика

Директно прехвърляне на данните, необходими за JS, от фона в JSON формат, как да се справите с JS
 Хазяин| Публикувано в 28.06.2015 г. 17:33:24 ч. |
Delver_Si Публикувано на 28.06.2015 16:03
Директно прехвърляне на данните, необходими за JS, от фона в JSON формат, как да се справите с JS

Учене
Публикувано в 29.06.2015 г. 18:56:59 ч. |
Xiao Zhazha Публикувано на 28.06.2015 17:33
Учене

Отричане:
Целият софтуер, програмни материали или статии, публикувани от Code Farmer Network, са само за учебни и изследователски цели; Горното съдържание не трябва да се използва за търговски или незаконни цели, в противен случай потребителите ще понесат всички последствия. Информацията на този сайт идва от интернет, а споровете за авторски права нямат нищо общо с този сайт. Трябва напълно да изтриете горното съдържание от компютъра си в рамките на 24 часа след изтеглянето. Ако ви харесва програмата, моля, подкрепете оригинален софтуер, купете регистрация и получете по-добри услуги. Ако има нарушение, моля, свържете се с нас по имейл.
Mail To:help@itsvse.com