メインコンテンツまでスキップ

データをグラフにする

Blotchライブラリには、数値をひと目で伝えるためのグラフが用意されています。グラフは白黒で描かれ、複数の系列は色ではなく破線や塗りつぶしの模様で区別されるので、電子ペーパー（e-ink）でも読みやすさが保たれます。フレームがダークテーマのときは、暗い背景に明るい線の表示に自動で切り替わります。

import { LineChart } from "~lib/charts/line-chart";

export const Widget = () => <LineChart data={[12, 18, 15, 22, 30]} />;

どのグラフも~lib/charts/<name>からインポートします。

グラフを選ぶ​

グラフ向いている用途
LineChart時間による推移を線で表す。
AreaChart線の下側を塗りつぶして表す。
BarChart値を並べて比べる。縦向きにも横向きにもできます。
Sparkline軸のない小さな推移線。数値の横に添えます。
BarIndicatorある数値が目標の数値にどこまで近づいたか。ストレージの使用量など。
DonutGaugeある数値が全体に占める割合をリングで表す。バッテリー残量など。
PieChart全体に対する各部分の割合。
TreeMap全体に対する各部分を、値に応じた大きさの入れ子の長方形で表す。
CandlestickChart始値、高値、安値、終値。
ScatterPlot線で結ばない個々の点。
Heatmapマス目ごとの強弱。日ごとのアクティビティなど。
ContributionGrid1年分のアクティビティを、1日1マスで表す。
FunnelChart段階ごとに絞られていく数。登録した人のうち顧客になった人の数など。
RadarChart複数の指標を一度に比べる。
SankeyChartある場所から別の場所への量の流れ。
SurfaceChartマス目上の値を3Dの曲面で表す。

リファレンスにある各グラフのページに、propsの一覧と例が載っています。

取得したデータをグラフにする​

グラフはただの配列を受け取るので、APIのレスポンスをmapで配列に変換します。useFetchはウィジェットが描画される前にデータがそろうのを待つので、事前に確認することは何もありません。

import { LineChart } from "~lib/charts/line-chart";
import { useFetch } from "~lib/use-fetch";

type Reading = {
  readonly time: string;
  readonly temperature: number;
};

export const Widget = () => {
  const { data } = useFetch<Reading[]>("https://api.example.com/readings");

  return (
    <LineChart
      data={data.map((reading): [Date, number] => [
        new Date(reading.time),
        reading.temperature,
      ])}
      axis={{ x: { visible: true }, y: { visible: true, name: "°C" } }}
      width="100%"
      height="100%"
    />
  );
};

サイズ​

widthとheightには、ピクセル数（200）か、任意のCSSのサイズ（"100%"、"12rem"）を指定します。与えられたスペースいっぱいにグラフを広げるには、両方を"100%"にします。こうしておけば、ウィジェットのサイズが変わっても見た目が崩れません。

"100%"にしたグラフは、ウィジェットのどのプレビューでも枠いっぱいに広がります。線、塗りつぶし、棒は枠に合わせて伸びますが、文字、点、模様の大きさは変わりません。PieChartやDonutGaugeのような円形のグラフは、形を保ったまま枠に合わせて拡大・縮小します。