Chart-Maker — ブラウザでグラフやチャートを作成するウェブアプリケーション

オンライン/オフライン生成、21種類のグラフ、PNG JPEG WEBP AVIF SVGへのエクスポート、履歴ログ、詳細な説明書、アプリのインストール

ユーザー向け アプリケーション
Chart-Maker アプリ
開発者向け ライブラリ
Chart-Maker ライブラリ
グラフ設定
JSON
プレビュー
使い方 — 詳細な手順

「グラフ設定」パネルにはすべての操作項目があり、その隣のライブプレビューは変更のたびに自動更新されます。画面が広いときは左右に並び、スマホでは上下に重なって、設定の下にプレビューが表示されます。

手順:1)グラフの種類を選ぶ。2)タイトルとデータセット名を入力する。3)下の表にデータを入力する。4)必要に応じて元に戻す/やり直す。5)「エクスポート」を開いて画像をダウンロードするかプロジェクトを保存する。

データの入力方法ごとにグループ化された21種類があります:

  • ラベル/値:棒、折れ線、面、横棒、円、ドーナツ、レーダー、鶏頭図、ワードクラウド。
  • X/Y 座標:散布図(X, Y)、バブル(X, Y, サイズ)。
  • 複数のデータセット:積み上げ、グループ化、複数折れ線、複合(各データセットは棒または折れ線)。
  • カテゴリと値のリスト:箱ひげ図、バイオリン図。
  • 階層:ツリーマップ(ラベル、値、グループ)。
  • グリッド:ヒートマップ(X, Y, 値)。
  • フロー:サンキー図(開始、終了、フロー)。
  • 地図:コロプレス(リストから選んだ国、値)。

データ表は選んだ種類に合わせて変わります。「行を追加」で項目を追加し、×印で削除します。

  • ラベル/値:ラベルと数値。
  • 座標:X と Y(バブルにはサイズもあります)。
  • 複数のデータセット:カテゴリはカンマ区切り、各データセットの値はカンマ区切りの数値リスト。複合では各データセットを棒か折れ線に設定します。
  • 箱ひげ/バイオリン:値の欄にカンマ区切りの数値リスト。
  • ヒートマップ:X, Y(カテゴリ)と値。
  • サンキー:開始、終了、フロー量。
  • コロプレス:国はドロップダウンから選び(名称はインターフェースの言語)、値を入力します。

「エクスポート」ボタンでウィンドウが開きます。

  • 形式:PNG、JPEG、WEBP、AVIF(ブラウザ内でエンコードされる実際の形式。エンコーダは初回使用時に読み込まれます)、SVG(ベクター)。
  • 幅と高さ — 画像サイズ(ピクセル)。空欄は現在のグラフサイズを意味します。
  • 画像をダウンロード — 画像を保存します。背景とグラフ下のデータ一覧が追加されます。
  • プロジェクトを保存 — すべての設定を含む .json ファイル。「履歴とログを含める」にチェックすると、それらもファイルに追加されます。

「インポート」ボタンで、.json プロジェクトファイルをドロップするかクリックして選択できる領域を持つウィンドウが開きます。ファイルを選ぶと「プロジェクトを適用」ボタンが有効になり、設定(保存されていれば履歴とログも)を読み込みます。

  • Ctrl/Cmd + Z — 元に戻す
  • Ctrl/Cmd + Y または Ctrl/Cmd + Shift + Z — やり直し
  • Ctrl/Cmd + S — プロジェクトを保存
  • Ctrl/Cmd + E — エクスポートウィンドウ
  • Ctrl/Cmd + O — インポートウィンドウ
  • Ctrl/Cmd + J — ログ
  • Ctrl/Cmd + , — 設定

入力欄の中では Ctrl+Z と Ctrl+Y は通常のテキスト編集として動作します。

  • 元に戻す/やり直し:データと設定の変更を前後に移動します。
  • ログ:操作・ヒント・エラーを記録します。消去できます。