HTMLの用意と表示

「Web」→「Chart.js」グループのブロックを使うと、Webページ上にグラフを表示することができます。
このページでは、グラフ表示用のWebページについて解説します。

canvas要素の配置

「Web」→「Chart.js」グループのブロックでは、JavaScriptライブラリのChart.jsを使って、グラフを表示します。
Chart.jsでは、Webページ上のcanvas要素にグラフを描画するという仕組みになっています。
そのため、WebページのHTMLの中に、canvas要素を入れることが必要です。
canvas要素にはid属性を指定しておき、グラフ表示のブロックでは、そのIDを使ってcanvas要素を特定します。

canvas要素をdiv要素で囲んでstyle属性を指定

Chart.jsでは、グラフをレスポンシブ対応させる機能があります。
この機能が正しく動作するようにするには、canvas要素を以下のようにdiv要素で囲むようにします。

<div style="position: relative;">
  <canvas id="○○○"></canvas>
</div>

また、グラフのサイズを指定したい場合は、div要素にwidthやheightなどの属性を指定します。
例えば、以下のようにすると、グラフの幅は、div要素を囲む親要素の幅に合わせられます。
また、横と縦の比率が3:2になります。

<div style="position: relative; width: 100%; aspect-ratio: 3/2">
  <canvas id="○○○"></canvas>
</div>

以下のHTMLは、Bootstrapをベースにした、グラフを表示するためのWebページのHTMLの例です。
canvas要素には「myChart」というIDをつけています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>Chart</h1>
        <div class="row">
            <div class="col-md-12">
                <div style="position: relative; width: 100%; aspect-ratio: 3/2">
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Webページの表示

「Web」→「ブラウザ」グループの「ブラウザのウィンドウ」のブロックを使って、グラフ表示用のWebページをポップアップウィンドウに表示します。
例えば、Tsumickyのインストール先の中に「html」というフォルダを作り、その中に「chart.html」というHTMLファイルでWebページを用意したとします。
また、このWebページを表示して、それを変数winに代入するとします。
この場合、以下のブロックで、グラフ表示用のWebページを表示します。
幅と高さのパラメータで、ポップアップウィンドウの幅と高さを適宜指定します。

次のページ：グラフの表示 »