時間の経過とともに金融市場や資産価格の動きを追跡する際、キャンドルスティックチャートは業界標準の可視化ツールです。開高安終価（OHLC）の4つの重要な価格ポイントを1つの視覚的バーに統合することで、キャンドルスティックチャートは価格のボラティリティ、取引レンジ、市場のセンチメントを一目で把握でき、株式パフォーマンスダッシュボード、暗号資産の追跡、商品取引の視点において不可欠です。
キャンドルスティックの仕組み
Apache EChartsでは、キャンドルスティックシリーズはtype: 'candlestick'（または別名'k'）。各データポイントは、明確に[Open, Close, Lowest, Highest]という順序の4値配列が必要です。チャートエンジンは、OpenとCloseの間に実体または空洞のボディを描画し、細い「ワイス」線を最低価格および最高価格まで延長します。
1. 必須の設定
基本的なキャンドルスティックチャートを構築するには、連続するX軸に時間をマッピングし、[Open, Close, Lowest, Highest]配列をシリーズデータに渡します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [Open, Close, Lowest, Highest] -> 上昇（Close > Open）
[40, 35, 30, 50], // 下落（Close < Open）
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
高度な構造技術
キャンドルスティックチャートは、国際的な色の規則、ズームされた時間範囲、または移動平均と組み合わせることでカスタマイズできます。
1. カスタムカラーと移動平均
itemStyleを使用して、上昇（上）および下落（下）のバーの色をカスタマイズし、itemStyle、キャンドルスティックシリーズとラインシリーズを組み合わせることで、移動平均線を重ねて表示します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['1日ごとのK', 'MA5']
},
xAxis: {
type: 'category',
data: ['月', '火', '水', '木', '金', '土', '日']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '1日ごとのK',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // 上昇時（終値 > 始値）の色
color0: '#6ab04c', // 下降時（終値 < 始値）の色
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
レイアウトとインタラクティブズームの微調整
時系列のズームコントロールを追加することで、ユーザーは密集した過去の取引記録をナビゲートする際に柔軟性を得ます。
1. データズームと軸ポインターのコントロール
次のdataZoom構成ブロックを使用して、水平スライダーとマウスホイールズームを組み込みます：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['1日目', '2日目', '3日目', '4日目', '5日目', '6日目', '7日目', '8日目']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // マウスホイールズームを有効化
start: 20,
end: 100
},
{
type: 'slider', // 視覚的な下部ズームスライダー
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
戦略的なベストプラクティス
- データの順序を正しく設定する： 配列の構造を再確認してください！ EChartsは
[始値、終値、最安値、最高値]—終値と最安値を間違えて入れ替えることは、レンダリングバグのよくある原因です。 - 有効にする
scale: trueY軸に： 数値価格軸には常にscale: trueを含めるようにしてください。これにより、チャートが原点をゼロに固定するのではなく、現在の価格範囲に自動スケーリングします。 - クロスヘア軸ポインターを使用する：設定する
tooltip.axisPointer.type = 'cross'連続する垂直および水平の参照線を表示し、価格とタイムスタンプの整列を容易にする。