初心者のFileMaker pro Q&A

みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。

1.ファイルメーカーで解らない事があればここで質問して下さい。

何方でも、ご質問・ご回答お願いします。 (優しく回答しましょう)

ログインしていません。

アナウンス


#1 2020-11-16 09:35:19

koko009
ゲストユーザー

[解決] webビューアにchart.jsのグラフを表示する方法ついて

いつもお世話になっております。今回も、html文をブラウザーでは表示されるがwebビューアでは表示されないという問題についてです。あるサイトでchart.jsの多重円グラフの凡例に系列を使えないかと思い質問し、一つの方法としてhtmlのボタン配置で系列グラフを表示非表示させる下記のhtml+chart.js+javascriptソースコードを教えてもらいました。これをそのままFMのwebビューア表示に適用できないかとpluginのsrcの部分のみ絶対パスに変えて試みましたがhtmlのボタンのだけが表示されグラフが読み込まれません。グラフを表示させる方法をお教えください。環境はwin10,FM19
<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="utf-8">
   <title>円グラフ</title>
  </head>
  <body>
  <canvas id="myPieChart" width="550" height="480"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
  <script type="text/javascript" src="Chart.js"></script>
  <script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script>
<button class="toggleDataset" data-id="0">仙台</button>
<button class="toggleDataset" data-id="1">札幌</button>
<button class="toggleDataset" data-id="2">渋谷</button>
  <script>
        var datasets = [
        { label: '仙台', data: [320000, 590000, 400000, 420000, 380000, 250000, 420000], },
        { label: '札幌', data: [520000, 450000, 380000, 280000, 590000, 400000, 530000], },
        { label: '渋谷', data: [650000, 230000, 480000, 600000, 620000, 700000, 760000], },
        ];
        var visibility = [1, 1, 1]; // 各データの表示状態フラグ 1: 表示、0: 非表示
        var ctx = document.getElementById('myPieChart');
        var config = {
        type: 'pie',
        data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        datasets: datasets
        },
        options: {
        responsive: false,  // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 
        title: {
        display: true,
        text: ''
        },
        legend: { // 凡例
        display: true, // 表示の有無
        position: 'top' // 表示位置
        }
        },
        plugins: {
        colorschemes: {
        scheme: 'office.Red6' //現状ではデフォルトでしか機能しない
        }
        }
        };
        window.myPieChart = new Chart(ctx, config);       
        var buttons = document.getElementsByClassName('toggleDataset');
        for(button of buttons){
        button.addEventListener('click', function(e){
        // クリックされたボタンに応じてデータの表示切り替え
        var dataId = e.target.getAttribute('data-id');
        if(visibility[dataId] == 1){
        // 非表示
        config.data.datasets = config.data.datasets.filter(
        data => data != datasets[dataId]
        );
        e.target.style = 'text-decoration: line-through;';
        }else{
        // 表示
        config.data.datasets.push(datasets[dataId]);
        e.target.style = '';
        }
        // 表示状態フラグとグラフの更新
        visibility[dataId] = 1 - visibility[dataId];
        window.myPieChart.update();
        });
        }
        </script>
  </body>
  </html>

#2 2020-11-16 10:21:33

Moz
メンバー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

解析するのは面倒なので......

ざっと見た感じで chart.js は Web から読んでますが
「chartjs-plugin-colorschemes.js」はローカルのパスのままになっていませんか?

オフライン

#3 2020-11-16 10:41:29

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

Moz様 プラグインのsrcは下記のように書き換えています。でもこの部分に問題があっても色がつかないだけです。
<script type="text/javascript" src="D:\FM\チャート\Chart.js"></script>
<script type="text/javascript" src="D:\FM\チャート\chartjs-plugin-colorschemes.js"></script>

#4 2020-11-16 10:46:02

Moz
メンバー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

Windows はあまり分からないので、詳しい人の降臨を待ちましょう。ごめんなさい。

なお、FileMaker Pro の Web ビューアは ポンコツ版の IE11 なので、
ブラウザ(Edge や Chrome、Firefox)で正常に表示されていても IE11 で表示できないモノはだめですし
IE11 では大丈夫でも Web ビューアではダメなこともあります。
※ Chart.js のグラフは Windows 版の Web ビューアでも表示できるので中身がなんかアレなのでしょうね。

編集者 Moz (2020-11-16 10:47:05)

オフライン

#5 2020-11-16 15:27:51

himadanee
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

FM19でも変わってないと思うけど、Win版ではWebビューアのdata:のURLは内容をtempフォルダに書き出されてfile:として表示されます。
なので、別のフォルダのsrcは読み込めないはずです。

あと、data:ならURLであって、つまり内容は改行なしで全体で1行なので、コメントを//で書くとそれ以後が全部コメントになってしまって、だめです。/**/を使うか、コメントは消します。

#6 2020-11-16 17:24:44

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

