HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-5-7.css">body内のグラフを表示させたい場所にid名を付けたcanvasタグを記載します。
<div class="chart-area">
<canvas id="chart02"></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-7.js"></script>
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);
});
}
});
}
});
//=========== 円グラフ（ドーナッツ型） ============//
$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {
var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'doughnut',//グラフのタイプ
data:{//グラフのデータ
labels:[ "IT","営業","不動産","医療", ],//データの名前
datasets:[ {
label:"職種別比率",//グラフのタイトル
backgroundColor:[ "#BB5179","#FAFF67", "#58A27C","#3C00FF" ],//グラフの背景色
data:[ "20","30","10","40", ]//データ
}]
},
options:{//グラフのオプション
maintainAspectRatio: false,//CSSで大きさを調整するため、自動縮小をさせない
cutoutPercentage:55,//中央からの空円の太さ。グラフの太さ変更
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: '単位：%'
},
}
});
}
});
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-5-6.css">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>
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: '単位：%'
},
}
});
}
});
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-5.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);
});
}
});
}
});
//=========== 折れ線グラフ（複数） ============//
$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {
var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'line',//グラフのタイプ
data:{//グラフのデータ
labels:[ "1月","2月","3月","4月","5月","6月", ],//データの名前
datasets: [ {
label:"Aさん",//グラフのタイトル
borderColor: "rgba(255,0,0,1)",//グラフの線の色
backgroundColor:"rgba(255,0,0,0)",//グラフの背景色透過
data:[ "60","55","54","50","49","47", ]//横列に並ぶデータ
},{
label:"Bさん",//グラフのタイトル
borderColor: "rgba(130,201,169,0.5)",//グラフの線の色
backgroundColor:"rgba(130,201,169,0)",//グラフの背景色透過
data:[ "90","85","74","60","59","50", ]//横列に並ぶデータ
},{
label:"Cさん",//グラフのタイトル
borderColor: "rgba(255,183,76,0.5)",//グラフの線の色
backgroundColor:"rgba(255,183,76,0)",//グラフの背景色透過
data:[ "78","75","70","67","60","45", ]//横列に並ぶデータ
}
]
},
options:{//グラフのオプション
legend:{
display: true//グラフの説明を表示
},
tooltips:{//グラフへカーソルを合わせた際のツールチップ詳細表示の設定
callbacks:{
label: function(tooltipItems, data) {
if(tooltipItems.yLabel == "0"){
return "";
}
return data.datasets[tooltipItems.datasetIndex].label + "：" + tooltipItems.yLabel + "Kg";//Kgを最後につける
}
}
},
title:{//上部タイトル表示の設定
display: true,
fontSize:10,
text: '単位：Kg'
},
scales:{
yAxes:[ //グラフ縦軸（Y軸）設定
{
ticks:{
beginAtZero:true,//0からスタート
suggestedMax: 100,//最大が100
suggestedMin: 0,//最小が0
stepSize: 10,//10づつ数値が刻まれる
callback: function(value){
return value + 'Kg'//数字＋%で表示
}
}
}
],
xAxes:[ //棒グラフ横（X軸）設定
{
barPercentage:0.5,//バーの太さ
}
]
}
}
});
}
});
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-4.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);
});
}
});
}
});
//=========== 折れ線グラフ（1本） ============//
$('#chart01').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {
var ctx=document.getElementById("chart01");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'line',//グラフのタイプ
data:{//グラフのデータ
labels:[ "1月","2月","3月","4月","5月","6月", ],//データの名前
datasets:[ {
label:"体重の変化",//グラフのタイトル
borderColor: "rgba(255,0,0,1)",//グラフの線の色
backgroundColor:"rgba(255,0,0,0.1)",//グラフの背景色
data:[ "60","55","54","50","49","47", ]//横列に並ぶデータ
}]
},
options:{//グラフのオプション
legend:{
display: false//グラフの説明を非表示
},
tooltips:{//グラフへカーソルを合わせた際の詳細表示の設定
callbacks:{
label: function(tooltipItems, data) {
if(tooltipItems.yLabel == "0"){
return "";
}
return data.datasets[tooltipItems.datasetIndex].label + "：" + tooltipItems.yLabel + "Kg";//Kgを最後につける
}
}
},
title:{//上部タイトル表示の設定
display: true,
fontSize:10,
text: '単位：Kg'
},
scales:{
yAxes:[ //グラフ縦軸（Y軸）設定
{
ticks:{
beginAtZero:true,//0からスタート
suggestedMax: 100,//最大が1000
suggestedMin: 0,//最小が0
stepSize: 10,//10づつ数値が刻まれる
callback: function(value){
return value + 'Kg'//数字＋Kgで表示
}
}
}
],
xAxes:[ //棒グラフ縦軸（X軸）設定
{
barPercentage:0.5,//バーの太さ
}
]
}
}
});
}
});
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-3.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);
});
}
});
}
});
//=========== 棒グラフ（横・複数バー） ============//
$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {
var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'horizontalBar',//グラフのタイプ
data:{//グラフのデータ
labels:[ "令和3年度","令和4年度","令和5年度", ],//データの名前
datasets: [ {
label: 'A室',
data: [ 62.5, 65.9, 93.1, ],
backgroundColor: "rgba(219,39,91,0.5)"
},{
label: 'B室',
data: [ 55.3, 89.7, 73.2, ],
backgroundColor: "rgba(130,201,169,0.5)"
},{
label: 'C室',
data: [ 33.1, 45.5, 62.9, ],
backgroundColor: "rgba(255,183,76,0.5)"
}
]
},
options:{//グラフのオプション
legend:{
display: true//グラフの説明を表示
},
tooltips:{//グラフへカーソルを合わせた際のツールチップ詳細表示の設定
callbacks:{
label: function(tooltipItems, data) {
if(tooltipItems.xLabel == "0"){
return "";
}
return data.datasets[tooltipItems.datasetIndex].label + "：" + tooltipItems.xLabel + "%";//パーセントを最後につける
}
}
},
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,//バーの太さ
}
]
}
}
});
}
});