テーブルチャートに画像を表示させる方法
更新日: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のテーブルチャートにて画像を表示させる方法でした。
何かご不明点がございましたら、お気軽にコメントください(。ӧ◡ӧ。)
Comments