Q&A
コードを提示しよう
javascriptの繰り返される文をまとめる処置を教えて頂けませんでしょうか。
javascript勉強中の者です。
https://coco-factory.jp/ugokuweb/move01/9-5-3/
を参考に動く棒グラフを作成していますが
javascriptのコードで、"chart02" を変更して
複数のグラフを作成したいと思っています。
(例:chart02→都道府県ランキング、chart03→市町村ランキング、chart04→世界ランキング など)
その場合、"chart02"と"ランキングの中身"を変更するだけで作成できると思うのですが
その他の要素はひとまとめ(関数にする？)にしたいと思っています。
(複数のグラフを作成したいと思っており、最小限の記述で納めたい為)
しかし、そのやり方がいまいちわからず質問させて頂きました。
どなたかお詳しい方、ご教授頂けないでしょうか。
よろしくお願い致します。
■追記
html
1\u003C!DOCTYPE html> 2\u003Chtml lang=\"ja\"> 3\u003Chead> 4\u003Cmeta charset=\"utf-8\"> 5\u003Ctitle>9-5-3 棒グラフ（横・複数バー）\u003C/title> 6\u003Cmeta name=\"description\" content=\"書籍「動くWebデザインアイディア帳」のサンプルサイトです\"> 7 8\u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"> 9\u003C!--==============レイアウトを制御する独自のCSSを読み込み===============--> 10\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css\"> 11\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-5-3/css/9-5-3.css\"> 12\u003C/head> 13 14\u003Cbody> 15 16\u003Ch1>棒グラフ（横・複数バー）\u003C/h1> 17\u003Cp class=\"lead\">使用したライブラリ：\u003Ca href=\"https://www.chartjs.org/\" target=\"_blank\">https://www.chartjs.org/\u003C/a>\u003C/p> 18 19\u003Cdiv class=\"box\"> 20\u003Ch2>病床稼働率\u003C/h2> 21\u003Cdiv> 22\u003Ccanvas id=\"chart02\">\u003C/canvas> 23\u003C/div> 24\u003C!--/box-->\u003C/div> 25 26\u003Cscript src=\"https://code.jquery.com/jquery-3.4.1.min.js\" integrity=\"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\" crossorigin=\"anonymous\">\u003C/script> 27\u003Cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js\">\u003C/script> 28\u003Cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js\">\u003C/script> 29\u003C!--CodePenプレビュー用にコメントアウトしています。※CodePenで読み込んだJSとHTMLで読み込んだJSがバッティングして挙動がおかしくなっているため。ご利用の際はコメントを取り除いてご利用ください。\u003Cscript src=\"https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-5-3/js/9-5-3.js\">\u003C/script>--> 30\u003C/body> 31\u003C/html> 32コード
CSS
1@charset \"utf-8\"; 2 3/*========= レイアウトのためのCSS ===============*/ 4 5body{ 6background:#ECF2FC; 7} 8 9h1{ 10text-align: center; 11text-transform: uppercase; 12font-size: 2rem; 13margin:30px 0; 14} 15 16.lead{ 17padding: 20px; 18text-align: center; 19} 20 21.box{ 22max-width:600px; 23width:100%; 24margin:100px auto 330px auto; 25padding: 20px; 26background:#fff; 27text-align: center; 28} 29 30コード
javascript
1//値をグラフに表示させる 2Chart.plugins.register({ 3afterDatasetsDraw: function (chart, easing) { 4var ctx = chart.ctx; 5chart.data.datasets.forEach(function (dataset, i) { 6var meta = chart.getDatasetMeta(i); 7if (!meta.hidden) { 8meta.data.forEach(function (element, index) { 9// 値の表示 10ctx.fillStyle = 'rgb(0, 0, 0,0.8)';//文字の色 11var fontSize = 12;//フォントサイズ 12var fontStyle = 'normal';//フォントスタイル 13var fontFamily = 'Arial';//フォントファミリー 14ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 15 16var dataString = dataset.data[index].toString(); 17 18// 値の位置 19ctx.textAlign = 'center';//テキストを中央寄せ 20ctx.textBaseline = 'middle';//テキストベースラインの位置を中央揃え 21 22var padding = 5;//余白 23var position = element.tooltipPosition(); 24ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding); 25 26}); 27} 28}); 29} 30}); 31コード
2023/01/07 01:18こちらの質問が複数のユーザーから「調査したこと・試したことが記載されていない質問」という指摘を受けました。
大変失礼致しました。
コードを記載致します。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>9-5-3 棒グラフ（横・複数バー）</title>
<meta name="description" content="書籍「動くWebデザインアイディア帳」のサンプルサイトです">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--==============レイアウトを制御する独自のCSSを読み込み===============-->
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-5-3/css/9-5-3.css">
</head>
<body>
<h1>棒グラフ（横・複数バー）</h1>
<p class="lead">使用したライブラリ：<a href="https://www.chartjs.org/" target="_blank">https://www.chartjs.org/</a></p>
<div class="box">
<h2>病床稼働率</h2>
<div>
<canvas id="chart02"></canvas>
</div>
<!--/box--></div>
<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>
<!--CodePenプレビュー用にコメントアウトしています。※CodePenで読み込んだJSとHTMLで読み込んだJSがバッティングして挙動がおかしくなっているため。ご利用の際はコメントを取り除いてご利用ください。<script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-5-3/js/9-5-3.js"></script>-->
</body>
</html>
【CSS】
@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
body{
background:#ECF2FC;
}
h1{
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin:30px 0;
}
.lead{
padding: 20px;
text-align: center;
}
.box{
max-width:600px;
width:100%;
margin:100px auto 330px auto;
padding: 20px;
background:#fff;
text-align: center;
}
【javascript】
//値をグラフに表示させる
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,//バーの太さ
}
]
}
}
});
}
});
質問文は編集できるので、そっちに追記しよう
んで、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
試したことと、それがどのような結果になったかについても記載いただけましたら幸いです。
