一覧のカスタマイズでグラフ加工して表示したい。

kintone カスタマイズ
1

こんにちは。超初心者です。

グラフ画面の歯車アイコンの下のアイコンで下記のような埋め込み用タグを取得して、一覧のカスタマイズでhtml欄に貼り付け、グラフを表示させていますが、グラフの下に表示される要素名?(レコードタイトル?)を消すことは可能でしょうか？

<iframe width=“800” height=“600” frameborder=“0” src="https://xxxxx.cybozu.com/k/50/report/portlet?report=123456&chartType=bar&stackType=stacked"></iframe>

js初心者ですので高度な事は理解不能ですが、htmlの修正程度で可能であればご教示いただければ助かります。

2

yachtman さん
cstapの瀧ヶ平です。

JavaScriptを用いるのであれば、レコード一覧表示イベント内の処理で、対象のiframe要素の内部のhead要素内に以下のようなStyleタグを追加することでレコードタイトルの削除は可能です。

<style>
text.highcharts-xaxis-title tspan {
    display: none;
}
div.highcharts-axis>span {
    display: none;
}
</style>

具体的には次のようなコードで実装できます。

(function() {
  "use strict";
  document.addEventListener('DOMContentLoaded', function(event) {
    var graphs = document.getElementsByTagName('iframe');
    for (var i = 0, i < graphs.length; i++) {
      var graph = graphs[i];
      graph.contentWindow.addEventListener('DOMContentLoaded', function(event) {
        var style = document.createElement('style');
        style.innerText = "text.highcharts-xaxis-title tspan { display: none; } div.highcharts-axis>span { display: none; }";
        event.target.head.appendChild(style);
      });
    }
  });
})();

ただし、iframeのsrcが違うドメインの場合はこの処理は実行できないので注意が必要です。

「いいね！」 1
3

レコード一覧表示イベントではなく、windowのDOMContentLoadedです。
失礼しました

4

瀧ヶ平でさん。
早速のご連絡ありがとうございます。

一覧のカスタマイズのHTML欄での上記htmlの修正では無理ということですね?
サンプルコードのご提供ありがとうございます。
JavaScriptはまだ勉強を始めたところですがチャレンジしてみます。