<!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 ===============*/
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>CMS使用統計</h2>
<canvas id="chart">
</canvas>
<!--/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: "line", //グラフのタイプ
data: {
//グラフのデータ
labels: [
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2021Sep",
"2022",
"2023"],
//データの名前
datasets: [
{
label: "WordPress", //グラフのタイトル
borderColor: "rgba(255,0,0,1)", //グラフの線の色
backgroundColor: "rgba(255,0,0,0)", //グラフの背景色透過
data: [
"13.1",
"15.8",
"17.4",
"21.0",
"23.3",
"25.6",
"27.3",
"29.2",
"32.7",
"35.4",
"39.5",
"42.6",
"43.1"]
//横列に並ぶデータ
},
{
label: "Joomla", //グラフのタイトル
borderColor: "rgb(170, 170, 170, 1)", //グラフの線の色
backgroundColor: "rgba(170, 170, 170, 0)", //グラフの背景色透過
data: [
"2.6",
"2.8",
"2.8",
"3.3",
"3.3",
"3.3",
"3.4",
"3.2",
"3.0",
"2.6",
"2.2",
"1.9",
"2.6"]
//横列に並ぶデータ
},
{
label: "None", //グラフのタイトル
borderColor: "rgba(85, 85, 85, 1)", //グラフの線の色
backgroundColor: "rgba(85, 85, 85, 0)", //グラフの背景色透過
data: [
"76.4",
"71.0",
"68.2",
"64.8",
"61.7",
"56.6",
"53.3",
"51.3",
"45.3",
"43.1",
"38.3",
"34.7",
"31.5"]
//横列に並ぶデータ
}] },
options: {
//グラフのオプション
legend: {
display: true //グラフの説明を非表示
},
tooltips: {
//グラフへカーソルを合わせた際の詳細表示の設定
callbacks: {
label: function (tooltipItems, data) {
if (tooltipItems.yLabel == "0") {
return "";
}
return (
data.datasets[tooltipItems.datasetIndex].label +
"：" +
tooltipItems.yLabel +
"");
} } },
title: {
//上部タイトル表示の設定
display: true,
fontSize: 10,
text: "単位：%" },
scales: {
xAxes: [
//グラフ縦軸（X軸）設定
{
ticks: {
beginAtZero: true, //0からスタート
suggestedMax: 100, //最大が100
suggestedMin: 0, //最小が0
stepSize: 10, //10づつ数値が刻まれる
callback: function (value) {
return value + ""; //数字＋%で表示
} } }],
yAxes: [
//グラフ縦軸（Y軸）設定
{
barPercentage: 0.5 //バーの太さ
}] } } });
}
});
//# 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 ===============*/
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: "line", //グラフのタイプ
data: {
//グラフのデータ
labels: [
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2021Sep",
"2022",
"2023"],
//データの名前
datasets: [
{
label: "WordPress", //グラフのタイトル
borderColor: "rgba(255,0,0,1)", //グラフの線の色
backgroundColor: "rgba(255,0,0,0)", //グラフの背景色透過
data: [
"13.1",
"15.8",
"17.4",
"21.0",
"23.3",
"25.6",
"27.3",
"29.2",
"32.7",
"35.4",
"39.5",
"42.6",
"43.1"]
//横列に並ぶデータ
},
{
label: "Joomla", //グラフのタイトル
borderColor: "rgb(170, 170, 170, 1)", //グラフの線の色
backgroundColor: "rgba(170, 170, 170, 0)", //グラフの背景色透過
data: [
"2.6",
"2.8",
"2.8",
"3.3",
"3.3",
"3.3",
"3.4",
"3.2",
"3.0",
"2.6",
"2.2",
"1.9",
"2.6"]
//横列に並ぶデータ
},
{
label: "None", //グラフのタイトル
borderColor: "rgba(85, 85, 85, 1)", //グラフの線の色
backgroundColor: "rgba(85, 85, 85, 0)", //グラフの背景色透過
data: [
"76.4",
"71.0",
"68.2",
"64.8",
"61.7",
"56.6",
"53.3",
"51.3",
"45.3",
"43.1",
"38.3",
"34.7",
"31.5"]
//横列に並ぶデータ
}] },
options: {
//グラフのオプション
legend: {
display: true //グラフの説明を非表示
},
tooltips: {
//グラフへカーソルを合わせた際の詳細表示の設定
callbacks: {
label: function (tooltipItems, data) {
if (tooltipItems.yLabel == "0") {
return "";
}
return (
data.datasets[tooltipItems.datasetIndex].label +
"：" +
tooltipItems.yLabel +
"");
} } },
title: {
//上部タイトル表示の設定
display: true,
fontSize: 10,
text: "単位：%" },
scales: {
xAxes: [
//グラフ縦軸（X軸）設定
{
ticks: {
beginAtZero: true, //0からスタート
suggestedMax: 100, //最大が100
suggestedMin: 0, //最小が0
stepSize: 10, //10づつ数値が刻まれる
callback: function (value) {
return value + ""; //数字＋%で表示
} } }],
yAxes: [
//グラフ縦軸（Y軸）設定
{
barPercentage: 0.5 //バーの太さ
}] } } });
}
});
//# sourceURL=pen.js