【Qlik Sense】気になってたSVGを使ったテーブル表現を解剖してみる

はじめに

Qlik Connect 2024のセッション「Top 10 Visualization tips」でも紹介された
KPI Cards revisitedのテーブルでのSVGを取り上げます！

ぜひアプリをダウンロードして、アプリを触りながら読んでください！

ストレートテーブルにあまり見慣れない描画が実装されています。

ここです。

ストレートテーブルにもミニチャートという表現方法も用意されていますが、
チャートが限定的、また上記のように複数の要素を組み合わせた表現は不可です。

他BIであれば実装できるのは知っていたので、Qlik Senseでもできるのか、
その中身をみていきます！

まずはざっくりと。

ストレートテーブルのプロパティを解剖していきましょう。

中身をみると意外とシンプルでした。以下の2箇所を設定すれば実装できます。

• 列の数式
  
  
  
• 表記の設定（それ以下スクショの箇所）
  

大体の方は、列の数式を見た時に「ウッ!?」となりませんか。（私はなりましたｗ）

普段書いているような数式も含まれていますが、それ以外見慣れない数式が多く含まれています。お察しの通り、これらによってSVGでの描画を可能にしています。

SVGとは

SVG（Scalable Vector Graphics）は、XMLベースのベクター画像形式です。
ビットマップ画像（JPEGやPNG）とは異なり、数式で図形を定義するため、どれだけ拡大しても画質が劣化しません。

SVGの特徴

✅ スケーラブル: 拡大しても鮮明
✅ 軽量: テキストデータなのでファイルサイズが小さい
✅ 編集可能: コードで直接編集できる
✅ アニメーション対応: 動的な表現が可能

なぜQlik SenseでSVGを使うのか？

Qlik Senseの標準チャートは強力ですが、以下ように物足りないことがあります。

• 独自のKPIデザインを実現したい
• 1つのセルに複数の情報を詰め込みたい
• アイコンや記号で直感的に情報を伝えたい

SVGを使えば、これらすべてを数式だけで実現できます。

SVG数式の解剖

数式をパーツごとに分けてみていきます。

➀Data URI宣言とSVGキャンバスサイズの定義

1. Data URI宣言

1. 1. 「以降に画像データが始まりますよ」という宣言をする
      この通り入力でOK
      
   2. SVGキャンバスサイズの定義
      1. 幅、高さをpx単位で設定する
         

➁エリアチャートの表示

1. ポリゴンのスタイル
   stroke、fill属性を使ってスタイリングしています
   
2. ポリゴンの描画
   points属性で、描画するポリゴンの座標リストを指定します
   その座標を順に線で結び、最後に自動的に終点と始点を結び、多角形を描画します
   
   
   始点と終点以外は、実データに基づいた算出が必要なため、concat関数を使った数式を使っています。concat関数は各月の座標間に半角スペースを設けるための引数を含み、文字列結合でポリゴン座標を算出しています。
   ・始点の座標：(10,  100)
   ・終点の座標：(260, 100)
   
   
   Ｘ、Ｙ座標の算出は、以下のロジックで数式が組まれています。
   
   これら結果、ある１行の算出結果は以下のようになります。
   この座標を結び、ポリゴンとして表示していたのです。
   points="10,100 20,88 40,74 60,80 80,75 100,73 120,78 140,81 160,80 180,85 200,60 220,89 240,89 260,100"



➂円の表示

1. 円の数式
   特に難しい部分はないかもしれませんが、
   stroke属性で値によって色が変化する実装になっています
   
   

➃テキストの表示

1. テキスト描画の宣言
   テキスト描画には、他の図形と同様に、<text>タグが必要になります今回のケースでは複数のテキスト表示があるため、それらに共通するスタイル設定などが記述されています
   

   ・text-anchor：テキストの開始位置

   ・font-family：フォントの種類

   ・font-size：フォントサイズ

   ・fill：フォントカラー
   
   

2. 各テキストの個別設定

   <tspan>タグ内では、各テキストごとに位置や書式を変える個別設定をしています

   以下では、画面のテキスト描画と数式を対照しています

   ぜひ１箇所ずつ確認してみてください！

   

➄さいごに

以上！表記のプロパティ設定はカンタンなので実際に触ってみてください！

おわり

いかがでしたか。

SVGを使うことで、Qlik Senseでの表現がより一層広がっていきます。

その一方で、開発・メンテには少々難易度が高いとネガティブな側面もあります。

過度な利用は避けて、まずはお試しに！良い塩梅で使ってみてくださいね。