На ее основе отлично работает графики прям в html.
Когда основная задача исключить отказ (SD) или когда ее нет или когда требуется легкая графика или разовые графики замеров.
Однако, основная речь о том что векторную ГРАФИКУ не возможно использовать в HTML пока в html коде двойные кавычки введенные пользователем находятся. При нахождения двойных при переходе в компиляцию от программы в IDE дописываются дополнительные в результате чего графика не выводится на экран.
Решение пока не исправлено единственное. Допускается замена всех двойных что используются на одинарные. В таком случае не происходит распознание и добавление лишних. Замена " на ' проста и не требует корректировок в последующих перекомпиляциях.
Однако,одинарные - редкость. При невозможности корректировки, возможно, имеет смысл добавить информацию в help блока. Кроме этого, код увеличивается за счет совершенно лишних символов (вместо "" создается """" ) это первый момент. Второй - разные средства отображения кода могут вполне трактовать по разному такой код. В данном случае при нахождение лишних графика отключается.
Полный текст:
СпойлерПоказать
Первое что понадобиться, помнить о том пока к символу дописывается лишний, графика svg в html не выводится.
Для этого используем следующее решение. В коду HTML все двойные кавычки меняются на одинарные.
По правилу они допустимы как альтернатива двойным.
Рассмотрим простой вариант:
<svg height='200' width='300'>
<polyline points='0graph 1graph 2graph 3graph 4graph 5graph 6graph 7graph' style='fill:none;stroke:blue;stroke-width:1' transform='scale(2, -2) translate(0, -100)'/>
</svg>
Тегом 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
(В тексте могут быть неточности. Прошло много времени)
Для этого используем следующее решение. В коду HTML все двойные кавычки меняются на одинарные.
По правилу они допустимы как альтернатива двойным.
Рассмотрим простой вариант:
<svg height='200' width='300'>
<polyline points='0graph 1graph 2graph 3graph 4graph 5graph 6graph 7graph' style='fill:none;stroke:blue;stroke-width:1' transform='scale(2, -2) translate(0, -100)'/>
</svg>
Тегом 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
(В тексте могут быть неточности. Прошло много времени)
- график.jpg (4.73 КБ) 1636 просмотров