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コード
こちらの質問が複数のユーザーから「調査したこと・試したことが記載されていない質問」という指摘を受けました。