目錄
一、實驗目的... 1
二、實驗環境... 1
三、實驗內容... 1
1. 下載并安裝Tableau軟件.. 1
2. 使用HTML5繪制Canvas圖形.. 2
3. 使用HTML5編寫SVG 圖形... 5
4. 使用R 語言編寫可視化實例.. 7
四、總結與心得體會... 7
五、思考問題... 8
一、實驗目的
1）了解數據可視化工具，下載并安裝可視化工具
2）掌握數據可視化的主流編程語言，能使用編程語言開發簡單的可視化作品
二、實驗環境
硬件：微型圖像處理系統，
包括：主機， PC機；
操作系統：Windows 11????????
應用軟件：Jupyter Notebook, pycharm, Tableau
數字圖像處理軟件：Excel/Python
三、實驗內容
1. 下載并安裝Tableau軟件
Tableau軟件已下載成功，軟件界面如下所示：
2. 使用HTML5繪制Canvas圖形
在pycharm中編輯如下代碼進行Canvas圖形的繪制，編寫了以下代碼：
| <!DOCTYPE html> |
整體上，這段代碼在canvas上繪制了一個圓、兩條直線、兩個填充矩形和兩個矩形邊框，并在畫布中心繪制了文本。通過調整參數，你可以改變這些圖形的位置、大小和顏色。
- <!DOCTYPE html>：聲明文檔類型，告訴瀏覽器這是一個HTML5文檔。
- <html lang="en">：根元素，定義了整個文檔的語言為英語。
- <head>：包含了文檔的元數據，如字符集聲明和標題。
- <meta charset="UTF-8">：指定頁面的字符編碼為UTF-8，這是一種廣泛使用的字符編碼。
- <title>我的html繪制Canvas</title>：定義了網頁的標題，顯示在瀏覽器的標簽頁上。
- <body>：包含了網頁的所有內容，用戶將在這里看到網頁的主體。
- <canvas id="myCanvas" width="200" height="200" style="border: solid 1px red;">：創建了一個200x200像素的畫布，并為其添加了紅色的邊框。id屬性為"myCanvas"，用于在JavaScript中引用這個元素。如果瀏覽器不支持<canvas>元素，將顯示canvas后面的文本。
- <canvas>后面的文本是備選內容，用于那些不支持canvas的瀏覽器。推薦用戶使用最新版的Chrome瀏覽器。
- <script>：內嵌的JavaScript代碼塊，用于操作canvas元素。
- var c = document.getElementById("myCanvas");：通過ID獲取canvas元素。
- var ctx = c.getContext("2d");：獲取canvas的2D繪圖上下文，這是繪制圖形所需的。
- 使用ctx.beginPath()開始一個新的路徑。
- 使用ctx.arc(100, 75, 40, 0, 2*Math.PI)繪制一個圓，圓心位于(100, 75)，半徑為40，從0度到360度（即一個完整的圓）。
- 使用ctx.stroke()繪制當前路徑的輪廓。
- 使用兩個ctx.strokeRect()方法繪制兩個矩形的邊框，分別定義了矩形的位置和大小。
- 使用ctx.fillStyle = 'lightcoral';設置填充顏色為淺紅色。
- 使用ctx.fillRect(30, 30, 60, 60);繪制一個填充矩形，定義了矩形的位置和大小。
- 另一個ctx.fillRect()方法繪制第二個填充矩形。
- ctx.moveTo(30, 30);和ctx.lineTo(170, 170);定義了一條從左上角到右下角的直線的起點和終點。
- 使用ctx.stroke()繪制直線。
- var text = "我的canvas圖";定義了要繪制的文本內容。
- ctx.font = "16px Arial";設置文本的字體樣式和大小。
- ctx.fillStyle = 'darkblue';設置文本的填充顏色為深藍色。
- ctx.textAlign = "center";和ctx.textBaseline = "middle";設置文本的水平和垂直對齊方式。
- 使用ctx.measureText(text).width計算文本的寬度。
- 計算文本繪制的起始點位置，確保文本位于畫布的中心。
- 使用ctx.fillText(text, x, y);在指定位置填充（繪制實心）文本。
運行結果如下：
3. 使用HTML5編寫SVG 圖形
編寫SVG繪制html5代碼如下：
| <!DOCTYPE html> |
運行結果如下：
 |
4. 使用R 語言編寫可視化實例
編寫R語言代碼繪制散點圖如下：
| # 載入ggplot2包 library(ggplot2) # 創建一個數據框，包含兩組變量 data <- data.frame( ? x = 1:10, ? y = (1:10)^2 ) # 使用ggplot2創建散點圖 ggplot(data, aes(x = x, y = y)) +? # 指定數據和映射關系 ? geom_point() +? # 添加散點圖層 ? labs(title = "散點圖示例", x = "X軸變量", y = "Y軸變量")? # 添加標題和坐標軸標簽 # 顯示圖形 |
運行結果如下：
四、總結與心得體會
1.在pycharm中可以直接新建html5文件編輯html代碼，好處是有錯誤提醒，也可以在文本文件中直接編寫，然后將后綴改為html運行。
五、思考問題
大數據可視化還有哪些工具？都能實現相同的功能嗎？
可視化的工具還有origin、C/C++語言和matlab等，基本的可視化功能都可以實現，但是上手難易程度不同，對不同的工作完成的方便程度也不同，針對不同問題可以采用不同的工具。
