Рисуйте графики данных с датчиков, подключенных к Интернету вещей (IoT), с помощью SVG.

В этой статье из серии о представление графиков данных в IoT Я объясняю, как строить графики с помощью язык SVG. Как и в других случаях, статья также служит кратким введением в язык.

Формат SVG

SVG соответствует аббревиатуре Scalable Vector Graphics (масштабируемая векторная графика, на английском языке). Это язык разметки que se basa en XML и это позволяет, главным образом, описывать рисунок посредством определяющей его геометрии; в отличие от матричного метода, используемого, например, для фотографии, в котором для ее кодирования используется сетка цветных пикселей.

внутри рисунка SVG Также может быть включено изображение (матрица пикселей), либо ссылающееся на внешний документ, либо встроенное в сам рисунок. SVG.

Языковая версия, актуальная на момент написания этой статьи, — это СВГ 1.1 хотя определение версии уже разрабатывается СВГ 2. Насколько это возможно, я постараюсь сделать то, что объяснено во введении, даже если оно относится к СВГ 1.1 также служить для СВГ 2.

Если рисунок SVG Он включен в отдельный документ, а не в код. HTML (мое предложение в этом решении для представления данных IoT встраивает их в код HTML) должен начинаться со ссылки XML y una определение типа документа (DTD).

В первой строке предыдущего кода указывается версия. XML использованная (1.0) кодировка символов (UTF-8) и указывает, нужны ли вам внешние определения (standalone="no") или это отдельный документ (standalone="yes"). Вторая строка выражает определение типа документа (DTD), который не понадобится в следующей версии SVG.

Код, которым определен чертеж, заключен между метками. <sgv> y </sgv> которые также указывают, как уже говорилось, когда речь шла о HTML-код, который действует как контейнер для графиков данных в Интернете вещей., размеры, представленная часть общего количества, пропорция, а также тип и версия.

В приведенном выше примере определяется рисунок шириной 500 пикселей и высотой 250 пикселей (область просмотра 500x250), который будет обрезан прямоугольником 460x80 (окно просмотра 460x80), начиная с координат 20,10, используя все доступное пространство в контейнере (элемент на веб-странице, в наш случай) без соблюдения исходной пропорции использования preserveAspectRatio="none". Кроме того, теперь можно увидеть первое содержимое документа, комментарии, входящие в <!-- y --> как и в других форматах на основе XML.

Система координат, выбранная SVG Он ориентирован горизонтально (ось X) и вертикально (ось Y) и положительное направление соответствует западному письму, то есть значения оси X растут вправо, а положительные значения оси Y растут. вниз.

Определите график с помощью SVG

Чтобы определить графику информации, хранимой нашими датчиками, подключенными к Интернету вещей, нам нужно будет указать тип рисуемого объекта, его геометрию (координаты, размеры...) и его внешний вид (толщина, цвет...). пример этой статьи: линейный график, который можно построить, соединив сегменты линий с объектом. line, наиболее полезен для построения независимых элементов или многосегментной линии, объекта path, более практично для серии соединенных линий.

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

Для описания строки используется выражение типа:

В котором X1,Y1 — координаты первой точки на прямой, а X2,Y2 — координаты второй. Был использован атрибут stroke-width определить толщину. Существует несколько способов определения внешнего вида объектов. SVG, с его отдельными свойствами, как предыдущий, или со свойством style который объединяет их всех и какой метод будет использоваться в предложении статьи.

Приведенный выше код присоединяется к свойству style ценности stroke (цвет штриха), stroke-width (толщина линии) и stroke-opacity (непрозрачность объекта)

Описание объекта path имеет форму

В приведенном выше коде используются операции SVG M, L y Z внутри собственности d, что означает соответственно «moveto» (перейти к), «lineto» (линия к) и «closepath» (закрыть путь). Они могут быть выражены в верхнем или нижнем регистре, чтобы указать абсолютное или относительное значение, где это необходимо (в случае Zнапример, не имеет значения). Есть много других операций, с помощью которых мы можем, например, рисовать круговые кривые, эллиптические кривые, кривые Безье... которые нам не понадобятся в этом примере.

