付録A6: 株価ローソク足チャート
SVGは、金融市場のデータを視覚化するためによく使われるローソク足チャートの描画にも活用できます。ローソク足チャートは、特定の期間における価格の始値、高値、安値、終値（四本値）を一つの「ローソク」で表現し、市場の動向を直感的に把握するのに役立ちます。
このサンプルでは、ダミーの株価データを使って、SVGとJavaScriptで基本的なローソク足チャートを作成し、マウスオーバーで詳細情報を表示する機能を追加します。
完成デモ: ローソク足チャート
下のチャートは、数日間のダミー株価データをローソク足で表示しています。各ローソクにマウスを合わせると、その日の詳細（日付、始値、高値、安値、終値）がツールチップで表示されます。「データを更新」ボタンで異なるデータセットを生成できます。
使用した主なテクニック
- SVG
<rect>要素: ローソク足の「実体」（始値と終値の間の長方形）を描画。 - SVG
<line>要素: ローソク足の「ヒゲ」（高値と安値を示す線）を描画。 - SVG
<text>要素: X軸（日付）、Y軸（価格）のラベルや目盛り、ツールチップ内の情報を表示。 - SVG
<g>要素: 各ローソク足（実体とヒゲ）、軸、ツールチップなどをグループ化。 - JavaScriptによるデータ処理と描画ロジック
- イベント処理 (JavaScript)
Did you know? Candlestick charts are said to have been developed in 18th century Japan by Munehisa Homma, a rice merchant, to visually represent rice price dynamics. They were later introduced to the Western world by Steve Nison in his book "Japanese Candlestick Charting Techniques."
知っていましたか？ローソク足チャートは、18世紀に日本の米商人である本間宗久が米の価格動向を視覚的に表現するために開発したと言われています。その後、スティーブ・ニソン氏が彼の著書「罫線分析とローソク足」 (原題: "Japanese Candlestick Charting Techniques") によって西洋に紹介しました。
まとめ
SVGとJavaScriptを組み合わせることで、金融データや時系列データを視覚化するローソク足チャートのような専門的なグラフも作成できます。データの特性を理解し、それをSVGの図形要素（この場合は<rect>と<line>）の座標やサイズ、色に適切にマッピングすることが重要です。
このサンプルは基本的なローソク足チャートですが、ここからさらに移動平均線や出来高グラフ、描画期間の選択といった機能を追加していくことで、より本格的なチャートツールへと発展させることも可能です。
これにて、「リッチなSVGサンプル集」は終了です。次は、SVGを使った「付録B1: ドットキャッチゲーム」で、SVGのインタラクティブな側面をゲームという形で体験してみましょう！
このページの要約
日本語
このページでは、SVGとJavaScriptを使って株価のローソク足チャートを作成するサンプルを紹介しました。ダミーの時系列データ（日付、始値、高値、安値、終値）に基づき、各ローソク足をSVGの<rect>（実体）と<line>（ヒゲ）で描画します。陽線と陰線は異なる色で表示。JavaScriptでデータ処理、座標計算、SVG要素の動的生成と属性設定を行い、マウスオーバーで各ローソクの詳細情報をツールチップ表示する機能を実装しました。
English
This page presented a sample for creating a stock candlestick chart using SVG and JavaScript. Based on dummy time-series data (date, open, high, low, close), each candlestick is drawn with SVG <rect> (body) and <line> (wicks). Bullish and bearish candles are displayed in different colors. JavaScript handles data processing, coordinate calculations, dynamic generation of SVG elements and attribute settings, and a tooltip feature displaying detailed information for each candle on mouseover was implemented.
Español
Esta página presentó una muestra para crear un gráfico de velas japonesas (candlestick) usando SVG y JavaScript. Basado en datos de series temporales ficticios (fecha, apertura, máximo, mínimo, cierre), cada vela se dibuja con elementos <rect> (cuerpo) y <line> (mechas) de SVG. Las velas alcistas y bajistas se muestran en diferentes colores. JavaScript maneja el procesamiento de datos, cálculos de coordenadas, generación dinámica de elementos SVG y configuración de atributos, y se implementó una función de información sobre herramientas que muestra información detallada de cada vela al pasar el mouse.
中文
本页展示了使用SVG和JavaScript创建股票K线图（蜡烛图）的示例。基于虚拟的时间序列数据（日期、开盘价、最高价、最低价、收盘价），每个K线使用SVG的<rect>（实体）和<line>（影线）绘制。阳线和阴线以不同颜色显示。JavaScript处理数据、坐标计算、动态生成SVG元素和属性设置，并实现了鼠标悬停时显示每个K线详细信息的工具提示功能。