折れ線グラフメーカー

使い方

1. 1 CSVデータを貼り付けます。1行目は列見出し、1列目はX軸のラベルとして扱われ、残りの列がそれぞれ1つのデータ系列（データセット）になります。
2. 2 曲線の滑らかさスライダーを調整して、線をより滑らかに、あるいはよりシャープにします。
3. 3 作成したグラフをPNGとしてダウンロードし、そのままスライドや資料に利用できます。

このツールを使う理由

• Chart.jsをベースに遅延読み込み（レイジーロード）— プレビュー部分までスクロールするまでページは軽いままです。
• RFC 4180準拠のCSV解析 — 引用符で囲まれたカンマやセル内の改行も正しく処理します。
• サーバーへのアップロードなし — データがブラウザの外に出ることは一切ありません。
• 1つのグラフに複数系列のデータを表示 — 数値列がそれぞれ独立した折れ線になります。

よくある質問

折れ線グラフメーカー とは？

折れ線グラフメーカー（Line Chart Maker）は、貼り付けたCSVデータをブラウザ上でそのまま折れ線グラフに変換できるツールです。1系列または複数系列のデータを軸に沿った点の連なりとして描画し、点と点の間の曲線を滑らかにするスライダーも備えています。完成したグラフはPNG画像として書き出せ、処理はすべてブラウザ内（クライアントサイド）で行われるため、データがサーバーにアップロードされることはありません。

機能

例

Month,Visitors,Signups
Jan,1200,80
Feb,1500,110
Mar,1800,150
Apr,2200,180
May,2700,260
Jun,3100,320

line-chart-maker.png — two lines ("Visitors" in #10b981, "Signups" in #0ea5e9) plotted over 6 X-axis points (Jan–Jun), default curve tension 0.35, legend shown, rendered at the canvas's on-screen resolution and downloaded as a PNG data URL.

主な用途

1. 1

   レポート用に時系列指標を可視化する

   最初の列に日付を入れて月次または週次の数値（トラフィック、収益、登録数など）を貼り付けると、スライド資料やドキュメントにそのまま使えるマルチラインのトレンドグラフが得られます。

2. 2

   スプレッドシートアプリなしで複数系列を比較する

   追加されたCSVの各列は同じ軸上に独立した折れ線としてプロットされるため、関連する2つまたは3つの指標を並べて素早く比較するのに役立ちます。

3. 3

   エクスポートしたCSVデータを共有可能な画像に変換する

   分析ツール、スプレッドシート、データベースからCSV形式でデータをエクスポートし、貼り付けてPNGグラフをダウンロードするだけで、グラフ作成ソフトのインストールやコードの記述は不要です。

参考文献

• Chart.js — 折れ線グラフ（Line Chart） — Chart.js
• Chart.js — データ構造（Data Structures） — Chart.js
• RFC 4180 — カンマ区切り値（CSV）ファイルの共通形式およびMIMEタイプ — IETF
• HTMLCanvasElement.toDataURL() — MDN Web Docs