SVG を使用して、モノのインターネット (IoT) に接続されたセンサーからのデータ グラフを描画します
シリーズのこの記事では、 IoTにおけるデータグラフの表現 を使ってグラフをプロットする方法を説明します。 SVG言語。他の機会と同様に、この記事は言語の簡単な紹介としても機能します。
SVG形式
SVG Scalable Vector Graphics (英語ではスケーラブル ベクター グラフィックス) の頭字語に対応します。それは マークアップ言語 に基づいています XML これにより、主に、図面を定義するジオメトリによって図面を記述することが可能になります。これは、写真などに使用される、色付きピクセルのグリッドを使用してエンコードするマトリックス方式とは対照的です。
図面の中 SVG 外部ドキュメントを参照するか、図面自体に埋め込まれた画像 (ピクセルのマトリックス) を含めることもできます。 SVG.
この記事の執筆時点での言語バージョンは、 SVG1.1 バージョンの定義はすでに開発されていますが、 SVG2。できる限り、たとえそれが参考であっても、序文で説明されているものを作るようにします SVG1.1 のためにも役立ちます SVG2.
図面の場合 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"）。 XNUMX行目は以下を表現しています 文書型定義 (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>
|
上の例では、幅 500 ピクセル、高さ 250 ピクセル (500x250 ビューポート) の描画を定義し、コンテナー (Web ページ上の要素、私たちの場合）元の比率を尊重せずに使用します 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 は XNUMX 番目の点の座標です。属性が使用されました 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 （高い）。 XNUMX つの半径値 (水平半径と垂直半径、 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 それらに一意の識別子を割り当てて、それを使用してそれらを参照できるようにします。 JavaScriptを それらを操作するために。という観点からすると、 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>
|
これまで見てきたことから、この提案で求められている基本的なグラフのタイプを描画することは可能ですが、コンテナ (Web ページ) の外観に柔軟性を与えるために、グラフの割合が影響を受けます。 （例えば preserveAspectRatio="none") 要素のブラウザ ウィンドウのレイアウトに合わせてサイズを変更します。 HTML.
大まかに言うと、グラフを含む Web ページを表示するブラウザ ウィンドウのサイズを変更する場合の動作には 1 つの選択肢があります。(XNUMX) グラフのサイズを維持する。 SVG 余分なスペースがある場合は空白を残すか、スクロール バーが不足している場合は追加するか、(2) グラフのサイズを変更します。 SVG Web を表示するブラウザ ウィンドウのサイズをリズミカルに変更します。最初の式を選択した場合、選択したサイズとグラフの値に基づいて修正されますが、絶対的な測定値を使用して大きさを予測して描画できます。私が提案する XNUMX 番目の方法を選択した場合、大きさは常に、表される値のパーセンテージになります。 XNUMX 番目の方法の利点は、Web への適応性です。欠点は、ポイントやテキストなど、グラフに付随する要素の描画であることです。
線の太さによって生じる変形を補正するには、エフェクトを使用します。 vector-effect="non-scaling-stroke" 必要なルート (値が stroke 以外 none）。オブジェクトの場合 text 匹敵する効果はないため、コンテナ サイズの変更によって生じるものと反対の方向にそれらを (関連するものとともに) 変形する必要があります。
の変換 SVG これらをオブジェクトのグループに適用すると、グラフィック内の複数のテキストやその他のオブジェクトを XNUMX つのグループに統合でき、さらに便利には、それらすべてに対して変換を実行できます。
グループの一部である要素はタグ内に含まれます <g> y </g>、変換を割り当てるにはプロパティが使用されます transform そして、私たちの場合に関連する一連の操作 scale、水平方向と垂直方向の倍率が表示されます。の値が scale XNUMX より大きい場合は対応する軸が広がり、XNUMX より小さい場合はその軸に沿ったオブジェクトのサイズが縮小されます。
|
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 と XNUMX の値で XNUMX 倍にすることによって変更されます。 scale(0.5,2.0)
このシリーズの次の記事は、 IoTに接続されたセンサーからのデータグラフの表現 を使用してリアルタイムでグラフを生成または変更する方法について説明します。 JavaScriptを これにより、サーバーから読み込まれた最後の値を表すときにグラフのアニメーションを確認できるようになります。
以下は、この提案を使用して生成されたグラフがどのように見えるかを示す例です。
コメントを投稿