【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

SVG 聚合線

當你需要將一組以上的座標點用直線連接起來,可以考慮使用polyline 標籤,這組標籤提供屬性 points ,定義一組以上的座標點,透過這些座標點,連接一組以上的直線建立聚合線,以形成不規則圖形。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <polyline points="60,50 300,160  420,100"  />
</svg>

points 屬性中以逗點連接的兩個數字表示一組x,y座標,每一組x,y座標以空白字元隔開,最後這些座標點依序連結成為所要描繪的圖形,以上這一段配置,定義了三組座標點,分別是 (60,10) 、 (300,160) 以及  (420,100)。



在沒有其它額外設定的情形下,從第一組座標點開始逐一連接到最後一組座標點,形成一條曲線, polyline 會再從最後一個座標點回到第一個座標點形成一個沒有框線,預設黑色的封閉圖形。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <polyline points="60,50 300,160  420,100 "
              stroke="#6941e1"  stroke-width="6"  fill="#4169E1"/>
</svg>

嘗試指定 stroke 與 stroke-width 屬性,呈現 points 屬性定義的聚合線,指定 fill 調整填滿圖形的顏色。



其中紫色的部份是連接 points 座標點的聚合線,而結合最後一點與第一點形成的封閉區域則以 fill 屬性指定的藍色填滿。要注意的是,無論定義的座標點為何, polyline 一定會從最後一個座標點回到第一個座標點,將聚合線封閉。

現在於標籤中,新增一組座標點:

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <polyline points="60,50 300,160 420,100 150,160 "
              stroke="#6941e1"  stroke-width="6"  fill="#4169E1"/>
</svg>

這一次圖形依然是由最後一組座標 (150,160) 回到第一組座標形成封閉區域。



從輸出結果可以看到,只要是連接座標點形成的任何封閉區域,均屬聚合線定義的範圍,因此以 fill 屬性指定的顏色填滿。

如果要將聚合線完整的封閉,可以將最後一組座標點重新設定為第一組座標點:

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <polyline points="60,50 300,160  420,100 150,160 60,50"
              stroke="#6941e1"  stroke-width="4"  fill="#4169E1"/>
</svg>

由於第一組以及最後一組座標均是 (60,50),圖形全部以直線封閉。



輸出結果中,我們看到了所有的區域均以直線封閉。

在圖表的設計上,相較於直條圖用來表現數量多寡比較,數據波動的呈現則習慣透過曲線圖實作,聚合線對於一般的曲線圖實作相當有用。

<svg style="background-color:#ecf0fc;" width="500" height="300">
    <line x1="40" y1="20" x2="40" y2="260" stroke="#4169e1" />
    <line x1="40" y1="260" x2="460" y2="260" stroke="#4169e1" />

    <rect x="120" y="120" height="140" width="20" fill="#4169e1" opacity="0.6" />
    <rect x="220" y="80" height="180" width="20" fill="#e14169"  opacity="0.6"/>
    <rect x="320" y="180" height="80" width="20" fill="#69e141"  opacity="0.6"/>
    <rect x="420" y="60" height="200" width="20" fill="#6941e1"  opacity="0.6"/>

    <polyline points="130,120 230,80 330,180 430,60" stroke="#4169e1" fill="none"  />
</svg>

在討論SVG 矩形的長條圖配置中,加入 poline 標籤,針對相同的數據實作曲線圖。



畫面上,以聚合線連接四組統計數據的座標點,相較長條圖,曲線可以更容易體驗數據的波動狀況。



沒有留言: