こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

JQuery justGageの変数について

Webサイトのコンテンツの一部として、JQueryのjustGageを使用しています。
私はこれを用いてPM2.5や気温のデータをメーターで表示しようと考えています。

ソース上の decimals に値を設定することにより小数点以下の値を指定することができます。
現在、decimals に2を指定しており、小数点以下二桁で表示をしています。
しかし、PM2.5の値などは小数点以下2桁で表示するべき値なのですが、気温は小数点二桁で表示するのは不適切です。
そこで、気温のみを整数型に表示させようと試みたのですがうまくいかなかったのでこちらで質問させていただきました。
言葉足らずですみませんが、アドバイスをいただけたらと思っています。

使用しているもの
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>
<!-- <a href="#" id="g1_humidity" class="button grey">Humidity</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>

投稿日時 - 2015-09-01 23:09:50

QNo.9040516

困ってます

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

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>
<!-- <a href="#" id="g1_humidity" class="button grey">Humidity</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>

投稿日時 - 2015-09-02 12:37:34

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(1)

-広告-
-広告-
-広告-
-広告-