折線圖

折線圖(Line Chart)用於顯示數據在一個連續的時間間隔或者時間跨度上的變化,它的特點是反映物體隨時間或有序類別而變化的趨勢

基礎折線圖

        折線圖數據是遞增還是遞減、增減的速率、增減的規律(週期性、螺旋性等)、峰值等特徵都可以清晰地反映出來。所以,折線圖常用來分析數據隨時間的變化趨勢,也可用來分析多組數據隨時間變化的相互作用和相互影響。例如可用來分析某類商品或是某幾類相關的商品隨時間變化的銷售情況,從而進一步預測未來的銷售情況。在折線圖中,一般水平軸(X軸)用來表示時間的推移,並且間隔相同;而垂直軸(Y軸)代表不同時刻的數據的大小。

預覽圖


基礎折線圖.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
Year 比例尺( X軸 )
列表 設定值
欄位

year

類型 linear
刻度間距 1
優化數據範圍 開啟
 
Value 比例尺( Y軸 )
列表 設定值
欄位 value

類型

linear
刻度間距 1
最小值 0
最大值 13
優化數據範圍 開啟
線圖( Line )
列表 設定值

欄位

year*value
類型 線圖
點圖( point )
列表 設定值
欄位 year*value
類型 點圖
形狀 circle
大小 4
樣式 - 顏色 #ffffff
顏色 - 寬度 1

多條折線圖

雙折線圖,用於比對兩組數據的趨勢。

預覽圖


多條折線圖.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
temperature 比例尺 ( X軸 )
列表 設定值
欄位

temperature

類型

linear
優化數據範圍 開啟
最小值 0
格式化函數 function(val) { return val + '°C'; }
點圖( point )
列表 設定值
欄位 month*temperature
類型 點圖
顏色欄位 city
形狀 circle
大小 4
樣式 - 顏色

#ffffff

樣式 - 寬度 1
線圖( Line )
列表 設定值
欄位 month*temperature
類型 線圖
顏色欄位

city

曲形折線圖

雙折線圖,用於比對兩組數據的趨勢。

預覽圖


曲形折線圖.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
temperature 比例尺( X軸 )
列表 設定值
欄位

temperature

類型 linear
優化數據範圍 開啟
最小值 0
格式化函數 function (val) { return val + '°C'; }
 
線圖( Line )
列表 設定值

欄位

month*temperature
類型 線圖
顏色欄位 city
形狀 smooth
點圖( point )
列表 設定值
欄位

month*temperature

類型 點圖

顏色欄位

city

形狀 circle
大小 4
樣式 - 顏色 #ffffff
顏色 - 寬度 1

階梯折線圖

階梯線圖(也稱為步驟圖)是與線圖相似的圖表,但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時,分階線圖可能 很有用。例如,奶製品價格上漲,汽油,稅率,利率等。

預覽圖


階梯折線圖.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
month 比例尺 ( X軸 )
列表 設定值
欄位 month
類型 cat
優化數據範圍 開啟
value 比例尺 ( Y軸 )
列表 設定值
欄位 value
類型 linear
刻度間距 10
優化數據範圍 開啟
最小值 30
最大值 110
點圖( point )
列表 設定值
欄位 month*value
類型 點圖
形狀 circle
樣式 - 顏色 #ffffff
樣式 - 寬度 1
線圖( Line )
列表 設定值
欄位 month*value
類型 線圖
形狀 hv

多條階梯折線圖

階梯線圖(也稱為步驟圖)是與線圖相似的圖表,但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時,分階線圖可能 很有用。例如,奶製品價格上漲,汽油,稅率,利率等。

預覽圖


多條階梯折線圖.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
線圖( Line )
列表 設定值
欄位 month*value
類型 線圖
顏色欄位 key
形狀 hv