円グラフを表示させたい

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>
投稿者プロフィール

最新の投稿
一般社員2022.08.09将来ビジョンシートを公開します 【リーダーシップ研修】
新入社員2022.08.06棒グラフを表示させたい
新入社員2022.08.06円グラフを表示させたい
新入社員2022.08.06折れ線グラフを表示させたい