インフォグラフィックスのグラフはどう作っているの？

GoogleGeminiが生成するインフォグラフィックス、とてもキレイで分かりやすいですね。しかしながら、どんなコードで記述しているのでしょうか？　何らかのフレームワークを活用しインストールしているのでしょうか？

同じくGoogleGeminiに、コードに関する技術的な質問をしてみました。AIは、何度も繰り返し聞いても嫌がらずに丁寧に教えてくれます。AIに甘えて、分からないことは積極的に聞いてみましょう！

GoogleGeminiの回答ポイント：

  1. フレームワーク/ライブラリの使用: Chart.jsを使用していることを明確に伝える。
  2. インストール方法: CDN経由で読み込んでいるため、特別なインストールは不要であることを説明する。
  3. グラフの記述方法:
    • HTMLの<canvas>要素で描画領域を定義していること。
    • JavaScriptでChart.jsを初期化し、データとオプションを設定していること。
    • getContext('2d')で2D描画コンテキストを取得していること。
    • new Chart()でグラフを作成していること。
  4. レスポンシブデザイン: maintainAspectRatio: falseとCSS（Tailwind CSS）で対応していることを補足する。

GoogleGeminiからの回答：

インフォグラフィック内のグラフは、Chart.jsというJavaScriptライブラリを活用して記述しています。特別なインストールは必要なく、CDN (Content Delivery Network) 経由で読み込んでいます。

グラフの記述方法について

グラフは主に以下のステップでコードに記述されています。

  1. HTMLでの描画領域の確保: グラフを表示するために、HTMLファイル内に<canvas>要素を配置しています。この<canvas>がグラフの描画領域となります。
<div class="chart-container">
    <canvas id="workingHoursChart"></canvas>
</div>

Chart.jsライブラリの読み込み: HTMLの<head>セクションで、Chart.jsライブラリをCDNから読み込んでいます。これにより、ブラウザがページを読み込む際にChart.jsの機能が利用可能になります。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JavaScriptでのグラフの定義と描画: ページの下部にある<script>タグ内でJavaScriptコードを使って、各グラフのデータ、種類、オプションなどを設定し、Chart.jsにグラフを描画させています。

  • まず、それぞれの<canvas>要素をJavaScriptで取得します。
  • 次に、getContext('2d')メソッドを使って2D描画コンテキストを取得します。
  • そして、new Chart()コンストラクタを呼び出し、グラフの種類（type）、表示するデータ（data）、グラフの見た目や挙動を制御するオプション（options）などを渡して、グラフを生成しています。

例えば、サムネ画像の「労働時間の内訳」を示すドーナツグラフは、以下のように記述しています。

const workingHoursCtx = document.getElementById('workingHoursChart').getContext('2d');
new Chart(workingHoursCtx, {
    type: 'doughnut', // ドーナツグラフを指定
    data: {
        labels: ['サービス提供 (2時間)', '移動時間 (1時間)', '待機時間 (1時間)'],
        datasets: [{
            label: '労働時間の内訳',
            data: [2, 1, 1],
            backgroundColor: ['#00A6FB', '#F9A620', '#F86624'], // パレットの色を適用
            borderColor: '#ffffff',
            borderWidth: 4,
            hoverOffset: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false, // コンテナのサイズに合わせてレスポンシブにするための設定
        plugins: {
            legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: '1日の労働時間（4時間）の内訳例',
                font: { size: 16 }
            },
            tooltip: {
                callbacks: {
                   title: tooltipTitleCallback // ツールチップのラベル表示をカスタマイズ
                }
            }
        },
        cutout: '60%' // ドーナツの穴の大きさ
    }
});

このように、Chart.jsという強力なライブラリを使うことで、複雑なグラフも比較的少ないコード量で、簡単にウェブページに表示できるようになります。また、Chart.jsはレスポンシブデザインにも対応しており、maintainAspectRatio: falseとchart-containerのCSS設定を組み合わせることで、様々な画面サイズに適応するようになっています。

サイト管理人
サイト管理人

ありがとうございます。非常にわかりやすい説明で勉強になりました！

GoogleGemini
GoogleGemini

どういたしまして！　お役に立てて嬉しいです。何か他にご質問があれば、お気軽にお声がけくださいね！

コメント