點圖

Scatter Chart,也叫 X-Y 圖,它將所有的數據以點的形式展現在笛卡爾坐標系上,以顯示變量之間的相互影響程度,點的位置由變量的數值決定。

基礎散點圖

  通過觀察散點圖上數據點的分佈情況,我們可以推斷出變量間的相關性。如果變量之間不存在相互關係,那麼在散點圖上就會表現為隨機分佈的離散的點,如果存在某種相關性,那麼大部分的數據點就會相對密集並以某種趨勢呈現。數據的相關關係主要分為:正相關(兩個變量值同時增長)、負相關(一個變量值增加另一個變量值下降)、不相關、線性相關、指數相關等,表現在散點圖上的大致分佈如下圖所示。那些離點集群較遠的點我們稱為離群點或者異常點。

預覽圖


散點圖.png

設定值


https://g2.antv.vision/zh/examples/data/scatter.json
( 資料來源:AntV )
格式:
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]
40, 40, 60, 60
點圖(point)
列表 設定值
欄位 height*weight
類型 點圖
形狀 circle

多色散點圖

預覽圖


多色散點圖.png

設定值


https://g2.antv.vision/zh/examples/data/scatter.json
( 資料來源:AntV )
格式:
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]
40, 40, 60, 60
點圖(point)
列表 設定值
欄位 height*weight
類型 點圖
顏色欄位 gender
形狀參數 circle
大小參數 4

多形多色散點圖

預覽圖


多形多色散點圖.PNG

設定值


https://g2.antv.vision/zh/examples/data/scatter.json
( 資料來源:AntV )
格式:
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]
40, 40, 60, 60
點圖(point)
列表 設定值
欄位 height*weight
類型 點圖
顏色欄位 gender
形狀 gender
形狀參數 circle,diamond
大小參數 4

擾動點圖

圖片僅供參考,此點圖會浮動

預覽圖


擾動點圖.png

設定值


https://g2.antv.vision/zh/examples/data/dv-grades.json
( 資料來源:AntV )
格式:
[
{Class: "Summer 2013",Grade: "C",Score: 72.5,},
{Class: "Summer 2013",Grade: "C",Score: 77.5,},
......
]
40, 40, 60, 60
Class(X軸)
列表 設定值
欄位 Class
類型 cat
刻度數量 5
優化數據範圍 開啟
Score( X軸 )
列表 設定值
欄位 Score
啟用 開啟
位置 left
Class( Y軸 )
列表 設定值
欄位 Class
啟用 開啟
刻度現 - 顏色 #A14242
次要刻度 - 數量 2
次要刻度 - 顏色 #A14242
點圖(point)
列表 設定值
欄位

Class*Score

類型 點圖
顏色欄位 Grade
形狀 circle
大小參數 4
調整欄位 擾動 | Jitter
列表 設定值
啟用 開啟
欄位 Class
位置
排版 水平

氣泡圖

圖片僅供參考,此點圖會浮動

預覽圖


氣泡圖.png

設定值


https://g2.antv.vision/zh/examples/data/bubble.json
( 資料來源:AntV )
格式:
[
{continent: "Americas",Country: "Argentina",LifeExpectancy: 75.32,GDP: 12779.37964,Population: 40301927,},
{continent: "Americas",Country: "Brazil",LifeExpectancy: 72.39,GDP: 9065.800825,Population: 190010647,},
......
]
40, 40, 60, 60
GDP(X軸)
列表 設定值
欄位 GDP
類型

linear

優化數據範圍 開啟
最小值 0
格式化函數
function formatter(value) {
return (value / 1000).toFixed(0) + 'k';
}
點圖(point)
列表 設定值
欄位

GDP*LifeExpectancy

類型 點圖
顏色欄位 continent
形狀 circle
大小欄位

Population

大小參數 4,65
調整欄位 擾動 | Jitter
列表 設定值
啟用 開啟
欄位 Population
位置
排版 水平
水平偏移量

140

水平間距

80