縦棒グラフ

: D3.js

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

2015/10/29 データソート, 縦棒グラフ

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけではなく、インタラクティブに表現したいことがあります。たとえば、棒グラフで商品別の売り上げを表示する時、 ...

CSVファイルからデータを読み込んで表示するものを今回作成します。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　CSVファイルからデータを読み込んでから縦棒グラフを表示する</title>

	<style>
	svg{
		width:320px;
		height:340px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}


	/*
		縦棒グラフにラベルを表示する設定
	*/
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	
	.axis text{
		font-family:sans-serif;
		font-size:11px;
	}
	.axis path,
	.axis line{
		fill:none;
		stroke:green;
	}
	.axisX line{
		fill:none;
		stroke:black;
	}
	.barName{
		font-size:9px;
		text-anchor:middle;
	}
	</style>
	<script src="../js/d3.js"></script>

</head>
<body>
	<h2>CSVファイルからデータを読み込んで、縦棒グラフを表示</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　CSVファイルからデータを読み込んでから縦棒グラフを表示する</title>

<style>

svg{

width:320px;

height:340px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

縦棒グラフにラベルを表示する設定

.barNum{

font-size:10px;

text-anchor:middle;

}

.axis text{

font-family:sans-serif;

font-size:11px;

}

.axis path,

.axis line{

fill:none;

stroke:green;

}

.axisX line{

fill:none;

stroke:black;

}

.barName{

font-size:9px;

text-anchor:middle;

}

</style>

</head>

<body>

<h2>CSVファイルからデータを読み込んで、縦棒グラフを表示</h2>

</body>

</html>

[crayon-641a4977 ...

: D3.js

縦棒グラフにアニメーションを付ける

2015/10/18 アニメーション, 縦棒グラフ

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.jsでのアニメーションは下記のように行います。１．attr(),style()メソッドでアニメーション ...

: D3.js

縦棒グラフに目盛りを表示してみる

2015/10/18 縦棒グラフ

縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルをHTMLファイル内でしてします。必要な情報は目盛りに表示する文字列とフォント、目盛りの線の色です。サンプルコードの実行結果はこちら [ ...

: D3.js

D3.jsで縦棒グラフを表示してみる

2015/10/18 グラフ内に数値, 縦棒グラフ

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は縦棒グラフも同じです。異なる点は、グラフの棒が横に伸びるか、縦に伸びるかの違いです。グラフ内に数値 ...