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

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

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

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

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

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

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

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

  • ラベル/値:ラベルと数値。
  • 座標:X と Y(バブルにはサイズもあります)。
  • 複数のデータセット:カテゴリはカンマ区切り、各データセットの値はカンマ区切りの数値リスト。複合では各データセットを棒か折れ線に設定します。
  • 箱ひげ/バイオリン:値の欄にカンマ区切りの数値リスト。
  • ヒートマップ:X, Y(カテゴリ)と値。
  • サンキー:開始、終了、フロー量。
  • コロプレス:国はドロップダウンから選び(名称はインターフェースの言語)、値を入力します。
  • エラーバー付き棒: ラベル, 値, 誤差.
  • ローソク足 / OHLC: 日付, O/H/L/C.
  • ファネル: ラベル, 値.
  • ベン図: 集合(カンマ区切り), 値.
  • グラフ(ネットワーク): ノード(カンマ区切り), 開始/終了.
  • ゲージ: 値, 最大.
  • 関数 タイプは y = f(x) を描画します。式(例: sin(x)、x^2、sqrt(x))、X の範囲(最小・最大)、点の数を入力します。関数 が式を評価して曲線を描き、式はグラフ下のデータ一覧にも表示されます。

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

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

「インポート」ボタンで、.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 は通常のテキスト編集として動作します。

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

データ表の上の「詳細設定」には任意の設定がまとまっています:サブタイトル、線のスムージング・ステップ・破線・塗りつぶし、積み上げと対数Y軸、間引き、凡例の位置、点のサイズと線の太さ、アニメーションの時間とイージング、そして必要時に読み込む効果(データラベル、ズーム/パン、注釈、トレンドライン、十字線)。複合・マルチグラフでは各データセットを左右どちらかのY軸に割り当てられます。各オプションは該当する種類でのみ表示されます。