Хотя это предложение рисует линейные графики, которые могут ограничивать область, может быть полезно нарисовать другие простые элементы для обозначения точек или выделения областей. Из имеющихся в SVG Интересными могут быть полигоны (с помощью которых тоже можно рисовать заливку), прямоугольники (более удобные для конкретного случая), эллипсы и круги (как частный случай эллипсов). Синтаксис этих элементов можно увидеть в следующем примере кода.

Внешний вид предыдущего кода будет похож на следующее изображение (с некоторой хитростью, позволяющей повторно использовать точки из примера выше).

Точки многоугольника (polygon) указаны в свойстве points как пары координат x,y, разделенные пробелами между ними. Чтобы определить эллипсы (ellipse) используются свойства cx (координата x центра), cy (координата y центра), rx (ширина) и ry (высокий). Вместо двух значений радиуса (горизонтального и вертикального радиуса, rx y ry) круг (circle) определяется радиусом со свойством r и координаты центра с cx y cy. Чтобы определить прямоугольник (rectangle) указаны координаты верхнего левого угла (x e y) Ширина (width) и высокий (height)

Наконец, чтобы включить текст, используется объект text следующим образом:

Положение текста указывается координатами x и y, шрифт соответствует свойству font-family, размер с font-size и цвет со свойством fill.

HTML позволяет интегрировать чертежи SVG как еще один элемент страницы. Как и другие объекты, вы можете использовать свойство ID присвоить им уникальный идентификатор, по которому к ним затем можно будет обращаться из JavaScript манипулировать ими. С точки зрения HTML, объект SVG будет иметь следующий вид:

С учетом того, что мы видели до сих пор, можно было бы нарисовать тип базового графа, который требуется в этом предложении, но для придания гибкости внешнему виду контейнера (веб-страницы) будет затронута пропорция графа. (например preserveAspectRatio="none"), изменив его размер, чтобы адаптировать его к расположению элементов в окне браузера. HTML.

Вообще говоря, существует две альтернативы поведению при изменении размера окна браузера, в котором отображается веб-страница, содержащая диаграмму: (1) сохранить размер диаграммы. SVG оставляя пустое пространство, если оно лишнее, или добавляя полосы прокрутки, если оно отсутствует, или (2) изменить размер графика SVG ритмично изменять размер окна браузера, в котором отображается Интернет. Если вы выберете первую формулу, вы сможете прогнозировать величины и рисовать с абсолютными измерениями, хотя и с поправкой на основе выбранного размера и значений графика. Если вы выберете второй путь, который я предлагаю, величины всегда будут представлять собой проценты от представленных значений. Преимущество второго метода — его адаптируемость к сети, а недостатком — прорисовка элементов, сопровождающих график, например точек или текста.

Для исправления деформации, которая могла возникнуть в толщине линий, используется эффект. vector-effect="non-scaling-stroke" на маршрутах, которые необходимы (те, которые имеют значение stroke Кроме как none). Для объектов text Сопоставимого эффекта нет, поэтому необходимо деформировать их (вместе со связанными с ними) в сторону, противоположную той, которую дает изменение размера контейнера.

Преобразования в SVG Их можно применять к группам объектов, чтобы несколько текстов и других объектов на графике можно было объединить в одну группу и, что более удобно, выполнить преобразование для них всех.

Элементы, входящие в группу, включаются в теги. <g> y </g>, для назначения преобразования используется свойство transform и ряд операций, которые для нашего случая актуальны scale, для которого указан коэффициент увеличения по горизонтали и вертикали. Если значение scale больше единицы расширяет соответствующую ось, а если меньше единицы, происходит уменьшение размера объектов вдоль этой оси.

В предыдущем примере первый и второй текст изменяются путем уменьшения вдвое их горизонтального размера и удвоения вертикального размера на значения 0.5 и 2.0, используемые в scale(0.5,2.0)

Следующая статья из серии о представление графиков данных с датчиков, подключенных к Интернету вещей объясняет, как создавать или изменять графики в реальном времени, используя JavaScript что позволит вам увидеть анимацию графика при представлении последних значений, загруженных с сервера.

Ниже приведен пример того, как будут выглядеть графики, созданные с использованием этого предложения.