<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.1.2/jquery.inview.min.js">
</script>
<style>@charset "utf-8";
/*=========グラフ表示のためのCSS ===============*/
.chart-area {
/*円グラフがスマホでつぶれないようにする*/
position: relative;
width: 100%;
height: 50vh;
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
text-align: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(
76.5deg,
rgba(129, 252, 255, 1) 0.4%,
rgba(255, 175, 207, 1) 49.8%,
rgba(255, 208, 153, 1) 98.6%
);
}
h1 {
text-align: center;
text-transform: uppercase;
font-size: 2rem;
padding-top: 30px 0;
color: #666;
}
.lead {
padding: 20px;
text-align: center;
}
a {
color: #666;
font-weight: bold;
}
.box {
width: 80vw;
margin: 50px auto;
padding: 20px;
text-align: center;
background: rgba(255, 255, 255, 0.4);
box-shadow: 10px 10px 5px -2px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 10px;
}
h2,
p {
color: #666;
}</style>
</head>
<body>
<body>
<p class="lead">使用したライブラリ：<a href="https://www.chartjs.org/" target="_blank">https://www.chartjs.org/</a>
</p>
<div class="box">
<h2>2021年CMS使用統計</h2>
<div class="chart-area">
<canvas id="chart">
</canvas>
</div>
<!--/box-->
</div>
<script>//値をグラフに表示させる
Chart.plugins.register({
afterDatasetsDraw: function (chart, easing) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (element, index) {
// 値の表示
ctx.fillStyle = "rgb(0, 0, 0,0.8)"; //文字の色
var fontSize = 12; //フォントサイズ
var fontStyle = "normal"; //フォントスタイル
var fontFamily = "Arial"; //フォントファミリー
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
var dataString = dataset.data[index].toString();
// 値の位置
ctx.textAlign = "center"; //テキストを中央寄せ
ctx.textBaseline = "middle"; //テキストベースラインの位置を中央揃え
var padding = 5; //余白
var position = element.tooltipPosition();
ctx.fillText(
dataString,
position.x,
position.y - fontSize / 2 - padding);
});
}
});
} });
//=========== 円グラフ ============//
$("#chart").on("inview", function (event, isInView) {
//画面上に入ったらグラフを描画
if (isInView) {
var ctx = document.getElementById("chart"); //グラフを描画したい場所のid
var chart = new Chart(ctx, {
type: "doughnut", //グラフのタイプ
data: {
labels: ["WordPress", "Shopify", "Joomla", "Wix", "None"], //データの名前
datasets: [
{
label: "2021年CMS使用統計", //グラフのタイトル
backgroundColor: [
"rgba(255, 0, 0, 0.7)",
"rgba(30, 30, 30, 0.8)",
"rgba(50, 50, 50, 0.6)",
"rgba(70, 70, 70, 0.3)",
"rgba(238, 238, 238, 0.6)"],
//グラフの背景色
data: ["42.6", "4.0", "1.9", "1.7", "34.7"] //データ
}] },
options: {
//グラフのオプション
maintainAspectRatio: false, //CSSで大きさを調整するため、自動縮小をさせない
cutoutPercentage: 40, //中央からの空円の太さ。グラフの太さ変更
legend: {
display: true //グラフの説明を表示
},
tooltips: {
//グラフへカーソルを合わせた際の詳細表示の設定
callbacks: {
label: function (tooltipItem, data) {
return (
data.labels[tooltipItem.index] +
": " +
data.datasets[0].data[tooltipItem.index] +
"%");
//%を最後につける
} } },
title: {
//上部タイトル表示の設定
display: true,
fontSize: 10,
text: "単位：%" } } });
}
});
//# sourceURL=pen.js</script>
</body>
</html>/*
外部依存 CSS:
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
外部依存 JS (このデモは下記の JS にも依存します):
- https://code.jquery.com/jquery-3.4.1.min.js
- https://cdnjs.cloudflare.com/Chart.min.js
- https://cdnjs.cloudflare.com/jquery.inview.min.js
*/
@charset "utf-8";
/*=========グラフ表示のためのCSS ===============*/
.chart-area {
/*円グラフがスマホでつぶれないようにする*/
position: relative;
width: 100%;
height: 50vh;
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
text-align: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(
76.5deg,
rgba(129, 252, 255, 1) 0.4%,
rgba(255, 175, 207, 1) 49.8%,
rgba(255, 208, 153, 1) 98.6%
);
}
h1 {
text-align: center;
text-transform: uppercase;
font-size: 2rem;
padding-top: 30px 0;
color: #666;
}
.lead {
padding: 20px;
text-align: center;
}
a {
color: #666;
font-weight: bold;
}
.box {
width: 80vw;
margin: 50px auto;
padding: 20px;
text-align: center;
background: rgba(255, 255, 255, 0.4);
box-shadow: 10px 10px 5px -2px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 10px;
}
h2,
p {
color: #666;
}/*
外部依存 JS:
- https://code.jquery.com/jquery-3.4.1.min.js
- https://cdnjs.cloudflare.com/Chart.min.js
- https://cdnjs.cloudflare.com/jquery.inview.min.js
外部依存 CSS (このデモは下記の CSS にも依存します):
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/
//値をグラフに表示させる
Chart.plugins.register({
afterDatasetsDraw: function (chart, easing) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (element, index) {
// 値の表示
ctx.fillStyle = "rgb(0, 0, 0,0.8)"; //文字の色
var fontSize = 12; //フォントサイズ
var fontStyle = "normal"; //フォントスタイル
var fontFamily = "Arial"; //フォントファミリー
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
var dataString = dataset.data[index].toString();
// 値の位置
ctx.textAlign = "center"; //テキストを中央寄せ
ctx.textBaseline = "middle"; //テキストベースラインの位置を中央揃え
var padding = 5; //余白
var position = element.tooltipPosition();
ctx.fillText(
dataString,
position.x,
position.y - fontSize / 2 - padding);
});
}
});
} });
//=========== 円グラフ ============//
$("#chart").on("inview", function (event, isInView) {
//画面上に入ったらグラフを描画
if (isInView) {
var ctx = document.getElementById("chart"); //グラフを描画したい場所のid
var chart = new Chart(ctx, {
type: "doughnut", //グラフのタイプ
data: {
labels: ["WordPress", "Shopify", "Joomla", "Wix", "None"], //データの名前
datasets: [
{
label: "2021年CMS使用統計", //グラフのタイトル
backgroundColor: [
"rgba(255, 0, 0, 0.7)",
"rgba(30, 30, 30, 0.8)",
"rgba(50, 50, 50, 0.6)",
"rgba(70, 70, 70, 0.3)",
"rgba(238, 238, 238, 0.6)"],
//グラフの背景色
data: ["42.6", "4.0", "1.9", "1.7", "34.7"] //データ
}] },
options: {
//グラフのオプション
maintainAspectRatio: false, //CSSで大きさを調整するため、自動縮小をさせない
cutoutPercentage: 40, //中央からの空円の太さ。グラフの太さ変更
legend: {
display: true //グラフの説明を表示
},
tooltips: {
//グラフへカーソルを合わせた際の詳細表示の設定
callbacks: {
label: function (tooltipItem, data) {
return (
data.labels[tooltipItem.index] +
": " +
data.datasets[0].data[tooltipItem.index] +
"%");
//%を最後につける
} } },
title: {
//上部タイトル表示の設定
display: true,
fontSize: 10,
text: "単位：%" } } });
}
});
//# sourceURL=pen.js