デフラグの時によく見るようなグラフをWeb上に表示したい

環境

・Web

質問

デフラグの際や、ChromeのDevTools等でよく見かけるグラフがあると思います。
そのグラフを利用して、データの可視化（機械が動いている・止まっているなど）をしたいと思っています。

ただ、なかなかグラフの種類やグラフのライブラリを見つけられていません。
このライブラリで実装できたよ！グラフの名前はこうだよ！などあれば教えていただけると嬉しいです。
よろしくお願いします。

やりたいこと

横軸を時間等にし、この時間に機械が動いている、止まっているをを可視化したい。
例えば、10-12時まで動いている場合は、緑色
12-13時まで止まっている場合は、赤色
といったのを横向きの積み上げ棒グラフみたいな形で表現したいと思っています。
（イメージ画像を参考にしてください）

イメージ画像

「効率の良い『デフラグ』で性能低下を防ぐ」より引用
https://www.sakura-pc.jp/pc/contents/basis/defrag.html

m.ts10806

2018/12/11 05:48

これってもはやグラフじゃないと個人的には思っています。円グラフで代用できませんか？

退会済みユーザー

2018/12/11 05:53

横軸を時間にして、機械などが動いていた時間・止まっていた時間を表示したいというのが目標なので、円グラフでは代用することは難しいです。ただし、グラフではないという指摘は正しいかもしれません。divタグで作成してもいいのかもしれないと思います。

m.ts10806

2018/12/11 05:56

あくまで私見なので。ただ既存の有名どころにはそのままのグラフはないですしExcelなどにもないです。なので「グラフという括りではないのかな」と感じました。要件からすると面グラフや折れ線グラフで代用できそうにも思いました。念のためその目標部分を質問本文に追記いただけますか？私のはあくまで私見なのでもう少し良い意見が集まるかもしれません

coco_bauer

2018/12/11 06:33

デフラグの表示は、ディスクを領域分けして、その状態（連続データ、フラグメント、未使用など）を色で表現したもので、横棒全体が全ディスク領域に対応しますから、「１００％積み上げ横棒グラフ」に分類されると思います。時間を横軸にすると横軸全体が表す時間が増大してゆき個々の区分が小さく見えにくくなっていくことが懸念されます。