himadanee様 私のwebビューア表示の方法は別テーブルにhtml文をQuote関数で書き換えたテキスト(配列の部分などを変数として渡すため)をいくつも用意しおき、webビューアの設定でEvaluate (ExecuteSQL (・・で必要なhtml文読み込み表示させるようにしています。いろいろご指摘はありましたが、確かに別ファイルなどから画像を読み込むにはfile:・・は使いますがプラグインの読み込みの場合は"D:\FM\チャート\Chart.js"の形にしないと読み込めません。コメントに関してはjavascriptdeでは//で問題ありません。参考にwebビューアでchart.jsを使って多重円グラフ描くhtml文(Quote関数で書き換えたもの)を下記に記しておきます。
"<!DOCTYPE html>¶
  <html lang=\"ja\">¶
  <head>¶
    <meta charset=\"utf-8\">¶
   <title>棒グラフ</title> ¶
   </head>¶
  <body>¶
    <canvas id=\"myPieChart\" ></canvas>¶
      <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js\"></script>¶
<script type=\"text/javascript\" src=\"D:\FM\チャート\Chart.js\"></script>¶
   <script type=\"text/javascript\" src=\"D:\FM\チャート\chartjs-plugin-colorschemes.js\"></script>¶
     <script>¶
   var ctx = document.getElementById(\"myPieChart\");¶
   var myPieChart = new Chart(ctx, {¶
     type: 'pie',¶
    data: {¶
             labels:  ['1月','2月','3月','4月','5月','6月','7月'],  // X軸のラベル¶
             datasets: [¶
            {label:'仙台' ,data: [320000,590000,400000,420000,380000,250000,420000], tension: 0,fill: false}, ¶
{label:'札幌' ,data: [520000,450000,380000,280000,590000,400000,530000], tension: 0,fill: false}, ¶
{label:'渋谷' ,data: [650000,230000,480000,600000,620000,700000,760000], tension: 0,fill: false}, ¶

         },¶
     options: {¶
       title: {¶
         display: true,¶
         text:''¶
       },       ¶
  legend: {                          // 凡例¶
                 display: true,                     // 表示の有無¶
                  position: 'top'              // 表示位置¶

             }¶
    },      plugins: {¶
             colorschemes: {¶
                 scheme: 'office.Red6'¶
             }¶
           }¶
   });¶
    </script>¶
  </body>¶
  </html>"

#7 2020-11-19 14:19:12

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

たぶん、表示されない理由は、あるサイトに
「また、「for - of文」はECMASCript2015から導入された構文なので、古いブラウザには対応していない点も注意が必要でしょう。」
とあったので、Mozさんの指摘通りwebビューアが対応出来ないのかも・・・憶測だけど、 for(button of buttons){以下をカットすれば多重円グラフが表示されるので
for(button of buttons){に代わる反復処理ならと思うが、これができるくらいならあちこちで質問を繰り返し行わない・・・

#8 2020-11-19 17:24:21

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

やはり、別のサイトでもFM19は「Windows版がIE11相当なエンジンであるので、残念ながらES6(正しくはES2015というべき?)でのプログラミングができる状況ではありません。」とありました。
FileMaker 19のJavaScriptはES6で書けるのか?
https://blog.msyk.net/?p=1118

#9 2020-11-20 04:48:22

calafate
メンバー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

自分は普通にES6構文で書いてFileMakerで動かす時は以下のbabelのサイトで古い構文に変換して貼り付けています。
https://babeljs.io/repl#?browsers=&buil … alPlugins=

webpackで細かく調整すればいいのでしょうが、面倒なのでちょっとしたものであれば変換はこれで十分かと思います。
これでほぼWindows版FMはいけてます。

オフライン

#10 2020-11-20 10:29:47

qb_dp
メンバー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

お~。コレは便利そうですネ。
https://babeljs.io/

オフライン

#11 2020-11-20 10:40:13

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

calafate様 Babelの詳しい使い方がわからないのでとりあえずBabelを開きscript部分をコピペし変換しその結果を使ってブラウザーで表示させたところボタン処理も問題なくできたので、FMのwebビューアで試みたところ表示まではできましたがボタン処理は動作しませんでした。なお、凡例をlabelsから系列に変更して表示非表示するやり方はchart.jsのオプション設定を変える方法を後で教えてもらいwebビューアで動作するようになったのですが系列ボタン+labelsの凡例による表示非表示の複合方式を実現したいと思っています。取りあえずここまでの報告です。ご教授ありがとうございました。

#12 2020-11-23 11:02:24

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

いつもお騒がせして申し訳ありません。
javascriptのfor..of構文を、別サイトで教えもらったものを元に下記のコードに変更し一応の解決を見ました。

for (var i = 0; i < buttons.length; i++) {
   var button = buttons[i];
   button.addEventListener('click', function (e) {
     // クリックされたボタンに応じてデータの表示切り替え
     var dataId = e.target.getAttribute('data-id');
 
     if (visibility[dataId] == 1) {
       // 非表示
       config.data.datasets = config.data.datasets.filter(function (data) {
         return data != datasets[dataId];
       });
       e.target.style.textDecoration = 'line-through';
     } else {
       // 表示
       config.data.datasets.push(datasets[dataId]);
       e.target.style.textDecoration = 'none';
     } // 表示状態フラグとグラフの更新
     visibility[dataId] = 1 - visibility[dataId];
     window.myPieChart.update();
   });
 }

#13 2020-11-27 10:06:01

koko009
ゲストユーザー

Re: [解決] webビューアにchart.jsのグラフを表示する方法ついて

また失敗してしまった。chart.jsの色を自動配色するプラグインのコードの場所を間違っていた・・・余計なコメントを最初のコードに書いてしまっていた。

   options: {
        plugins: {
              colorschemes: {
                  scheme: 'office.WoodType6' 
              }
            },
     responsive: false,
     // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定  

ただしschemeタイプ「office.WoodType6」は6色なので1月と7月が同じ色になるのでschemeタイプはダウンロードされているsamplesにあるindexかhttps://nagix.github.io/chartjs-plugin-colorschemes/ja/から適当なタイプを選定してください。

クィック投稿

メッセージを書いて送信してください。
登録の確認

実在の人物による登録であることを確認します。

Board footer