Q&A
このようなグラフ表示をするために、どんなライブラリを使っていますでしょうか。
<div class="levelGauge gaugeMeter" data-used="30" data-total="100" data-size="210" data-width="10" data-style="Full" data-color="#e73820" data-back="#efefef" style="width: 210px;"> <span style="line-height: 210px; font-size: 46.2px;"></span> <canvas width="210" height="210"></canvas> </div> コード
現在jqueryを用いてこちらの内容で数値に合わせて動く円ゲージを実現しています。カラー部分はcanvasで指定してあるようで、このカラー部分の角を取る良い方法が見つかりません。
テラテイルのバッジのゲージを参考にしていてそちらは角丸ではありません。
良い方法がありましたらお願い致します。。。
回答3件
0
ベストアンサー
percircleというライブラリを使用すると質問者さんの実現したいことが行えると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="percircle.css"> 7 <style type="text/css"> 8 body { 9 background-color: #555555; 10 } 11 12 .percircle { 13 background-color: #000000; 14 } 15 16 .percircle .bar, 17 .percircle .fill { 18 border-color: #ffffff; 19 } 20 21 .percircle > span { 22 color: #000000; 23 } 24 25 .percircle:hover > span { 26 -webkit-transform: scale(1.0); 27 -moz-transform: scale(1.0); 28 -ms-transform: scale(1.0); 29 -o-transform: scale(1.0); 30 transform: scale(1.0); 31 color: #000000; 32 } 33 34 .percircle:hover::after { 35 -webkit-transform: scale(1.0); 36 -moz-transform: scale(1.0); 37 -ms-transform: scale(1.0); 38 -o-transform: scale(1.0); 39 transform: scale(1.0); 40 } 41 </style> 42</head> 43<body> 44<label for="number"> 45 <input type="number" id="number" max="100" min="0"> 46</label> 47<div id="bluecircle" data-percent="0" class="big"></div> 48<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 49<script src="percircle.js"></script> 50<script type="text/javascript"> 51 $(function () { 52 $("#bluecircle").percircle(); 53 }); 54 $("#number").on("input", function () { 55 if ($.isNumeric($(this).val()) && parseInt($(this).val()) <= 100) { 56 $("#bluecircle").empty(); 57 $("#bluecircle").attr("data-percent", $(this).val()); 58 console.log(""); 59 $("#bluecircle").percircle(); 60 } 61 return false; 62 }); 63</script> 64</body> 65</html>
投稿2017/03/19 21:53
総合スコア14731
0
丸くしているのはlineCapの設定なので、ここを"butt"にすれば解決します。
CanvasRenderingContext2D.lineCap
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
が、残念ながら「AshAlom Gauge Meter」にはその設定がなく、該当部分がハードコーディングされているため、外せない要件なら別のライブラリを使ったほうがいいかもしれません。
JavaScript
1/*g.lineCap="round"*/g.lineCap="butt"
投稿2018/02/05 04:25
総合スコア13749
0
ご参考までに、TeratailのHTMLは以下のようになっていました。ライブラリを使わなくても、同じようにCanvas要素に直接、arcを描画すればよいのではないでしょうか。
JavaScript
1<div class="wrap_circle"> 2 <!-- ここのIDを動的に変えたい --> 3 <input type="hidden" id="ratio_203" value="0.6"> 4 <canvas id="canvas203" width="56" height="56"></canvas> 5 6 <script type="text/javascript"> 7 document.addEventListener('DOMContentLoaded', function() { 8 var canvas = document.getElementById('canvas'+203); 9 canvas.width = 56; 10 canvas.height = 56; 11 var ctx = canvas.getContext('2d'); 12 ctx.clearRect(0,0,56,56); 13 ctx.beginPath(); 14 ctx.lineWidth = 2; 15 ctx.strokeStyle="#eee"; 16 ctx.arc(28,28,26,0,Math.PI*2,false); 17 ctx.stroke(); 18 }) 19 </script> 20</div>
投稿2017/03/15 01:27
編集2017/03/15 01:28
総合スコア196
あなたの回答
tips
プレビュー
