Chart.jsで作ったグラフ入りHTMLをそのまま共有する方法

JS描画のグラフが相手の画面で出ない原因

Chart.jsはcanvas要素に対してJavaScriptが実行時にグラフを描きます。つまりHTMLを開いた瞬間にスクリプトが動いて初めてグラフが現れる仕組みです。HTMLファイル単体を渡しても、必要なJSやデータが揃っていなければ空白のまま表示されません。

ローカルではきれいに出ていたのに、相手に送ったら何も映らないという相談はこのパターンが大半です。自分の環境にあるライブラリや読み込み元が、相手の環境では参照できていないことが原因です。

まずは何に依存しているのかを把握することが、崩さず共有するための出発点になります。

崩さず渡すために必要なファイルを揃える

確実に再現させるなら、Chart.js本体とグラフ定義のJS、表示するデータ、スタイル用のCSSをすべて同じ場所にまとめます。CDNから読み込む構成でも動きますが、オフラインや回線が不安定な環境を考えると、本体を同梱しておくほうが安全です。

データを外部ファイルから読み込んでいる場合は、そのファイルも忘れずに含めます。相対パスで参照していれば、フォルダ構成を保ったままZIPにすることでリンク切れを防げます。

最短手順：まずこの3ステップで完了

Chart.jsで作ったグラフ入りHTMLをそのまま共有は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

グラフ入りHTMLを共有URLにする手順

必要なファイルが揃ったら、フォルダごと共有してしまうのが確実です。次の手順で進めます。

途中で自分の目で描画を確認する工程を挟むのがポイントです。相手に渡してから「グラフが出ない」と言われると原因の切り分けに時間がかかるため、発行直後の確認を習慣にしておくと安心です。

1. HTMLとChart.js本体、グラフ定義のJS、データ、CSSを一つのフォルダにまとめる
2. 相対パスの参照が崩れないようフォルダ構成を保ったままZIPに圧縮する
3. ギガサイト便のトップにZIPをドロップして共有URLを発行する
4. 発行後にURLを開き、グラフが意図どおり描画されるかを自分で確認する
5. 問題なければ相手にURLを渡し、見てほしいグラフのポイントを添える

表示の速さとHTTPSが効くデータ共有

グラフ入りページは画像やライブラリで読み込むファイルが増えがちです。ギガサイト便はCDNのエッジ配信で表示が速く、HTTPSも自動で付くため、データを扱うページでも安心して相手に渡せます。

数値や指標を載せたページは社外秘になることも多いものです。表示が速いだけでなく、後述の認証で見られる相手を絞れる点も、データ共有には向いています。

数値データを見せるときの認証と期限

売上や利用状況などのグラフは、関係者以外に見られたくないケースがほとんどです。認証はURLのみ、パスワード、メール認証、会社ドメイン認証から選べるので、相手に応じて使い分けてください。

報告が終わったグラフをいつまでも公開しておく必要はありません。公開期限を設定すれば期限切れで自動的に閲覧できなくなります。無料プランの公開期限は最長7日です。最新の数値に更新したいときは、同じURLのままファイルを差し替えれば送り直さずに反映できます。