Web server. Создание графика(и)

Первое что понадобиться, помнить о том пока к символу дописывается лишний, графика svg в html не выводится.
Для этого используем следующее решение. В коду HTML все двойные кавычки меняются на одинарные.
По правилу они допустимы как альтернатива двойным.

Рассмотрим простой вариант:

Тегом svg даем знать браузеру о начале построения графика. Указываем в одной строке высоту и ширину поля графика.
Тегом polyline points задаем точки по которым будут выстроены вершины графика, которые впоследствии будут самостоятельно соединены линиями при отображении в браузере.

Построение графика с нулевой точки:

0graph заменяется уже в работе по входу на параметр 0,39

1graph заменяется уже в работе по входу на параметр 5,40

2graph заменяется уже в работе по входу на параметр 10,10

3graph заменяется уже в работе по входу на параметр 15,5

что есть 0,39 – это положение точки по горизонтали на 0 пикселей и высоту 39 пикселей

5,40 – это положение следующей точки на 5 киселей вправо относительно начала координат и высоту 40 (когда построена вторая точка формируется линия, будем ее пускать вниз задав 3 точку)
10,10 – это положение точки на 10 пикселей правее относительно начала и на высоту 10 пикселей, таким образом линия уходит вниз. 15,5 — продолжение линии….

Необходимо помнить что на отображении точки передается параметр через запятую.
При необходимости (но не будет заметным обычно) во второй параметр точки графика дополнительно возможно через точку добавить уточнение. К примеру 0,39.50

Указание настроек графика и закрытию тегом svg:

style=’fill:none;stroke:blue;stroke-width:1′ transform=’scale(2, -2) translate(0, -100)’/>
</svg>

Заполнение fill— отсутствует,

stroke:blue– график рисовать синими линиями (допустимы разные цвета)

stroke-width:1 — ширина линий

transform — каким образом можно изменить отображение графика. Обычно трансформацию не используют, но в данном примере используется для увеличения резкости отображения линии на малом поле графика по средствам scale и зеркальном отображении графика параметром translate. При отсутствии параметра translate(0, -100) график будет отображаться непривычно. Точки с меньшими значениями станут вершинными. Именно для приведения графика к читаемому виду служит параметр 0, -100

Scale при параметрах 2, -2 действует на отображение графика подобно линзе. Стандартные параметры обычно единицами указаны.

Для детального изучения темы используйте в поисковике слова: svg polyline

(В тексте могут быть неточности. Прошло много времени)

Добавил: НовыйUser