折線圖
折線圖（Line Chart）用於顯示數據在一個連續的時間間隔或者時間跨度上的變化，它的特點是反映物體隨時間或有序類別而變化的趨勢
基礎折線圖
折線圖數據是遞增還是遞減、增減的速率、增減的規律（週期性、螺旋性等）、峰值等特徵都可以清晰地反映出來。所以，折線圖常用來分析數據隨時間的變化趨勢，也可用來分析多組數據隨時間變化的相互作用和相互影響。例如可用來分析某類商品或是某幾類相關的商品隨時間變化的銷售情況，從而進一步預測未來的銷售情況。在折線圖中，一般水平軸（X軸）用來表示時間的推移，並且間隔相同；而垂直軸（Y軸）代表不同時刻的數據的大小。
預覽圖
設定值
-
資料源
[
{ 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 |
多條折線圖
雙折線圖，用於比對兩組數據的趨勢。
預覽圖
設定值
-
資料源
[{
"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 |
曲形折線圖
雙折線圖，用於比對兩組數據的趨勢。
預覽圖
設定值
-
資料源
[{
"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 |
階梯折線圖
階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能 很有用。例如，奶製品價格上漲，汽油，稅率，利率等。
預覽圖
設定值
-
資料源
[{
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 |
多條階梯折線圖
階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能 很有用。例如，奶製品價格上漲，汽油，稅率，利率等。
預覽圖
設定值
-
資料源
[{
"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 |