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

Конкретный рынок применения этого примера заключается в том, что мне нужно регулярно читать цену товара из базы данных, а затем отображать её на веб-странице в виде графика, аналогично графику ценового тренда торговых инструментов в акциях.

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

Достичь сбора шагов:

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

Свойство 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 в виде новой Date (год, месяц, день, час, минута, секунда, миллисекунда) с помощью getTime(), Что касается того, почему вычитается 1970-1-1, то это потому, что метод getTime() определяется как получение количества миллисекунд из текущего времени из 1970-1-1), когда ось x не отображается как время или её нужно определить самостоятельно, её также можно определить атрибутом категории, 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-генерации страницы

Среди них таблица TabMerPrice — это таблица информации о ценах сорта, время TMPTime, TMPPice, интервал времени TMPTime — десять секунд, я использую задание базы данных для создания записи таблицы, что происходит раз в десять секунд

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

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

Это примерная реализация шаговой агрегации, которая позволяет реализовывать отображение серверных данных в реальном времени с помощью графика, похожего на стандартный формат

HighCharts演示.zip (48.69 KB, Количество скачиваний: 1)