はじめに
今回も要望がありd3.jsのライブラリや記事を探していたら、近いことをされている方がいたのでその方の記事のX軸とY軸を切り替えたものを今回記事にしました。
睡眠時間のデータを時間ごとの帯グラフの上に描画するイメージです。
ソースはこちら
詳しくはその方の記事の解説を見てもらえるとわかりますが、このグラフは直近7日分の日付を動的に取得しているので場合によって静的にするか-1日だけの表示にするか変更が必要です。また、データの分割は同じ方のこの記事が参考になります。
オリジナル版との違いはXY軸の変換とデータの配列の3つめに種類を与えることで色分けを可能にしているところです。
Yellowfinのレポートの値を使うとしたらこの記事が参考になると思います。このソースの場合はdoDrawingの中のdata変数にデータが入っています。
time.js
//generateChart は必須の関数であり、Javascriptグラフの作成において呼び出しされます
generateChart = function (options) {
// これはお使いのブラウザのデバッガのブレークポイントのトリガとなるため、Javascriptをデバッグすることができます
debugger;
// グラフを描画する部分です
var $chartDrawDiv = $(options.divSelector);
// Javascriptに関係なく任意のポートレットでスクロールバーを停止するには、このCSSクラスを使用します
$chartDrawDiv.addClass('jsChartNoOverflow');
// これにより、datasetから高さと幅が取得されます。グラフの作成時にこれらを使用して、
// ダッシュボード、カンバス、ストーリーボードに正しく合わせます
//var height = options.dataset.chart_information.height;
//var width = options.dataset.chart_information.width;
var height = 400;
var width = 800;
// 必要に応じて、RAWデータJSONをグラフに必要な形式に変換します。
var processedData = processData(options.dataset.data);
// グラフの実績の描画を $chartDiv に行います。
doDrawing(processedData, $chartDrawDiv, height, width, options.errorCallback);
},
processData = function (dataset) {
// データが格納されるdatasetはカラム(列)ベースの形式であり、各カラム(列)にはデータの配列が含まれます
// eg. dataset.column_name[0].raw_data, dataset.column_name[0].formatted_data
},
doDrawing = function (data, $chartDiv, height, width, errorFunction) {
// require を使用して必要なJavascriptライブラリを読み込みます
// 付属するライブラリとその場所：
// js/chartingLibraries/c3/c3
// js/chartingLibraries/chartjs/Chart
// js/chartingLibraries/d3_3.5.17/d3_3.5.17
require(['js/chartingLibraries/d3/d3'], function (d3) {
try {
let divided = [
[
new Date("2022-01-10 03:00:00"),
new Date("2022-01-10 05:00:00"),
10
],
[
new Date("2022-01-10 05:30:00"),
new Date("2022-01-10 07:00:00"),
11
],
[
new Date("2022-01-11 01:00:00"),
new Date("2022-01-11 05:00:00"),
12
]
];
var $canvas = $('<svg id="svg"></svg>');
$chartDiv.append($canvas);
var margin = {
left: 30,
right: 30,
bottom: 50,
top: 30,
};
let svg = d3.select("#svg")
.attr("width", width)
.attr("height", height);
// グラフ描画コードはこちら
/* y 方向のスケールを作成する */
let nDates = 7; // 一週間分のデータを表示する
let y = d3.scaleLinear()
.domain([0, nDates])
.range([margin.top, height - margin.bottom]);
/* x 方向のスケールを作成する */
let x = d3.scaleLinear()
.domain([0, 24]) // 00:00:00 ~ 24:00:00
.range([margin.left, width - margin.right]);
/* 日付文字列のリストを取得する */
let tod = new Date();
let dateStrings = [];
let tmpDate = null;
for (let i = 0; i < nDates; i++) {
tmpDate = new Date();
tmpDate.setDate(tod.getDate() - i);
let ymd = tmpDate.toLocaleString().split(" ")[0];
let md = ymd.substring(5); // 年を取り除く
dateStrings.push(md);
}
dateStrings.reverse();
/* x 軸と目盛りを作成する */
let xAxis = svg.append("g")
.attr("class", "x_axis")
.attr(
"transform",
"translate(" +
[
0,
height - margin.bottom
].join(",") + ")"
)
.call(
d3.axisBottom(x)
.ticks(24)
.tickSize(-height + margin.top + margin.bottom)
.tickFormat(function (d) {
return d + ":00";
})
);
/* y 軸と目盛りを作成する */
let yAxis = svg.append("g")
.attr("class", "y_axis")
.attr(
"transform",
"translate(" +
[
margin.left,
0
].join(",") + ")"
)
.call(
d3.axisLeft(y)
.ticks(nDates)
.tickSize(-width + margin.left + margin.right)
.tickFormat(function (d, i) {
return dateStrings[i];
})
);
/* バーを描画する */
let innerWidth = width - margin.left - margin.right; // 内側の表示部分 (横幅)
let innerHeight = height - margin.bottom - margin.top; // 内側の表示部分 (高さ)
let barWidth = innerWidth / 24; // バーの横幅
let barheight = innerHeight / nDates;
let bars = svg.selectAll("rect")
.data(divided)
.enter()
.append("rect")
.attr("x", function (d, i) {
let start = d[0];
return x(toHour(start));
})
.attr("y", function (d, i) {
let start = d[0];
let startYmd = start.toLocaleString().split(" ")[0];
let startMd = startYmd.substring(5); // 2018/02/15 → 02-15
return y(dateStrings.indexOf(startMd));
})
.attr("height", barheight)
.attr("width", function (d, i) {
let milliSecInDay = 86400000; // Date - Date でミリ秒が返るため
let start = d[0];
let finish = d[1];
return innerWidth * (finish - start) / milliSecInDay;
})
.attr("fill", function (d, i) {
let colornum = d[2];
let color = "blue";
if (colornum == 10) {
color = "red";
} else if (colornum == 11) {
color = "green";
}
return color;
})
.style("opacity", 0.6);
/* その日の始めから何秒経過したかを返す */
function toSec(d) {
let elapsed = d.getHours() * 60 * 60 +
d.getMinutes() * 60 +
d.getSeconds();
return elapsed;
}
/* その日の始めから何時間経過したかを返す */
function toHour(d) {
let sec = toSec(d); // 経過秒
let secInDay = 86400; // 24 * 60 * 60
return sec / secInDay * 24;
}
/* 目盛りの日付文字列の位置を調整する */
yAxis.selectAll("g.tick")
.selectAll("text")
.attr(
"transform",
"translate(" +
[
0,
barheight / 2
].join(",") + ")"
);
} catch (err) {
errorFunction(err);
}
});
}
まとめ
先人様のソースを見ることでかなり理解を深められました。これで工場の稼働時間などの可視化なども可能になりそうですね。
参考にさせていただきました
D3.js -- 睡眠時間をグラフにプロットする
https://zdassen.hatenablog.com/entry/2018/02/21/012842
D3.js -- x軸、y軸の目盛りを描画する & グリッドを描画する
https://zdassen.hatenablog.com/entry/2018/02/15/131910
JavaScript -- 日付変更線をまたぐデータを翌日の00:00:00で分割する
https://zdassen.hatenablog.com/entry/2018/02/13/234150