top of page

最新記事リスト

  • 執筆者の写真u st

テーブルチャートに画像を表示させる方法

更新日:2023年10月20日

テーブルチャートに画像を表示させる方法についてご紹介します。



















今回は、以下フリーイラストサイトから果物の画像を取得しました。


▼フリーイラストサイト



①[管理コンソール]の[コンテンツ セキュリティ ポリシー]で、

 [名前](任意)と[原点]( https://illustimage.com )を入力し、

 [Directive]で「img-src」を選択し、追加する。

 

 ※Qlik Sense SaaSから外部のデータや画像を取得する場合、許可したいURLと、

  何を許可するのか(例えば画像を許可するなど)を設定することで、

  外からデータを取得することが可能です。



 

















②データをロードする

 ※今回は、Inline句を使用し、ロードスクリプト内に直接データを記述しました。
















※上記果物コードの確認方法は以下です。


 1) 「Ctrl + Shift + C」を押し、デベロッパーツール画面左上の   ポインタのマークが反転した状態で、画像をクリックする。















 2) デベロッパーツール画面の該当箇所のコードが反転するので、   URLにポインタを合わせ、画像のURL をクリックし、画像のURLを確認する。













  

 各果物のURLの「.png」の前の数字(バナナであれば「2412」)を果物コードとし、

 Inline句を用いてデータロードエディタに記載する。



③テーブルチャートを配置する
















④②でロードしたデータの「果物」を軸として追加する

















⑤画面右のプロパティパネルの[列の追加]から、再度 軸として「果物」を追加する














⑥⑤で追加した「果物」タブを開く













⑦少しスクロールし、[表記]を「画像」、[画像の設定]を「URLを追加」、

 [画像URL]に以下スクリプトを記述する


 ▼スクリプト

  ='https://illustimage.com/photo/thum/' & 果物コード & '.png'


 

  








※上記スクリプトで、「果物コード」ごとに画像を取得できます。

  

 【イメージ】

  例えばバナナといちごのURLは以下だが、果物コードをデータとして持っているため、

  上記スクリプトを記載することで果物コードごとに画像を取得できる。




以上の方法で、画像を表示させることが可能です。












さらに、表示されている画像を大きく表示させたい場合は、以下の手順をご参照ください。

1) [スタイル]タブの[プレゼンテーション]、さらに[スタイル指定]を選択する




2) [チャート]タブの[行の高さ]を任意の数値に設定する
















以上が、Qlik Sense SaaSのテーブルチャートにて画像を表示させる方法でした。

何かご不明点がございましたら、お気軽にコメントください(。ӧ◡ӧ。)


閲覧数:36回0件のコメント

関連記事

すべて表示

Comments


bottom of page