みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。
1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 （優しく回答しましょう）
You are not logged in.
Pages: 1
お世話になっております。FMP19winです。
簡単なRPB(Round Progress Bar)をWebViewerで表示しようとしていて何故か動かず苦戦中です。
他のPBなどは同じやり方で問題無く動いているので・・・
コードは以下の通り
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta http-equiv='X-UA-Compatible' content='ie=edge' />
<title>Table Example</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css'>
<script defer src='https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js'></script>
<style>
.w-4 {
width: 4px;
}
</style>
</head>
<body class="overflow: hidden;">
<div id="progress1" class="w-10 h-10 relative text-xs"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
<script>
var newValue = .9;
var circle1 = new ProgressBar.Circle('#progress1', {
color: '#0F9D58', //'#0F9D58'緑 '#FCB03C'橙
strokeWidth: 10, //塗潰す帯の幅
trailWidth: 5,
duration: 1500,
easing: 'easeInOut',
text: {
autoStyleContainer: false
},
step: function(state, circle) {
circle.setText(Math.round(circle.value() * 100) + '%');
}
});
circle1.animate(newValue);
</script>
</body>
</html>
このコードをFMPのフィールド(myField)にテキスト保存してWebViewer上で
"data:text/html,"
& myField
とすると問題無く表示されます。
ところが、以下の計算フィールドc_myFieldでHTMLを計算したもの(結果はテキスト形式)を
"data:text/html,"
& c_myFieldとしても、何も表示が出てきません。
Let ( [
valA= LoggedHours;
htmlTemplate = "
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta http-equiv='X-UA-Compatible' content='ie=edge' />
<title>Table Example</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css'>
<script defer src='https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js'></script>
<style>
.w-4 {
width: 4px;
}
</style>
</head>
<body class=\"overflow: hidden;\">
<div id=\"progress1\" class=\"w-10 h-10 relative text-xs\"></div>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js\"></script>
<script>
var newValue = .9;
var circle1 = new ProgressBar.Circle('#progress1', {
color: '#0F9D58', //'#0F9D58'緑 '#FCB03C'橙
strokeWidth: 10, //塗潰す帯の幅
trailWidth: 5,
duration: 1500,
easing: 'easeInOut',
text: {
autoStyleContainer: false
},
step: function(state, circle) {
circle.setText(Math.round(circle.value() * 100) + '%');
}
});
circle1.animate(newValue);
</script>
</body>
</html>
"
];
htmlTemplate
)
計算結果をテキストエディタで見るとフィールドに書かれたHTMLと全く同じ（改行は無くなっていますが）です。
様々なチャートを同じ手法で表示しているのですが、このRPBだけがうまく行かず困っています。
些細なことが原因かとも思いますが、問題点などご指摘いただけると助かります。
宜しくお願いします。
Offline
//'#0F9D58'緑 '#FCB03C'橙
//塗潰す帯の幅↑のコメントアウトが原因です。
削除するか、以下に書き換えれば大丈夫です。
/*'#0F9D58'緑 '#FCB03C'橙*/
/*塗潰す帯の幅*/Offline
qb_dpさん、いつもありがとうございます。
思いっきり忘れていました！JS内の//の罠！
この例はサンプルで偶々2行だけでしたが、実際困っているコードには沢山在りました（大汗）。
全て予定通りの動作が確認できました。
Offline
Pages: 1
[ Generated in 0.007 seconds, 9 queries executed - Memory usage: 559.17 KiB (Peak: 583.58 KiB) ]