*

折れ線グラフを作ってみる

公開日: : 最終更新日:2016/02/19 D3.js ,

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータを把握する時に使われます。円グラフはD3.jsに用意されたレイアウト機能を利用しましたが、折れ線グラフの場合はレイアウト機能は用意されていません。

折れ線グラフを表示するには。D3.jsのレイアウト機能を利用するのではなく、SVGの連続線を利用します。この連続線という物をどの座標ん位表示するかをプログラミングします。

まずはサンプルコードを実行して説明した方が良いと思います。

サンプルコードの実行結果はこちら

折れ線グラフを表示するには。D3.jsのsvgオブジェクトに用意されているd3.svg.line()メソッドを使います。d3.svg.line()メソッドは2点間の座標を結ぶ処理を行います。表示する線はd3.svg.line()としただけではエラーで表示されません。d3.svg.line()メソッドにはx(),y()()メソッドと使って表示する座標値を指定する必要があります。

データセットのデータから座標を返すようにするには、x(),y()メソッドに関数を指定します。メソッドに関数を指定する方法は、今までの記事で紹介してきた方法と同じです。関数にはデータとデータの出現順番が渡されます。なお、折れ線グラフも縦棒グラフと同様に、svg要素の高さからデータの値を減算しないと上下が逆になって表示されます。

スポンサードリンク

関連記事

D3.js

グラフをソートして表示する

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけでは

記事を読む

D3.js

ボタンをクリックして、折れ線グラフの表示範囲を変える

JSONファイルからデータを読み込んで折れ線グラフを表示します。グラフのデータの読み込みは10年分の

記事を読む

D3.js

ヒートマップをCanvasに表示する

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位で

記事を読む

D3.js

文字を描画する

SVGで文字を表示するにはtext要素を使います。<text>とと</text&g

記事を読む

D3.js

ツリーマップを表示する

ツリーマップレイアウトは階層(親子)関係を利用してチャートを表示します。以前の記事で出てきたパックレ

記事を読む

D3.js

複数の図形を操作する

D3.jsでは複数の図形を操作するにはselectAll()メソッドを使います。 selectAl

記事を読む

D3.js

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。 サンプルコードの実行結果はこちら [

記事を読む

D3.js

ヒートマップを作成する

ヒートマップはウェブページで多くクリックされた箇所や、地面や人体の温度変化を把握したいときに使われま

記事を読む

D3.js

D3.jsの基本的な流れ

D3.jsで作成するグラフのプログラムの構造は 下記のように考えます。 1.データの読み込み

記事を読む

D3.js

パックレイアウトで人口を表す

今回はパックレイアウトを使い日本の人口を表示します。 サンプルコードの実行結果はこちら

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