はじめに
本ドキュメントの目的
本ドキュメントは、Chart.jsというJavaScriptライブラリをCDN（コンテンツデリバリーネットワーク）経由で導入し、実際に使うまでを丁寧に解説します。コード例と手順を中心に、つまずきやすい点を分かりやすく示します。
対象読者
ウェブページにグラフを表示したい初心者から中級者向けです。JavaScriptの基本的な知識があれば、よりスムーズに読み進められますが、初めての方にも配慮して説明します。
本書で学べること
- Chart.jsの概要と特徴
- CDNを使った導入手順と基本実装
- フルHTMLテンプレートの例
- CDNと手動ダウンロードの比較
- Shinyアプリへの組み込み例やインタラクティブ機能
進め方
各章は実例を重視しています。まずはCDNで素早く動かしてみて、その後で詳しい設定や応用に進む構成です。疑問点があれば、章ごとに確認しながら進めてください。
Chart.jsとは
概要
Chart.jsは、JavaScriptでグラフやチャートを簡単に描けるライブラリです。軽量で扱いやすく、ウェブページに動的なデータ表示を手早く追加できます。ダッシュボードやレポートでの利用に適しています。
主な特徴
- シンプルなAPIで短いコードで描画できます。具体例：数行で折れ線グラフや棒グラフを表示できます。
- レスポンシブ対応で画面サイズに合わせて自動調整します。
- アニメーションやツールチップなどのインタラクションを標準で備えます。
どんな場面で使うか
業務のダッシュボード、ウェブサイトの統計表示、学習用のデータ可視化など幅広く使えます。データをわかりやすく伝えたい場面で特に有効です。
仕組み（高レベル）
Canvas要素に描画します。データと表示設定をオブジェクトで渡すと、Chart.jsが描画と更新を行います。コードは直感的で、データの差し替えや更新も簡単です。
サポートされる代表的なチャート例
折れ線、棒、円（パイ／ドーナツ）、レーダー、散布図など。カスタムオプションで見た目を細かく調整できます。
ライセンスとコミュニティ
オープンソースで活発なコミュニティがあります。導入例やプラグインも豊富なので学習や拡張がしやすいです。
Chart.jsのインストール方法
Chart.jsを導入する方法はいくつかあります。ここでは初心者でも分かりやすい主要な手順を、具体例とともにご紹介します。
1) CDN（推奨・最も簡単）
最も手軽な方法はCDNを使うことです。HTMLにscriptタグを1行追加するだけで利用できます。例：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
この方法は設定が不要で、すぐに試せます。CDNではグローバルにChartオブジェクトが使えます。
2) npm（開発向け）
Node.js環境やモジュール管理が必要な場合はnpmで入れます。
npm install chart.js
# または
yarn add chart.js
その後、JavaScriptでインポートします。
import Chart from 'chart.js/auto'
モジュールとして扱えるので、ビルドやツールチェーンと相性が良いです。
3) CDNJS / jsDelivr の利用
CDNは複数あります。cdnjsやjsDelivrでも同様に読み込めます。バージョン指定ができるため、本番運用時に安定させたいときに便利です。
4) GitHub からのダウンロード（上級者向け）
ソースを直接取得してカスタマイズする場合はGitHubからクローンします。ただしビルドが必要なことが多く、初心者には手間がかかります。
5) 公式サイトからの手動ダウンロード
公式サイトの配布ファイル（dist/chart.min.js）をダウンロードしてプロジェクトに置く方法です。ネットワーク制約がある環境で役立ちます。
インストール確認方法
CDNならブラウザのコンソールで
console.log(typeof Chart)
と入力し、”function”や”object”が返れば読み込まれています。npmの場合はビルドしてサンプルを動かして確認してください。
ワンポイント
CDNはすぐ使えるため学習やプロトタイピングに向きます。npmは構造化された開発に適します。用途に合わせて選んでください。
CDNを使用した基本的な実装方法
ステップ1：Chart.jsライブラリの読み込み
HTMLの内か、直前に次のスクリプトを追加します。
CDNを使うとローカルにファイルを置かずにすぐ利用できます。ページ読み込み時にライブラリが使えるようになります。
ステップ2：Canvas要素の設定
チャートを表示する場所に要素を置き、IDを付けます。
例：
幅や高さは指定できますが、Chart.jsはデフォルトでレスポンシブです。外部のスタイルでサイズを調整しても問題ありません。
ステップ3：チャートの初期化
Canvasのコンテキストを取得して、新しいChartを作ります。以下は棒グラフの簡単な例です。
const ctx = document.getElementById(‘myChart’).getContext(‘2d’);
const myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: [‘赤’, ‘青’, ‘黄’, ‘緑’, ‘紫’, ‘橙’],
datasets: [{
label: ‘投票数’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ‘rgba(75, 192, 192, 0.2)’,
borderColor: ‘rgba(75, 192, 192, 1)’,
borderWidth: 1
}]
},
options: {
scales: { y: { beginAtZero: true } }
}
});
スクリプトはCanvasの後か、DOMContentLoadedイベント内で実行してください。コンソールにエラーが出る場合はスクリプトの読み込み順を確認してください。
完全なHTMLテンプレート
概要
CDNを使った最小限の実装例を示します。DOCTYPE宣言からHTML構造、要素、Chart.jsのCDN読み込み、JavaScriptの基本コードまで含めたテンプレートです。
テンプレート例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chart.js テンプレート</title>
</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const config = {
type: 'bar',
data: { labels: ['A','B','C'], datasets: [{ label: '例', data: [10,20,15] }] },
options: {}
};
new Chart(ctx, config);
</script>
</body>
</html>
ポイント
- canvasにはidを付け、スクリプトはcanvasの後かDOMContentLoadedで実行します。
- CDNは簡便ですがバージョン指定やSRIを検討してください。
- データやオプションはconfigオブジェクトで分かりやすく管理できます。
CDN vs 手動ダウンロード
概要
CDN（コンテンツ配信ネットワーク）と手動ダウンロード（公式サイトからchart.min.jsを取得してプロジェクトに入れる方法）を比較します。用途や運用方針に応じて使い分けるとよいです。
CDNの利点
- インストール不要で即利用できます。
- ファイル管理が不要なためプロジェクトが軽くなります。
- 世界中のサーバーから配信されるため読み込みが速い場合があります。
- ブラウザや中間キャッシュにより既に読み込まれていれば高速化します。
- 最新バージョンが公開されればすぐ利用できます。
手動ダウンロードの利点
- バージョンを固定して安定した動作を確保できます。
- オフライン環境や外部接続が制限された環境で利用できます。
- CDN障害やポリシーで制限されるリスクを避けられます。
- カスタムビルドやパッチを当てたい場合に便利です。
選び方の目安
短く開発してすぐ試したい場合はCDNが便利です。運用環境で安定性やセキュリティを重視する場合は手動でファイルを管理してください。
Shinyアプリケーションへの統合
概要
RのShinyでChart.jsを使うときは、CDN経由で読み込む方法が手軽で推奨されます。golemでアプリ骨組みを作った後、UI側にCDNスクリプトを追加します。
手順（簡単）
- golemでアプリ作成: golem::create_golem(“myapp”)
- R/app_ui.Rを開く
- headにChart.jsのCDNを追加
- UIにcanvasを置き、初期表示用のJavaScriptを追加
具体例（R/app_ui.Rの一部）
app_ui <- function(request){
tagList(
tags$head(
tags$script(src = "https://cdn.jsdelivr.net/npm/chart.js")
),
tags$div(
tags$canvas(id = "myChart", width = "400", height = "200")
),
tags$script(HTML("const ctx=document.getElementById('myChart').getContext('2d');new Chart(ctx,{type:'bar',data:{labels:['A','B','C'],datasets:[{label:'例',data:[10,20,30]}]}});"))
)
}
注意点
- オフラインで必要なら、Chart.jsをwwwフォルダに置きincludeScriptで読み込みます。
- CDNはバージョン固定のURLを使うと安定します。
動作確認
アプリを起動し、ブラウザに棒グラフが表示されれば読み込み成功です。エラーはブラウザの開発者ツールで確認してください。
Chart.jsが正しくインポートされたかの確認
ブラウザでChart.jsが正しく読み込まれているかを確認する簡単な方法を説明します。主に開発者コンソールを使います。
手順
- ページを開き、右クリック→「検証」またはF12で開発者ツールを開きます。
- コンソールタブに切り替えます。
- 以下を入力して実行します。
const chart = Chart.getChart("canvas-id");
console.log(chart);
- 戻り値がチャートオブジェクト（オブジェクトが表示）であれば、Chart.jsは正しく読み込まれています。
- nullが返る場合は、そのIDのチャートが存在しないか、まだ生成されていないことを示します。
補足チェック
- Chart自体が定義されているか確認するには
typeof Chart !== 'undefined'を使います。 - 読み込みエラー（404、ネットワークエラー）がないか、Consoleのエラーメッセージを確認してください。
- canvasのIDが正しいか、スクリプトの読み込み順（Chart.js→自分のスクリプト）を確認してください。
これらを順に確認すれば、インポートの問題を特定しやすくなります。
サポートされるチャートタイプ
概要
Chart.jsは多彩なチャートタイプを標準で提供します。typeプロパティで指定するだけで描画できます。用途に合わせて使い分けると分かりやすい表示が作れます。
基本の指定方法
シンプルな例:
new Chart(ctx, { type: 'bar', data: {...}, options: {...} })
typeに指定できる主な値を以下に紹介します。
主なチャートタイプ
- bar（棒グラフ）: カテゴリ比較に向きます。量の差が視覚的に伝わります。
- line（折れ線グラフ）: 時系列データや連続値の傾向表示に適します。
- pie（円グラフ）/ doughnut（ドーナツ）: 構成比の表示に便利です。複数項目の割合を示します。
- radar（レーダーチャート）: 複数の指標をレーダー上で比較できます。
- polarArea（極座標面積）: 項目ごとの面積で比較します。円グラフの代替です。
- bubble（バブルチャート）: x,yに加えサイズで第三の変数を表現します。
- scatter（散布図）: 点の分布や相関を見るときに使います。
補足: 混合チャート
トップレベルのtypeとdatasetごとのtypeを組み合わせることで混合表示が可能です。たとえば棒＋折れ線を同じグラフ上に描けます。オプションや表示設定がチャートごとに異なる点に注意してください。
インタラクティブ機能
概要
Chart.jsはツールチップ、ホバー、クリック、アニメーションなど多数のインタラクティブ機能を提供します。これにより、静的な画像よりも操作感のあるグラフを作れます。以下で主要な機能と実装のポイントを分かりやすく説明します。
ツールチップとホバー
デフォルトでツールチップが有効です。データ点にカーソルを合わせると詳細が表示されます。オプションで表示内容やフォーマット、位置をカスタマイズできます。例えば、数値に単位を付けたり、日付フォーマットを変えたりできます。
クリック・イベント処理
チャート上の要素をクリックして追加処理を行えます。onClickコールバックでクリック位置の要素を取得し、詳細表示やフィルタリングを実行します。短い例：
options: {
onClick: (evt, elements) => {
if(elements.length) {
const idx = elements[0].index;
console.log("クリックされたデータのインデックス:", idx);
}
}
}
凡例と表示切替
凡例（legend）をクリックして系列の表示/非表示を切り替えられます。クリック動作はカスタマイズ可能で、チェックボックス代わりに独自のコントロールと連携させることもできます。
ズーム・パン（プラグイン）
ズームやパンは別途プラグイン（例: chartjs-plugin-zoom）で実現します。ピンチやスクロールで拡大縮小でき、時間軸のデータを細かく見るときに便利です。
アニメーションと遷移
Chart.jsは描画時やデータ更新時のアニメーションをサポートします。durationやeasingを調整して自然な動きを作れます。アニメーション完了時のコールバックも使えます。
実装時の注意点
- 大量データではツールチップやアニメーションが重くなるため、表示点数を制限するか簡易化します。
- タッチ端末ではホバーが使えないため、タップ操作で代替する工夫をします。
- プラグインを導入する際はバージョン互換に注意してください。
アクセシビリティ
キーボード操作やスクリーンリーダー対応を考慮し、代替テキストや説明を付けると親切です。インタラクティブは便利ですが、誰でも扱えるように配慮しましょう。
まとめ
Chart.jsをCDNで導入する方法は、最も手軽で効率的な選択肢です。数行のHTMLと少しのJavaScriptで、見た目の良い動的なグラフをすばやく表示できます。初めての方や短期間で結果を出したいプロジェクトに特に向いています。
主な利点は次の通りです。読み込みが簡単で、バージョン管理も容易です。配布や更新の手間が少なく、Shinyのようなウェブアプリにもスムーズに統合できます。ブラウザの開発者ツールで正しく読み込まれたか確認し、チャートの種類やインタラクティブ機能（ツールチップ、ホバー、アニメーション）を活用すると表現の幅が広がります。
手動ダウンロードはオフラインや細かいカスタマイズが必要な場合に有利です。読み込み元を自分で管理したいときはこの方法を選んでください。CDNは迅速さと利便性を優先する場面で有効です。したがって、まずはCDNで試し、必要に応じて手動に切り替える運用が実用的です。
最後に、基本的な実装手順を振り返ります。CDNリンクを追加し、canvas要素を用意して、JavaScriptでグラフを作成します。エラーが出たらコンソールを確認し、依存関係やIDの重複をチェックしてください。これでプロジェクトにすばやくプロフェッショナルな可視化を追加できます。ご活用ください。
