連続的な進行や時系列の変化を追跡する際には、ラインチャートが主な視覚的ツールとして機能します。個別のカテゴリ間の比較に注目する離散的な棒グラフや柱グラフとは異なり、ラインチャートはつながりと傾きに注目し、モーメンタム、季節性、および急激な指標の変化を、1日あたりのアクティブユーザーの増加、月次定期収益、センサーのテレメトリストリームなど、連続したシーケンスにおいて強調します。
ラインチャートの仕組み
Apache EChartsでは、ラインの可視化は、シリーズのtypeプロパティを'line'に設定することで構成されます。ラインチャートは、連続的なカテゴリまたは時系列の水平軸（xAxis）に沿って順次並べられたデータポイントを結び、連続的な数値を垂直軸（yAxis).
1. 必須のセットアップ
基本的なラインチャートを構築するには、X軸に連続的なカテゴリを定義し、データセットをtype: 'line':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['月', '火', '水', '木', '金', '土', '日']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260]
}
]
};
高度な構造技術
ラインチャートは、複数の指標の重ね合わせ、滑らかな補間曲線、カスタマイズ可能なデータポイントのインジケーターに対応する柔軟性を提供します。
1. スムーズな補間曲線
デフォルトでは、ラインシリーズはデータポイントを直線セグメントで結びます。smooth: trueを有効にすると、3次スプライン補間を適用して、データセット全体に自然な曲線を描くラインパスを作成します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
lineStyle: {
width: 3,
color: '#5470c6'
}
}
]
};
2. 複数線によるパフォーマンス比較
同じ時間間隔にわたって二次的な指標を比較するには、series配列内に複数の線オブジェクトを指定します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['現在期間', '前期間']
},
xAxis: {
type: 'category',
data: ['週1', '週2', '週3', '週4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '現在期間',
type: 'line',
smooth: true,
data: [320, 332, 301, 334],
itemStyle: { color: '#5470c6' }
},
{
name: '前期間',
type: 'line',
smooth: true,
data: [220, 182, 191, 234],
itemStyle: { color: '#91cc75' }
}
]
};
領域の塗りつぶしとデータポイントの微調整
線系列は、控えめな背景グラデーションの塗りつぶしや、重要なマイルストーンに注目を引くためのターゲットデータマーカーを使用して視覚的に強化できます。
1. 線の領域スタイル
にareaStyleプロパティを追加すると、標準の線グラフが領域表示に変換され、線のパスと水平軸の間の領域が埋められます：
ECharts
Edit ECharts in VPasCode
option = {
xAxis: {
type: 'category',
boundaryGap: false, // 線を軸の端に直接合わせる
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
data: [300, 280, 250, 590, 820, 710, 430],
areaStyle: {
color: 'rgba(84, 112, 198, 0.25)' // 線の下にソフトな塗りつぶし
},
lineStyle: {
width: 3,
color: '#5470c6'
},
symbolSize: 8
}
]
};
戦略的なベストプラクティス
- 使用する：
boundaryGap: false時間シーケンスの場合：連続する時間軸のデフォルトの端のギャップを削除することで、線がゼロマージンから直接始まり、クリーンな端から端までの表示が可能になります。 - 線の数を少なくする：1つのキャンバスに4～5本以上の線を描画しないようにしてください。混雑した線グラフ（「スパゲッティチャート」）はすぐに読みにくくなります。
- 軸のツールチップトリガー 常に設定してください
ツールチップ: { trigger: 'axis' }ユーザーが任意の水平位置にマウスを合わせて、すべての有効なラインシリーズの正確な値を同時に表示できるようにするためです。