棒グラフはなんだかんだよく使われます。
スタイルシートで成形することも可能ですが、今回はd3.jsを使って、データをもとにグラフを作成したサンプルです。
描画はSVGになります。アニメーションを付けていますが、外すことも可能です。
実行結果はこちら
d3.jsを使うのではじめに読み込みを記述します。
<script src="https://d3js.org/d3.v5.min.js"></script>
d3.jsは最新のものを使うようにすることと、バージョンによって使えなくなる関数があるので、
エラーが出た場合は、推奨される代案を探しましょう。以下のJSはやや長いので説明をいれています。
var dataset = [
['サンプル',6],
['コピペ',8],
['デモ',2],
['事例',5]
];
var W = 180;
var H = 100;
var BAR_W = 30;
var BAR_YOHAKU = 1;
var W_YOHAKU = 25;
var H_YOHAKU = 10;
var svg = d3.select("#demoarea")
.append("svg")
.attr("width", W)
.attr("height", H + H_YOHAKU * 2 + 80);
//高さと余白と下のラベル文字の高さを確保
// スケール
var scale = d3.scaleLinear()
.domain([0, 10]) //データの範囲
.range([0, H]); //高さの範囲
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
// i番目のdはデータ
return i * (BAR_W + 5) + W_YOHAKU + 5;
// i * (BAR_W + 棒の右の余白分) + W_YOHAKU + 最初の棒の左の余白分;
})
// アニメーションのために追加
.attr("height", 0) // 高さ0
.attr("width", BAR_W) //
.attr("y", H + H_YOHAKU) // yが0
.transition() // アニメーションする
.duration(500) // ミリ秒かけて以下の状態にする
.delay(function(d, i) {
return i * 100; // アニメーションの開始をミリ秒ずつずらす
})
// アニメーション終わり
.attr("y", function(d, i) {
// 開始点を全体高さから高さを引いた値とする
return H - scale(d[1]) + H_YOHAKU;
})
.attr("width", BAR_W)
.attr("height", function(d) {
// データ配列の１コ目を高さとする
// scale関数により10を100と変換する
return scale(d[1]);
})
// グラフの色設定
.attr("style", "fill:#8888FF");
// グラフの値を棒近くに配置
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[1];
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (BAR_W + 5) + 20 + W_YOHAKU;
})
.attr("y", function(d) {
return H - scale(d[1]) - 5 + H_YOHAKU;
})
.attr("font-size", "10px")
// アニメーションのために追加
.attr("fill", "#FFFFFF")
.transition() // アニメーションする
.duration(1000) // ミリ秒かけて以下の状態にする
.delay(function(d, i) {
return i * 200; // アニメーションの開始をミリ秒ずつずらす
})
// アニメーション終わり
.attr("fill", "#111188");
// 縦軸のメモリ追加
var yScale = d3.scaleLinear()
.domain([0, 10])
.range([H, 0]);
var axis = d3.axisLeft()
.scale(yScale)
.ticks(4);
svg.append("g")
.attr("transform", "translate(" + W_YOHAKU + "," + H_YOHAKU + ")")
.attr("class", "axis")
.call(axis);
// 横軸の線を追加
svg.append("rect")
.attr("width", W - W_YOHAKU)
.attr("height", 1)
.attr("x", W_YOHAKU)
.attr("y", H + H_YOHAKU);
// 横軸の下のデータテキストを配置
svg.selectAll(".x_text")
.data(dataset)
.enter()
.append("text")
.attr("class", "x_text")
.attr("x", function(d, i) {
return i * (BAR_W + 5) + 20 + W_YOHAKU;
})
.attr("y", H + H_YOHAKU + 5)
.text(function(d, i) {
return d[0];
});
スタイルはこちら。
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
/* 枠線のぼかしをなくす */
}
.axis text {
font-size: 11px;
}
.x_text {
writing-mode: vertical-rl;
/* 縦書き */
font-size: 10px;
}
数字を書き換えて見るとすぐにカスタマイズが可能です。
