一覧画面のグラフ表示

kintone カスタマイズ
1

お世話になります。

レコード一覧画面にグラフを表示させているのですが、上記の重なりを解消したいです。

修正点をご教授いただきたく、どうぞよろしくお願い致します。

kintone.events.on(‘app.record.index.show’, function(event){
kintone.app.getHeaderMenuSpaceElement().innerHTML =
‘<iframe width=“600” height=“170” frameborder=“0” src=“埋め込みタグ”></iframe>’;
kintone.app.getHeaderSpaceElement().innerHTML =
‘<iframe width=“1800” height=“170” marginheight=“150” frameborder=“0” src=“埋め込みタグ”></iframe>’;

 

【追加質問】

上記のグラフ表示は問題なく出来ているのですが、グラフのサイズ変更（大きく表示）したい場合はどのように設定すればよろしいでしょうか。

cssで変更可能でしょうか？

ご教示頂けますと幸いです。よろしくお願いいたします。

2

ayoko さん

こんにちは。

>上記の重なりを解消したいです。

kintone.app.getHeaderSpaceElement()の方のiframeに、
「style=“padding-top : 100px”」などを指定するのはどうでしょうか。

'<iframe width="1800" height="170" marginheight="150" frameborder="0" **style="padding-top : 100px"** src="埋め込みタグ"></iframe>';

また、少し位置関係が変わると思いますが、
２つのiframeともkintone.app.getHeaderSpaceElement()に表示させるのも、重なりは解消されると思います。

よろしくお願いします。

3

wenxit1218様

お世話になります。

ご教授いただきました通り変更したところ、想定した表示となりました。

ありがとうございます。

また、kintone.app.getHeaderSpaceElement()に2つのiframeを表示させると下記のようになりますでしょうか？

spaseに複数要素指定可能なのでしょうか。もし可能でしたらご教授いただけますと幸いです。

何卒よろしくお願い申し上げます。

4

ayoko 様

spaseに複数要素指定することはできます。
長くなってしまうので、要素を変数に代入するとこんな感じになると思います。

kintone.events.on('app.record.index.show', function(event){
  var iframeA = '<iframe width="600" height="170" frameborder="0" src="埋め込みタグ"></iframe>';
  var iframeB = '</iframe><iframe width="1800" height="170" marginheight="150" frameborder="0" src="埋め込みタグ"></iframe>';
  kintone.app.getHeaderSpaceElement().innerHTML = iframeA + iframeB;

ただ現状のiframeのwidthの合計はかなり長いので、２行に改行されると思います。
添付して頂いた横並びにするには、widthを調整する必要があると思います。

よろしくお願いします。

5

wenxit1218様

お世話になります。

初歩的な質問にご丁寧にご説明いただき、ありがとうございます。

widthを調整し、1行で表示することができました。

今後とも、どうぞよろしくお願い致します。

この度はありがとうございました。