HTMLの書き方
body内のグラフを表示させたい場所にid名を付けたcanvasタグを記載します。
<canvas id="chart"></canvas>body 終了タグ直前に jQuery、Chart.js、jquery.inview.js 動きを制御する自作のJS の4 つを読み込みます
<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/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-2.js"></script>
JSの書き方
//値をグラフに表示させる
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);
});
}
});
}
});
//=========== 棒グラフ（縦） ============//
$('#chart01').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {
var ctx=document.getElementById("chart01");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'bar',//グラフのタイプ
data:{//グラフのデータ
labels:[ "令和3年度","令和4年度","令和5年度", ],//データの名前
datasets:[ {
label:"新入院患者数", //グラフのタイトル
backgroundColor:"#0584C5", //グラフの色
data:[ "724","776","713", ] //横列に並ぶデータ
}]
},
options:{//グラフのオプション
legend:{
display: false//グラフの説明を非表示
},
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:{
yAxes:[ //グラフ縦軸（Y軸）設定
{
ticks:{
beginAtZero:true,//0からスタート
suggestedMax: 1000,//最大が1000
suggestedMin: 0,//最小が0
stepSize: 100,//100づつ数値が刻まれる
callback: function(value){
return value + '人'//数字＋人で表示
}
}
}
],
xAxes:[ //グラフ縦軸（X軸）設定
{
barPercentage:0.5,//バーの太さ
}
]
}
}
});
}
});
HTMLの書き方
body内のカウントアップ・ダウンを表示させたい場所にHTMLを記載します。
<div id="box1" class="box"><!--画面に入ったら数字を動かす基点にするためのid を付与-->
<p>男性の学生数<br><span class="count-up count-size">2540</span>人</p><!-- count-up ← カウントアップ用class名-->
<!--/box--></div>
<div id="box2" class="box"><!--画面に入ったら数字を動かす基点にするためのid を付与-->
<p>学食充実満足度全国<br>第<span class="count-down count-size">1</span>位</p><!-- count-down ← カウントダウン用class名-->
<!--/box--></div>body 終了タグ直前にjQuery、jquery.inview、動きを制御する自作のJS の3つを読み込みます。
<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/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-1.js"></script>
JSの書き方
//box1の指定
$('#box1').on('inview', function(event, isInView) {
if (isInView) {
//要素が見えたときに実行する処理
$("#box1 .count-up").each(function(){
$(this).prop('Counter',0).animate({//0からカウントアップ
Counter: $(this).text()
}, {
// スピードやアニメーションの設定
duration: 2000,//数字が大きいほど変化のスピードが遅くなる。2000=2秒
easing: 'swing',//動きの種類。他にもlinearなど設定可能
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
//box2の指定
$('#box2').on('inview', function(event, isInView) {
if (isInView) {
//要素が見えたときに実行する処理
$("#box2 .count-down").each(function(){
$(this).prop('Counter',10).animate({//10からカウントダウン
Counter: $(this).text()
}, {
// スピードやアニメーションの設定
duration: 1000,//数字が大きいほど変化のスピードが遅くなる。1000=1秒
easing: 'swing',//動きの種類。他にもlinearなど設定可能
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});