# 折線圖 折線圖(Line Chart)用於顯示數據在一個連續的時間間隔或者時間跨度上的變化,它的特點是反映物體隨時間或有序類別而變化的趨勢 # 基礎折線圖 折線圖數據是遞增還是遞減、增減的速率、增減的規律(週期性、螺旋性等)、峰值等特徵都可以清晰地反映出來。所以,折線圖常用來分析數據隨時間的變化趨勢,也可用來分析多組數據隨時間變化的相互作用和相互影響。例如可用來分析某類商品或是某幾類相關的商品隨時間變化的銷售情況,從而進一步預測未來的銷售情況。在折線圖中,一般水平軸(X軸)用來表示時間的推移,並且間隔相同;而垂直軸(Y軸)代表不同時刻的數據的大小。 ### 預覽圖 --- [![基礎折線圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/qWqeJ5ZcX2DYL2rQ-%E5%9F%BA%E7%A4%8E%E6%8A%98%E7%B7%9A%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/qWqeJ5ZcX2DYL2rQ-%E5%9F%BA%E7%A4%8E%E6%8A%98%E7%B7%9A%E5%9C%96.png "基礎折線圖") ### 設定值 --- - #### 資料源 ``` [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 } ] ``` - #### 內距 ``` 40,20,50,50 ``` - #### 比例尺Scale ##### Year 比例尺( X軸 )
列表設定值
欄位year
類型linear
刻度間距1
優化數據範圍開啟
##### ##### Value 比例尺( Y軸 )
列表設定值
欄位value
類型 linear
刻度間距1
最小值0
最大值13
優化數據範圍開啟
- #### 圖 Geom ##### 線圖( Line )
列表設定值
欄位 year\*value
類型線圖
##### 點圖( point )
列表設定值
欄位year\*value
類型點圖
形狀circle
大小4
樣式 - 顏色\#ffffff
顏色 - 寬度1
# 多條折線圖 雙折線圖,用於比對兩組數據的趨勢。 ### 預覽圖 --- [![多條折線圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/7Bv3MEjS1R2N9o8D-%E5%A4%9A%E6%A2%9D%E6%8A%98%E7%B7%9A%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/7Bv3MEjS1R2N9o8D-%E5%A4%9A%E6%A2%9D%E6%8A%98%E7%B7%9A%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ "month": "Jan", "city": "Tokyo", "temperature": 7 }, { "month": "Jan", "city": "London", "temperature": 3.9 }, { "month": "Feb", "city": "Tokyo", "temperature": 6.9 }, { "month": "Feb", "city": "London", "temperature": 4.2 }, { "month": "Mar", "city": "Tokyo", "temperature": 9.5 }, { "month": "Mar", "city": "London", "temperature": 5.7 }, { "month": "Apr", "city": "Tokyo", "temperature": 14.5 }, { "month": "Apr", "city": "London", "temperature": 8.5 }, { "month": "May", "city": "Tokyo", "temperature": 18.4 }, { "month": "May", "city": "London", "temperature": 11.9 }, { "month": "Jun", "city": "Tokyo", "temperature": 21.5 }, { "month": "Jun", "city": "London", "temperature": 15.2 }, { "month": "Jul", "city": "Tokyo", "temperature": 25.2 }, { "month": "Jul", "city": "London", "temperature": 17 }, { "month": "Aug", "city": "Tokyo", "temperature": 26.5 }, { "month": "Aug", "city": "London", "temperature": 16.6 }, { "month": "Sep", "city": "Tokyo", "temperature": 23.3 }, { "month": "Sep", "city": "London", "temperature": 14.2 }, { "month": "Oct", "city": "Tokyo", "temperature": 18.3 }, { "month": "Oct", "city": "London", "temperature": 10.3 }, { "month": "Nov", "city": "Tokyo", "temperature": 13.9 }, { "month": "Nov", "city": "London", "temperature": 6.6 }, { "month": "Dec", "city": "Tokyo", "temperature": 9.6 }, { "month": "Dec", "city": "London", "temperature": 4.8 }] ``` - #### 內距 ``` 40,20,50,50 ``` - #### 比例尺 Scale ##### temperature 比例尺 ( X軸 )
列表設定值
欄位temperature
類型 linear
優化數據範圍開啟
最小值0
格式化函數`function(val) { return val + '°C'; }`
- #### 圖 Geom ##### 點圖( point )
列表設定值
欄位month\*temperature
類型點圖
顏色欄位city
形狀circle
大小4
樣式 - 顏色\#ffffff
樣式 - 寬度1
##### 線圖( Line )
列表設定值
欄位month\*temperature
類型線圖
顏色欄位city
# 曲形折線圖 雙折線圖,用於比對兩組數據的趨勢。 ### 預覽圖 --- [![曲形折線圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/usPa4qDJLILqVohZ-%E6%9B%B2%E5%BD%A2%E6%8A%98%E7%B7%9A%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/usPa4qDJLILqVohZ-%E6%9B%B2%E5%BD%A2%E6%8A%98%E7%B7%9A%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ "month": "Jan", "city": "Tokyo", "temperature": 7 }, { "month": "Jan", "city": "London", "temperature": 3.9 }, { "month": "Feb", "city": "Tokyo", "temperature": 6.9 }, { "month": "Feb", "city": "London", "temperature": 4.2 }, { "month": "Mar", "city": "Tokyo", "temperature": 9.5 }, { "month": "Mar", "city": "London", "temperature": 5.7 }, { "month": "Apr", "city": "Tokyo", "temperature": 14.5 }, { "month": "Apr", "city": "London", "temperature": 8.5 }, { "month": "May", "city": "Tokyo", "temperature": 18.4 }, { "month": "May", "city": "London", "temperature": 11.9 }, { "month": "Jun", "city": "Tokyo", "temperature": 21.5 }, { "month": "Jun", "city": "London", "temperature": 15.2 }, { "month": "Jul", "city": "Tokyo", "temperature": 25.2 }, { "month": "Jul", "city": "London", "temperature": 17 }, { "month": "Aug", "city": "Tokyo", "temperature": 26.5 }, { "month": "Aug", "city": "London", "temperature": 16.6 }, { "month": "Sep", "city": "Tokyo", "temperature": 23.3 }, { "month": "Sep", "city": "London", "temperature": 14.2 }, { "month": "Oct", "city": "Tokyo", "temperature": 18.3 }, { "month": "Oct", "city": "London", "temperature": 10.3 }, { "month": "Nov", "city": "Tokyo", "temperature": 13.9 }, { "month": "Nov", "city": "London", "temperature": 6.6 }, { "month": "Dec", "city": "Tokyo", "temperature": 9.6 }, { "month": "Dec", "city": "London", "temperature": 4.8 }] ``` - #### 內距 ``` 40,20,50,50 ``` - #### 比例尺Scale ##### temperature 比例尺( X軸 )
列表設定值
欄位temperature
類型linear
優化數據範圍開啟
最小值0
格式化函數function (val) { return val + '°C'; }
##### - #### 圖 Geom ##### 線圖( Line )
列表設定值
欄位 month\*temperature
類型線圖
顏色欄位city
形狀smooth
##### 點圖( point )
列表設定值
欄位month\*temperature
類型點圖
顏色欄位 city
形狀circle
大小4
樣式 - 顏色\#ffffff
顏色 - 寬度1
# 階梯折線圖 階梯線圖(也稱為步驟圖)是與線圖相似的圖表,但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時,分階線圖可能 很有用。例如,奶製品價格上漲,汽油,稅率,利率等。 ### 預覽圖 --- [![階梯折線圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/sDBxcnTsCCbE5UUe-%E9%9A%8E%E6%A2%AF%E6%8A%98%E7%B7%9A%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/sDBxcnTsCCbE5UUe-%E9%9A%8E%E6%A2%AF%E6%8A%98%E7%B7%9A%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ month: 'Jan', value: 51 }, { month: 'Feb', value: 91 }, { month: 'Mar', value: 34 }, { month: 'Apr', value: 47 }, { month: 'May', value: 63 }, { month: 'June', value: 58 }, { month: 'July', value: 56 }, { month: 'Aug', value: 77 }, { month: 'Sep', value: 99 }, { month: 'Oct', value: 106 }, { month: 'Nov', value: 88 }, { month: 'Dec', value: 56 }]; ``` - #### 內距 ``` 40,40,60,60 ``` - #### 比例尺 Scale ##### month 比例尺 ( X軸 )
列表設定值
欄位month
類型cat
優化數據範圍開啟
##### value 比例尺 ( Y軸 )
列表設定值
欄位value
類型linear
刻度間距10
優化數據範圍開啟
最小值30
最大值110
- #### 圖 Geom ##### 點圖( point )
列表設定值
欄位month\*value
類型點圖
形狀circle
樣式 - 顏色\#ffffff
樣式 - 寬度1
##### 線圖( Line )
列表設定值
欄位month\*value
類型線圖
形狀hv
# 多條階梯折線圖 階梯線圖(也稱為步驟圖)是與線圖相似的圖表,但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時,分階線圖可能 很有用。例如,奶製品價格上漲,汽油,稅率,利率等。 ### 預覽圖 --- [![多條階梯折線圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/3cvHtpmVo5P3PhYk-%E5%A4%9A%E6%A2%9D%E9%9A%8E%E6%A2%AF%E6%8A%98%E7%B7%9A%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/3cvHtpmVo5P3PhYk-%E5%A4%9A%E6%A2%9D%E9%9A%8E%E6%A2%AF%E6%8A%98%E7%B7%9A%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ "month": "Jan", "key": "series1", "value": 125 }, { "month": "Jan", "key": "series2", "value": 51 }, { "month": "Feb", "key": "series1", "value": 132 }, { "month": "Feb", "key": "series2", "value": 91 }, { "month": "Mar", "key": "series1", "value": 141 }, { "month": "Mar", "key": "series2", "value": 34 }, { "month": "Apr", "key": "series1", "value": 158 }, { "month": "Apr", "key": "series2", "value": 47 }, { "month": "May", "key": "series1", "value": 133 }, { "month": "May", "key": "series2", "value": 63 }, { "month": "June", "key": "series1", "value": 143 }, { "month": "June", "key": "series2", "value": 58 }, { "month": "July", "key": "series1", "value": 176 }, { "month": "July", "key": "series2", "value": 56 }, { "month": "Aug", "key": "series1", "value": 194 }, { "month": "Aug", "key": "series2", "value": 77 }, { "month": "Sep", "key": "series1", "value": 115 }, { "month": "Sep", "key": "series2", "value": 99 }, { "month": "Oct", "key": "series1", "value": 134 }, { "month": "Oct", "key": "series2", "value": 106 }, { "month": "Nov", "key": "series1", "value": 110 }, { "month": "Nov", "key": "series2", "value": 88 }, { "month": "Dec", "key": "series1", "value": 91 }, { "month": "Dec", "key": "series2", "value": 56 }] ``` - #### 內距 ``` 40,40,60,60 ``` - #### 圖 Geom ##### 線圖( Line )
列表設定值
欄位month\*value
類型線圖
顏色欄位key
形狀hv