スタートページ＞
Javascript＞
SVG
D3.js 折線グラフと棒グラフ
折線グラフと棒グラフの代表的な例を掲げます。
・標準値（ここで適当に定めたパラメタの値）によるグラフの作成
・指定値（利用者が Form で指定したパラメタの値）によるグラフの作成
利用法
- 「標準値実行」で画面を表示する。
- 「コード表示」で「標準値実行」でのコードを別ウインドウに表示させる。
そのコードを、利用者ファイルにコピーする。
- form でパラメタを適宜変更し、「指定値実行」で試行錯誤する。
- 満足できる結果になったら、ファイルでのパラメタ値を変更する。
さらに調整が必要ならば、ファイルの処理部分を変更する。
入力データの形式
すべて連想配列になっています。通常配列にする場合は「D3.js 全体の構成」を参照してください。
折線グラフ(１系列)(２系列) それ以外
var 入力データ = [ var 入力データ = [
{x:10, y1:45, y2:30}, {x:"A", y1:45, y2:30},
{x:20, y1:30, y2:20}, {x:"B", y1:30, y2:20},
{x:25, y1:15, y2:30}, {x:"C", y1:15, y2:30},
{x:40, y1:10, y2:20}, {x:"D", y1:10, y2:20},
{x:50, y1:15, y2:20} {x:"E", y1:15, y2:20}
]; ];
折線グラフ（１系列）
|
|
↓<svg id="svgLine1"></svg>
|
折線グラフ（２系列）
|
|
↓<svg id="svgLine2"></svg>
|
棒グラフ（１系列）
|
|
↓<svg id="svgBar1"></svg>
|
棒グラフ（２系列）
|
|
↓<svg id="svgBar2"></svg>
|
混合グラフ（１軸）
|
|
↓<svg id="svgBarLine1"></svg>
|
混合グラフ（２軸）
|
|
↓<svg id="svgBarLine2"></svg>
|