日々の習慣、ウェブサイトのアクセス数、サーバーの活動ログ、または1年間のカレンダー期間にわたる売上強度を追跡する際、カレンダーチャート効果的なグリッドベースの視覚的レイアウトを提供します。貢献グラフや季節的ヒートマップをモデルにしたカレンダーチャートは、特定のカレンダーデーにわたって連続的な定量的指標をマッピングし、ユーザーが高活動ピーク、週末の変動、複数ヶ月にわたる季節パターンを一目で把握できるようにします。
カレンダーチャートの仕組み
Apache EChartsでは、カレンダーチャートは専用のcalendar座標系と、heatmapまたはscatterシリーズタイプを併用します。標準のカルテシアンX軸とY軸ではなく、EChartsは日付文字列を使って自動的に日と月のグリッド位置を計算します。
1. 必須の設定
基本的な年間カレンダーヒートマップを作成するには、calendarコンポーネントを定義し、範囲（例：'2026'）を指定し、visualMapメトリクスの色の勾配を制御し、日付-値のタプルを['YYYY-MM-DD', 値]:
ECharts
Edit ECharts in VPasCode
option = {
title: {
top: 10,
left: 'center',
text: '毎日のコミット (2026)'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' コミット';
}
},
visualMap: {
min: 0,
max: 100,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 65,
inRange: {
color: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
calendar: {
top: 120,
left: 30,
right: 30,
cellSize: ['auto', 13],
range: '2026',
itemStyle: {
borderWidth: 0.5,
borderColor: '#ccc'
},
yearLabel: { show: false }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],
['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],
['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]
]
}
};
高度な構造技術
カレンダーチャートは、垂直スクロールレイアウトに適応させたり、散布図表現をカスタマイズして、離散的な日々の指標を可視化したりすることができます。
1. 垂直マルチヶ月カレンダービュー
変更するorient: 'vertical'カレンダーコンポーネントで縦方向に月を積み重ねる—高めのダッシュボードウィジェットやモバイルレイアウトに最適です：
ECharts
Edit ECharts in VPasCode
option = {
title: {
text: 'Q1 活動ログ',
left: 'center'
},
tooltip: {},
visualMap: {
min: 0,
max: 500,
type: 'continuous',
orient: 'vertical',
right: 10,
top: 'center',
inRange: {
color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
calendar: {
top: 60,
left: 'center',
orient: 'vertical',
range: ['2026-01-01', '2026-03-31'],
cellSize: [20, 20],
yearLabel: { show: false },
dayLabel: {
firstDay: 1, // 曜日を月曜日から開始
nameMap: 'en'
},
monthLabel: { nameMap: 'en' }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
レイアウトとスタイルの微調整
カレンダー座標系と散布図シリーズを組み合わせることで、色のブロックだけではなく、強度に基づいて点のサイズをスケーリングできます。
1. 散布図バブルカレンダー
使用するtype: 'scatter'のカレンダー座標系は、インタラクティブなバブルスタイルの日次インジケーターを作成します：
ECharts
Edit ECharts in VPasCode
option = {
title: {
text: '日次注文数',
left: 'center'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' 件の注文';
}
},
calendar: {
top: 80,
left: 40,
right: 40,
range: '2026-05',
cellSize: ['auto', 25],
itemStyle: {
color: '#f8fafc',
borderWidth: 1,
borderColor: '#e2e8f0'
}
},
series: {
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: function (val) {
return val[1] / 10; // 注文数に応じてバブルサイズをスケーリング
},
itemStyle: {
color: '#3b82f6',
opacity: 0.8
},
data: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
戦略的なベストプラクティス
- 日付をISO形式に合わせる：シリーズデータ配列内の日付が標準の
'YYYY-MM-DD'文字列形式に従うようにしてください。これにより、カレンダーグリッドが記録を正確にマッピングできます。 - 設定する
firstDay地域の整合性を保つために：使用するdayLabel.firstDay（設定値は0日曜日または1月曜日) に変更して、視聴者の地域のカレンダー規則に合わせます。 - コントリビューション用に区分的 VisualMap を併用する： GitHub風のコミットグラフをレンダリングする際は、
区分的連続的なグラデーションではなく、離散的な色の停止点を持つビジュアルマップタイプを使用して、より明確なカテゴリカルな視覚的ステップを実現します。