JQuery justGageの変数について

2023/09/06 08:44

このQ&Aのポイント

JQueryのjustGageを使用してPM2.5や気温のデータを表示する方法について質問です。
現在、小数点以下二桁で表示しているが、気温は整数型で表示したい。どのようにすればいいですか？
ソースコードでは、valueを設定することでデータを表示しています。

ベストアンサー

JQuery justGageの変数について

2015/09/01 23:09

Webサイトのコンテンツの一部として、JQueryのjustGageを使用しています。私はこれを用いてPM2.5や気温のデータをメーターで表示しようと考えています。ソース上の　decimals に値を設定することにより小数点以下の値を指定することができます。現在、decimals に2を指定しており、小数点以下二桁で表示をしています。しかし、PM2.5の値などは小数点以下２桁で表示するべき値なのですが、気温は小数点二桁で表示するのは不適切です。そこで、気温のみを整数型に表示させようと試みたのですがうまくいかなかったのでこちらで質問させていただきました。言葉足らずですみませんが、アドバイスをいただけたらと思っています。使用しているもの justgage-1.1.0.min.js raphael-2.1.4.min.js ソース <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Donuts, baby!</title> <meta name="viewport" content="width=device-width"> <style> .container { width: 450px; margin: 50px auto 0 auto; text-align: center; } .gauge { width: 450px; height: 450px; } a:link.button, a:active.button, a:visited.button, a:hover.button { margin: 30px 5px 0 2px; padding: 7px 13px; } </style> </head> <body> <div class="container"> <div id="g1" class="gauge"></div> <a href="#" id="g1_pm2.5" class="button grey">PM2.5</a> <a href="#" id="g1_spm" class="button grey">SPM</a> <a href="#" id="g1_temperature" class="button grey">Temperature</a>  </div> <script src="js/raphael-2.1.4.min.js"></script> <script src="js/justgage-1.1.0.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event) { var g1 = new JustGage({ id: "g1", title: "項目を選択してください", value: 0.5, min: 0, max: 100, decimals: 2, gaugeWidthScale: 0.6 }); document.getElementById('g1_pm2.5').addEventListener('click', function() { g1.refresh(0.03);//値を取得 g1.refresh(g1.originalValue, 100);//最大値 g1.txtTitle.attr({ "text": "PM2.5濃度[μg/m3]"// ゲージラベル }); }); document.getElementById('g1_spm').addEventListener('click', function() { g1.refresh(value=20.5); g1.refresh(g1.originalValue, 100); g1.txtTitle.attr({ "text": "SPM濃度[mg/m3]" }); }); document.getElementById('g1_temperature').addEventListener('click', function() { g1.refresh(value=30);; g1.refresh(g1.originalValue, 100); g1.txtTitle.attr({ "text": "気温[℃]" }); return false; }); /* document.getElementById('g1_humidity').addEventListener('click', function() { g1.refresh(value=70); g1.refresh(g1.originalValue, 100); g1.txtTitle.attr({ "text": "湿度[%]" }); return false; }); */ }); </script> </body> </html>

ahegaopeacechan
お礼率0% (0/1)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

h_w
ベストアンサー率29% (21/72)

2015/09/02 12:37 回答No.1

g1.config.decimals = 0; とすることで変更できます。それぞれのイベント内で”g1.config.decimals”を指定してはいかがでしょうか。ソース <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Donuts, baby!</title> <meta name="viewport" content="width=device-width"> <style> .container { width: 450px; margin: 50px auto 0 auto; text-align: center; } .gauge { width: 450px; height: 450px; } a:link.button, a:active.button, a:visited.button, a:hover.button { margin: 30px 5px 0 2px; padding: 7px 13px; } </style> </head> <body> <div class="container"> <div id="g1" class="gauge"></div> <a href="#" id="g1_pm2.5" class="button grey">PM2.5</a> <a href="#" id="g1_spm" class="button grey">SPM</a> <a href="#" id="g1_temperature" class="button grey">Temperature</a>  </div> <script src="js/raphael-2.1.4.min.js"></script> <script src="js/justgage-1.1.0.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event) { var g1 = new JustGage({ id: "g1", title: "項目を選択してください", value: 0.5, min: 0, max: 100, gaugeWidthScale: 0.6 }); document.getElementById('g1_pm2.5').addEventListener('click', function() { g1.config.decimals = 2; g1.refresh(0.03);//値を取得 g1.refresh(g1.originalValue, 100);//最大値 g1.txtTitle.attr({ "text": "PM2.5濃度[μg/m3]"// ゲージラベル }); }); document.getElementById('g1_spm').addEventListener('click', function() { g1.config.decimals = 2; g1.refresh(value=20.5); g1.refresh(g1.originalValue, 100); g1.txtTitle.attr({ "text": "SPM濃度[mg/m3]" }); }); document.getElementById('g1_temperature').addEventListener('click', function() { g1.config.decimals = 0; g1.refresh(value=30); g1.refresh(g1.originalValue, 100); g1.txtTitle.attr({ "text": "気温[℃]" }); return false; }); /* document.getElementById('g1_humidity').addEventListener('click', function() { g1.config.decimals = 2; g1.refresh(value=70); g1.refresh(g1.originalValue, 100); g1.txtTitle.attr({ "text": "湿度[%]" }); return false; }); */ }); </script> </body> </html>

