グラフ
-円グラフ-
See the Pen 9-5-6 円グラフ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内の表示を確かめてね!
動きを実現する仕組み
Chart.js というチャートを作成するライブラリを使い、HTML 内の<canvas>タグにグラフを描画する。
グラフの描画はjquery.inview というライブラリを使って、要素が表示されたタイミングで開始。
[使用するライブラリ]
* jQuery
* Chart.js(https://www.chartjs.org/)
* jquery.inview(https://github.com/protonet/jquery.inview)
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-5-6.css"> </head>
- body内のグラフを表示させたい場所にid名を付けた<canvas>タグを記載します。
<div class="chart-area"> <canvas id="chart01"></canvas> </div>
- 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-6.js"></script> </body>
自作のCSS内の書き方
.chart-area{/*円グラフがスマホでつぶれないようにする*/
position: relative;
width:100%;
height:50vh;
}
自作の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:'pie',//グラフのタイプ
data:{//グラフのデータ
labels:["IT","営業","不動産","医療",],//データの名前
datasets:[{
label:"職種別比率",//グラフのタイトル
backgroundColor:["#BB5179","#FAFF67", "#58A27C","#3C00FF"],//グラフの背景色
data:["20","30","10","40",]//データ
}]
},
options:{//グラフのオプション
maintainAspectRatio: false,//CSSで大きさを調整するため、自動縮小をさせない
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: '単位:%'
},
}
});
}
});
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!