円グラフを表示させたい

2022年8月6日 2022年8月7日山崎講師

山崎講師

Chart.jsというJavaScriptのライブラリを使用することで簡単に円グラフを作成することができます。(Sample)

ポイントは以下の3点です。

①　8行目のリンクでCDNを読み込んでいる点

②　22行目でグラフの種類を指定している点

③　23行目以降でグラフのインスタンスを生成している点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>pieChartJs.html</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"
            integrity="sha512-VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg=="
        crossorigin="anonymous"></script>
        <script
        src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    </head>
    <body>
        <div style="width:500px">
            <h2 style="text-align: center;">メラビアンの法則</h2>
            <canvas id="pi"></canvas>
        </div>
        <script>
            let ctx = document.getElementById('pi');
            let myChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['Visual', 'Vocal', 'Verbal'],
                    datasets: [{
                            data: [55, 38, 7],
                            backgroundColor: ['#f88', '#484', '#48f'],
                            weight: 100,
                        }],
                },
            });
        </script>
    </body>
</html>

Webアプリケーション制作のための小ネタ集　目次に戻る

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！

円グラフを表示させたい

投稿者プロフィール

最新の投稿

折れ線グラフを表示させたい

棒グラフを表示させたい