連続した時間におけるトレンドの方向性と全体的なボリュームを強調するため、面積チャート表現力豊かな視覚的アプローチを提供します。トレンドラインと水平軸の間の領域を塗りつぶすことで、面積チャートは相対的な大きさやシーケンス全体のボリュームの変化に注目を向けます。たとえば、サーバーの帯域幅使用量、アクティブユーザー数、または1日の取引処理量などです。
面積チャートの仕組み
面積チャートは、ラインチャートの設定を直接ベースに構築されています。type: 'line' および areaStyleシリーズオブジェクトに areaStyle プロパティを含めることで、レンダリングエンジンは自動的にラインパスの下部から水平基準線まで幾何学的な領域を塗りつぶします。
1. 必須の設定
基本的な面積チャートを構築するには、連続するX軸を定義し、シリーズにtype: 'line' を設定し、空またはカスタマイズされたareaStyle オブジェクトを宣言します：
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['月', '火', '水', '木', '金', '土', '日']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // デフォルトの面積塗りつぶしを有効化
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
高度な構造技術
面積チャートは、現代的なカラーグラデーションと滑らかな曲線を用いることで、読みやすさと視覚的な完成度を向上させることができます。
1. グラデーション塗りつぶしのスタイル
単色の塗りつぶしは、ときどき重たく感じることがあります。半透明の線形グラデーションを適用すると、塗りつぶしが下部の軸に向かってソフトに消える、現代的で洗練された外観が得られます：
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. 重ね合わせた複数シリーズの面積比較
1つのチャートに複数の面積シリーズを表示する場合、下層のデータパスが完全に見えるように塗りつぶしの不透明度を調整することが重要です：
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['受信トラフィック', '送信トラフィック']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: '受信トラフィック',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: '送信トラフィック',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
レイアウトと余白の微調整
面積の塗りつぶしがY軸の基準線まで完全に下まで伸びるため、連続した境界ギャップを設定することで、塗りつぶしがキャンバスの境界とすっきりと揃います。
1. 無縫接のエッジ整列
以下のように設定することでboundaryGap: falseカテゴリ型X軸に設定すると、塗りつぶしはコンテナグリッドの絶対的な左端から始まり、右端ですっきりと終了します：
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
戦略的なベストプラクティス
- 低い塗りつぶし透過率を使用する：固体の面積塗りつぶしは、下層のグリッド線や重複するシリーズを隠蔽します。高コントラストを保つため、透過率を常に20%～50%程度に保ちましょう。
- シリーズ数を2～3個に抑える：重複する面積形状が多すぎると視覚的な混乱を招きます。4つ以上の累積連続データセットの場合、スタックド面積チャートを使用してください。
- 以下のように設定する：
boundaryGap: false:時間軸の水平マージンを削除することで、面積の塗りつぶしがグリッド全体の幅をカバーでき、左端と右端に不自然な空白が残ることなくなります。