PythonとJavaScriptではじめるデータビジュアライゼーション

94

4 章　Web 開発の基本

4.7.5

 線、矩形、多角形

さらにいくつかの要素をチャートに追加して図

4-10

を作成します。■

まず、

<line>

タグでチャートに

2

本の単純な軸線を追加します。線の位置は、開始座標

(x1,

y1)

と終了座標

(x2, y2)

で設定します。

<line x1="20" y1="20" x2="20" y2="130"></line>

<line x1="20" y1="130" x2="280" y2="130"></line>

また、

SVG

矩形を使って右上角にダミーの凡例ボックスも追加します。矩形は、親コンテナに

相対的な

x

、

y

座標と幅と高さで指定します。

<rect x="240" y="5" width="55" height="30"></rect>

<polygon>

タグを使うと不規則な多角形を作成できます。

<polygon>

タグには、座標のペアのリ

ストを指定します。チャートの右下に三角形の印を作成しましょう。

<polygon points="210,100, 230,100, 220,80"></polygon>

以下の

CSS

で要素にスタイルを設定します。

#chart circle {fill: lightblue}

#chart line {stroke: #555555; stroke-width: 2}

#chart rect {stroke: red; fill: white}

#chart polygon {fill: green}

これでいくつかのグラフィックスプリミティブを配置したので、ダミーチャートにテキストを追 ...