SVG로 사물인터넷(IoT)에 연결된 센서로부터 데이터 그래프 그리기
이 시리즈의 기사에서 IoT의 데이터 그래프 표현 그래프를 그리는 방법을 설명하겠습니다. SVG 언어. 다른 경우와 마찬가지로 이 기사도 언어에 대한 간략한 소개 역할을 합니다.
SVG 형식
SVG Scalable Vector Graphics(확장 가능한 벡터 그래픽, 영어)의 약어에 해당합니다. 그것은 마크 업 언어 에 근거한 XML 이는 주로 그림을 정의하는 기하학으로 그림을 설명할 수 있게 해줍니다. 사진을 인코딩하기 위해 컬러 픽셀 격자를 사용하는 사진에 사용되는 매트릭스 방법과 반대입니다.
그림 내부 SVG 외부 문서를 참조하거나 도면 자체에 포함된 이미지(픽셀 매트릭스)도 포함될 수 있습니다. SVG.
이 글을 쓰는 시점의 최신 언어 버전은 SVG 1.1 버전 정의가 이미 개발 중이지만 SVG 2. 가능한 한 서론에서 설명한 내용을 참고하도록 노력하겠습니다. SVG 1.1 또한 봉사하다 SVG 2.
도면의 경우 SVG 코드 내에 포함되지 않고 별도의 문서에 포함되어 있습니다. HTML (IoT 데이터를 표현하기 위한 이 솔루션의 제안은 이를 코드에 포함합니다. HTML)는 참조로 시작해야 합니다. XML 및 문서 유형 정의(DTD).
|
1
2
|
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
|
이전 코드의 첫 번째 줄에는 버전이 표시됩니다. XML 사용된(1.0) 문자 인코딩(UTF-8) 외부 정의가 필요한지 여부를 나타냅니다(standalone="no") 아니면 독립형 문서입니까(standalone="yes"). 두 번째 줄은 다음을 표현합니다. 문서 유형 정의(DTD)다음 버전에서는 필요하지 않습니다. SVG.
도면이 정의되는 코드는 라벨 사이에 포함됩니다. <sgv> y </sgv> 이는 또한 이미 이야기할 때 언급했듯이 IoT에서 데이터 그래프의 컨테이너 역할을 하는 HTML 코드, 측정값, 표시된 전체 부분, 비율, 유형 및 버전.
|
1
2
3
4
5
6
7
|
<?xml version=“1.0” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“500px” height=“250px” viewBox=“20 10 460 80” preserveAspectRatio=“none” xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
<!–
dibujo en formato SVG
–>
</svg>
|
위의 예에서는 컨테이너에서 사용 가능한 모든 공간(웹 페이지의 요소, 우리의 경우) 원래 비율을 존중하지 않고 사용 preserveAspectRatio="none". 또한, 이제 문서의 첫 번째 내용, 그 사이에 포함된 설명을 볼 수 있습니다. <!-- y --> 다른 형식과 마찬가지로 XML.
에 의해 선택된 좌표계 SVG 가로(X축)와 세로(Y축)를 향하고 있으며 양의 방향은 서양글자 즉, X축의 값이 오른쪽으로 커지고 Y축의 양의 값이 커지는 방향이다. 하향의.
SVG로 그래프 정의
IoT에 연결된 센서에 의해 저장된 정보의 그래픽을 정의하려면 그려지는 객체의 유형, 형상(좌표, 치수...) 및 모양(두께, 색상...)을 지정해야 합니다. 이 기사의 예는 선분을 객체와 결합하여 만들 수 있는 선 그래프입니다. line, 독립 요소를 플롯하거나 다중 세그먼트 선을 사용하여 객체를 그리는 데 가장 유용합니다. path, 일련의 연결된 라인에 더 실용적입니다.
요소와 함께 path 목표는 아래 이미지와 같은 그림을 만드는 것입니다. 이 그림은 채우지 않고 밝은 색상으로 채워진 닫힌 경로로 구성되고 두꺼운 선으로 그려지는 열린 경로로 상단을 덮는 것입니다.
라인을 설명하기 위해 다음 유형의 표현식이 사용됩니다.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
여기서 X1,Y1은 선의 첫 번째 점의 좌표이고 X2,Y2는 두 번째 점의 좌표입니다. 속성이 사용되었습니다. stroke-width 두께를 정의합니다. 객체의 모양을 정의하는 방법에는 여러 가지가 있습니다. SVG, 이전 속성과 같은 개별 속성 또는 속성 style 이는 그것들을 모두 하나로 모으고 기사 제안에 사용될 방법입니다.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
위 코드는 속성에 조인됩니다. style 의 가치 stroke (획의 색상), stroke-width (선의 두께) 및 stroke-opacity (객체의 불투명도)
객체에 대한 설명 path 형태가 있다
|
1
|
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
|
위의 코드는 작업을 사용합니다 SVG M, L y Z 숙소 내부 d는 각각 "moveto"(이동), "lineto"(라인 대상) 및 "closepath"(경로 닫기)를 의미합니다. 적절한 경우 절대값이나 상대값을 나타내기 위해 대문자나 소문자로 표현될 수 있습니다. Z, 예를 들어 관련이 없습니다). 예를 들어 원형 곡선, 타원 곡선, 베지어 곡선 등을 그릴 수 있는 다른 작업도 많이 있지만 이 예에서는 필요하지 않습니다.
이 제안은 영역을 둘러쌀 수 있는 선 그래프를 그리지만, 점을 표시하거나 영역을 강조하기 위해 다른 간단한 요소를 그리는 것도 유용할 수 있습니다. 사용 가능한 것 중 SVG 다각형(채우기를 그릴 수도 있음), 직사각형(특정 경우에 더 편리함), 타원 및 원(타원의 특정 경우)이 흥미로울 수 있습니다. 이러한 요소의 구문은 다음 예제 코드에서 볼 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<svg id=“formas_sencillas” width=“100%” height=“180px” viewBox=“0 0 100 100” preserveAspectRatio=“none” class=“foto_columna_sombra” style=“background-color:#A8C3EA;margin:20px auto;”>
<polygon points=“0,100 0,42 8,38 14,37 22,40 29,33 35,36 44,40 51,30 57,42 64,33 74,38 80,34 87,40 92,38 100,32 100,100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;fill:#205587;fill-opacity:0.5;” vector-effect=“non-scaling-stroke” />
<circle cx=“0” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“8” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“14” cy=“37” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“22” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“29” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“35” cy=“36” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“44” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“51” cy=“30” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“57” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“64” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“74” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“80” cy=“34” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“87” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“92” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“100” cy=“32” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<rect x=“0” y=“0” width=“100” height=“100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</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 다음과 같이 :
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
텍스트의 위치는 x 및 y 좌표로 표시되며 글꼴은 속성에 해당합니다. font-family, 크기는 font-size 그리고 속성이 있는 색상 fill.
HTML 도면을 통합할 수 있습니다 SVG 페이지의 또 다른 요소로. 다른 객체와 마찬가지로 속성을 사용할 수 있습니다. ID 참조할 수 있는 고유 식별자를 할당합니다. 자바 스크립트 그들을 조작하기 위해. 의 관점에서 보면 HTML, 객체 SVG 다음과 같은 형태를 갖게 됩니다:
|
1
2
3
4
5
6
7
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
</svg>
|
지금까지 살펴본 바에 따르면 이 제안에서 추구하는 기본 그래프 유형을 그리는 것이 가능하지만 컨테이너(웹 페이지)의 모양에 유연성을 주기 위해 그래프의 비율이 영향을 받습니다. (예를 들어 preserveAspectRatio="none") 요소의 브라우저 창에 있는 레이아웃에 맞게 크기를 수정하여 HTML.
대체로 차트가 포함된 웹 페이지를 표시하는 브라우저 창의 크기를 수정할 때 동작에 대한 두 가지 대안이 있습니다. (1) 차트 크기 유지 SVG 초과된 경우 공백을 남겨두거나 누락된 경우 스크롤 막대를 추가하거나 (2) 그래프 크기를 수정합니다. SVG 웹을 표시하는 브라우저 창의 크기를 리드미컬하게 변경합니다. 첫 번째 공식을 선택하면 선택한 크기와 그래프 값을 기준으로 수정되지만 크기를 예측하고 절대 측정값으로 그릴 수 있습니다. 제가 제안하는 두 번째 방법을 선택하면 크기는 항상 표시된 값의 백분율입니다. 두 번째 방법의 장점은 웹에 대한 적응성이며, 단점은 그래프에 수반되는 요소(점, 텍스트 등)를 그려야 한다는 점이다.
선의 굵기에 변형이 생길 수 있는 것을 보정하기 위해 효과를 사용합니다. vector-effect="non-scaling-stroke" 필요한 경로(값이 다음과 같은 경로)에서 stroke 이외의 none). 물체의 경우 text 비교할 수 있는 효과가 없으므로 컨테이너 크기의 변화로 생성된 방향과 반대 방향으로 변형(관련 효과와 함께)이 필요합니다.
의 변환 SVG 그래픽의 여러 텍스트와 기타 개체를 단일 그룹으로 통합하고 더 편리하게 모든 개체에 대해 변환을 수행할 수 있도록 개체 그룹에 적용할 수 있습니다.
그룹의 일부인 요소는 태그에 포함됩니다. <g> y </g>, 변환을 할당하기 위해 속성이 사용됩니다. transform 그리고 우리의 경우에 관련된 일련의 작업 scale, 수평 및 수직 배율이 표시됩니다. 값이 scale 1보다 크면 해당 축이 넓어지고, 1보다 작으면 해당 축을 따라 개체 크기가 줄어듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<g transform=“scale(0.5,2.0)”>
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Primer texto
</text>
<text x=“10.0” y=“50.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Segundo texto
</text>
</g>
</svg>
|
이전 예에서 첫 번째와 두 번째 텍스트는 가로 측정값을 절반으로 줄이고 세로 측정값을 0.5와 2.0에 사용된 값으로 두 배로 늘려 수정되었습니다. scale(0.5,2.0)
시리즈의 다음 기사 IoT에 연결된 센서의 데이터 그래프 표현 다음을 사용하여 실시간으로 그래프를 생성하거나 수정하는 방법을 설명합니다. 자바 스크립트 이를 통해 서버에서 로드된 마지막 값을 나타낼 때 그래프의 애니메이션을 볼 수 있습니다.
다음은 이 제안을 사용하여 생성된 그래프가 어떻게 보이는지에 대한 예입니다.
코멘트 남기기