関連するQ&A

jQuery 記述方法
今、webサイトを作っていてjQueryを使用しようとしています。しかし、うまくできません。外部にjavascriptファイルを置いています。やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。よろしくお願いします。
- ベストアンサー
- JavaScript
jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので手が出ない状態です。よろしくお願いします。
- 締切済み
- JavaScript
jQuery 動的にボタンが増えた時
<html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時にどのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。
- ベストアンサー
- JavaScript
JQUERY のEmpty()処理について
JQUERY のEmpty()処理について次のコードで$('#board').empty();　後に追加作成した要素はクリックに反応しないのですが、対応の方法をお教えください。 <html><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="subf/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){ $('#board').append('<div id="card1" class="card"'); $('#card1').html("Card1"); $('#board').append('<div id="card2" class="card"'); $('#card2').html("Card2"); $('.card').click(function(){ alert($(this).attr("id")); }); }); function removeObj(){ $('#board').empty(); $('#board').append('<div id="card3" class="card"'); $('#card3').html("Card3"); } </script> </head> <body> <form><input type='button' onclick='removeObj()' value='Reset'></form> <div id="board" style="WIDTH: 10%; TOP: 100px; HEIGHT: 100px; BACKGROUND-COLOR: #ccff33"></div> </body></html>
- 締切済み
- JavaScript
Jquery　と　JqueryUIについて
現在、Jquery　と　JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。また、補足ですが、これが上手くいけば、script内の　show メソッドのかわりに　ｔoggleを使いたいと考えています。上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。よろしくお願いいたします。
- ベストアンサー
- AJAX
ｊQuery。セレクタに変数を使えないケース？
Javascript勉強駆け出しの者です。ＷＩＮ7、Chromeを主に使っています。 <!DOCTYPE html> <html> <head> <meta carset="utf-8"> <script src="js/jquery-1.11.0.min.js"></script> <style> .chr{ position:absolute; } </style> </head> <body> <div id="gyoku" class="chr" style="top:60px;left:0;"> <img src="parts/gyoku.png"> </div> <div id="hisya" class="chr" style="top:120px;left:0;"> <img src="parts/hisya.png"> </div> <div id="kaku" class="chr" style="top:180px;left:0;"> <img src="parts/kaku.png"> </div> <script> var chrid; dragflg=false; $(".chr").css("position","absolute") .mousedown(function() { dragflg=true; chrid=$(this).attr('id'); }) .mouseup(function(){ dragflg=false; }); // $("#gyoku").mousemove(function(e){ $("#"+chrid).mousemove(function(e){ if(dragflg) { 　e.preventDefault(); $(this).css("left",e.clientX-20+"px") .css("top",e.clientY-20+"px"); } }); </script> </body> </html> 一応、シンプルにドラッグドロッププログラムを書くというのを目指したものです。対象のキャラ（約35×50px）を3つほど用意し、mousedown時に変数chridにid名を読み込み、切り替えてドラッグドロップするという狙いですが、うまくmousemoveがいきません。mousemove行を１行上のコメント行に差し替えて個別にidを直接書けば意図通り動くのに、変数を使用するとダメなようです。ｊQuery解説サイトでも、セレクタに"文字列"+変数という書き方は使える、という説明で、"#gyoku"と　chridに"gyoku"を読み込んでいる時の"#"+chrid　は同じ意味と認識しているのですが、違うのでしょうか？どうすればうまく動くのか、どなたかご教示お願いします。ｊQueryUIを使った方が手っ取り早いというご指摘もあるかと思いますが、この際、ｊQueryのセレクタで変数が無効なケースとは何かを知りたくなってしまったので、これはこれとして教えていただければ幸いです。
- ベストアンサー
- JavaScript
このjqueryが稀に動かない
画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });
- 締切済み
- JavaScript
jqueryの組み込みが出来ません…
jqueryのダウンロードサイトから最新番（current？）のjquery-1.8.2.min.jsをダウンロードして、head間に組み込みして、buttonをクリックしたら非表示範囲が表示されるという動作を練習しているのですが、機能してくれないです（涙何がいけないのかさっぱりわかりません…。 jsファイルを外部かしてみたり、bodyとhtmlタグの間に記述してみたりしたのですが、それでも動作してくれません…。何がいけないんでしょうか？？下記にソースを書いておきますので、わかる方いらっしゃったらご教授おねがいします<m(_ _)m> <!DOCTYPE HTML PUBLIC > <html> <head> <title>notitle</title> <meta charset="shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="cntent-script-type" content="text/javascript"> <meta name="keywords" content=""> <meta name="description" content=""> <script type="text/javascript" src="./jquery-1.8.2.min.js"></script> <script type="text/javascript"> $("button").click(function(){ $("p").show(slow); )}; </script> <style type="text/css">  </style>  </head> <body> <button>Show it</button> <p></p> </body> </html> あのなめらかな感じで動作させてみたいんです。
- ベストアンサー
- JavaScript
jqueryの表示非表示に関する質問
jqueryの初心者です。調べてもわからなかったので質問します。 display:noneで要素を非表示にし、クリックしたときに要素をcssで表示するようにしたのですが別のボタンを押したときにまた非表示にすると2回押さないと表示してくれなくなります。具体的には下記のような感じのサンプルを作ってみました。表示・非表示ボタンをクリックしたら交互に表示・非表示が切り替わるのですがクリアボタンを押した後に表示・非表示ボタンを押すとなぜか2回クリックしないと表示しません。どなたかご教授いただけませんか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq表示/非表示test</title> </head> <style type="text/css"> .text_h{ display:none; } .text_v{ display:inline; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#a01").toggle(function(){ $(this).parent().next().children("span").attr("class","text_v"); },function(){ $(this).parent().next().children("span").attr("class","text_h"); }); $("#clear").click(function(){ $(this).parent().next().children("span").attr("class","text_h"); }); }); </script> <body><p> <input type="button" value="表示・非表示" id="a01" /> <input type="button" value="クリア" id="clear" /> </p> <p><span class="text_h">ボタンを表示します</span></p> </body> </html>
- ベストアンサー
- JavaScript
jqueryについて
ただいま、jqueryのtoggle()を使って、チェックボックスのON/OFFでimgのclassを切り替える（imgをクリックしてチェックボックスをON/OFFもできる）ということをしているのですが、なぜか、チェックボックスをクリックしても、ボタンの反応はしているのですが、チェック（黒い「レ」）が表示されません。以下、jsです。 ※チェックボックスと画像の組み合わせは複数あります。 $(function(){ $("li.p01").toggle( function(){ $("input.c01").attr("checked","checked"); $("li.p01").attr("class","p01on"); }, function(){ $("input.check01").removeAttr("checked"); $("li.p01on").attr("class","p01"); } ); $("input.check01").toggle( function(){ $("li.p01").attr("class","p01on"); }, function(){ $("li.p01on").attr("class","p01"); } ); $("li.p02").toggle( function(){ $("input.check02").attr("checked","checked"); $("li.p02").attr("class","p02on"); }, function(){ $("input.check02").removeAttr("checked"); $("li.p02on").attr("class","p02"); } ); $("input.check02").toggle( function(){ $("li.p02").attr("class","p02on"); }, function(){ $("li.p02on").attr("class","p02"); } ); }); ご教授お願いいたします。また、ボタンが10個あるのですが、このまま、複製していくのもどうかと思うんですが、もっと簡単にまとめる方法などあるのでしょうか。ご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript