サンバーストチャート
サンバーストチャート ドキュメント
Table of contents
AnyChart Extension for Qlik: Sunburst Chart
基本事項
ダウンロードとインストール
Qlik Sense Desktop
Qlik Sense DesktopにAnyChart Sunburst Extensionをインストールするには、以下の手順を行います:
- Qlik Sense用のAnyChart Sunburst Extensionをダウンロードします。
- アーカイブを解凍します。
- Windowsエクスプローラーを開き、Qlik SenseのExtensionsディレクトリに移動します:
..\Users\<UserName>\Documents\Qlik\Sense\Extensions。 - anygantt-4x-sunburstフォルダをExtensionsディレクトリにコピーします。
- Qlik Sense Desktopを再起動します。
Qlik Sense Server
Qlik SenseサーバーにAnyChart Sunburst Extensionをインストールするには、
- Qlik Sense用のAnyChart Sunburst Extensionをダウンロードします。
- Qlik Management Console (QMC)を開きます: https://<QPS server name>/qmc
- QMCスタートページまたはStartドロップダウンメニューからExtensionsを選択します。
- アクションバーのImportをクリックします。
- ダイアログで、ダウンロードしたアーカイブを選択します。パスワード欄は空欄のままにします。
- ファイルエクスプローラーウィンドウでOpenをクリックします。
- Importをクリックします。
Qlik Sense Cloud
Qlik Sense CloudにAnyChart Sunburst Extensionをインストールするには、以下の手順を行います:
- Qlik Sense Cloud用のAnyChart Sunburst Extensionをダウンロードします。
- Management Consoleにアクセスします:
- テナントのアドレスに /console を追加します: https://<your tenant address>/console
- または、ハブのユーザープロファイル下にあるナビゲーションリンクAdministrationを使用します。
- Extensionsページに移動し、Addをクリックします。
- ダイアログで、ダウンロードしたアーカイブを選択します。
- Addをクリックします。
- Management Consoleで、Content Security Policyセクションに移動し、Addをクリックします。
- ダイアログで、Content Security Policyに名前(例:AnyChart)を付けます。
- オリジンサーバーのアドレスを入力します: qlik.anychart.com
- 以下のディレクティブを選択します:
- connect-src
- font-src
- img-src
- script-src
- style-src
- Addをクリックします。
概要
Sunburst chartは、放射状ツリーマップまたは多階層パイチャートとも呼ばれ、階層的に組織化されたデータを、スライスに分割された一連の入れ子状のリングとして表示する可視化手法です。スライスのサイズはそれぞれの値を表します。
Sunburst chartの追加方法や、使用する次元とメジャーについては、Quick StartおよびDimensions and Measuresをご覧になり、確認してください。
チャートの外観を設定できます。数式による色分けやInner radiusの設定、Center contentの追加、ラベルやツールチップの調整が可能です。
また、以下のオプションも利用可能です:インタラクティブ機能、計算条件。

クイックスタート
このクイックチュートリアルでは、基本的なSunburst chartの作成方法を説明します。
まず、シートに空のチャートを追加します:
- アセットパネルのCustom objects > AnyChartに移動します。
- 空のAnyChart Sunburstチャートをシートにドラッグします。
次に、2つの次元を追加します:
- プロパティパネルのDimensionsに移動します。
- Add dimensionをクリックし、次元を選択します。
- Add dimensionをクリックし、次元を選択します。
最後に、スライスのサイズを計算するために使用されるメジャーを追加します:
- プロパティパネルのMeasuresに移動します。
- Add measureをクリックし、メジャーを選択します。
フィールドから次元やメジャーを作成したり、空のチャート上のボタンをクリックして追加したりすることもできる点に注意してください。

次元とメジャー
次元
次元を追加するには、以下の手順を行います:
- プロパティパネルのDimensionsに移動します。
- Add dimensionをクリックし、次元を選択します。
Sunburst chartには少なくとも1つの次元が必要です。ただし、次元が1つだけの場合は、通常の(単一層の)パイチャートのように見えます。多階層のチャートを作成するには、2つ以上の次元を追加してください。
次元は上位レベルから下位レベルへと正しい順序で並べる必要があることに注意してください。プロパティパネルでドラッグして調整します。
AnyChart Sunburstは、1つまたは複数のルートを持つ階層データを表示できます:


チャートの各スライスには、その次元とメジャーを表示するテキストラベルがあります。必要に応じて、ラベルに異なるテキストを表示することもできます。例えば、カテゴリの数値識別子を次元として使用しながら、カテゴリの名前をラベルとして表示することができます。詳細はラベルセクションをご覧ください。
メジャー
メジャーを追加するには、以下の手順を行います:
- プロパティパネルのMeasuresに移動します。
- Add measureをクリックし、メジャーを選択します。
メジャーはスライスのサイズを計算するために使用されます。可視化においては、任意の集計方法を用いたメジャーを使用できるほか、カスタム数式としてメジャーを設定することも可能です。例えば、カスタム数式を使用して、小さすぎるスライスを非表示にすることができます。
外観
数式による色分け
チャートのスライスはデフォルトのパレットで色付けされています。あるいは、数式によって色付けすることもできます。
数式による色分けでは、ユーザー定義の数式を使用して色を設定します。数式による色分けを使用すると、使用する色と、それらをどの値に適用するかを両方定義できるため、可視化における色の使用方法をより詳細に制御できます。例えば、特に関心のある値を強調したり、異なる値の範囲間で値を区別したりすることができます。また、数式による色分けを使用して、可視化に含まれていない値に基づいて色を付けることも可能です。
数式によってスライスを色分けするには、以下の手順を行います:
- プロパティパネルのAppearance > Colorsに移動します。
- Colorsスライダーを切り替えます。
- 最初のドロップダウンメニューからBy expressionを選択します。
- 入力ボックスに数式を入力します。
例
例:親による色分け
Pick(Match(RegionName,
'South', 'West', 'Midwest', 'Northeast'),
'#d29b9b', '#57a7b1', '#5785b2', '#bdbdbd')この例では、4つの色で4つの異なる親グループに属するスライスを区別しています。

例:階層レベルによる色分け
If(Dimensionality() = 1, '#d29b9b',
If(Dimensionality() = 2, '#57a7b1',
If(Dimensionality() = 3, '#bdbdbd')))この例では、3つの色で3つの異なる階層レベルに属するスライスを区別しています。

例:メジャーによる色分け
If(Sum(CENSUS2010POP) >= 30000000, '#d29b9b',
If(Sum(CENSUS2010POP) >= 10000000, '#57a7b1',
'#bdbdbd'))ここでは3つの色が、3つの人口規模(3,000万人以上、1,000万人以上3,000万人未満、それ以外(1,000万人未満))を示しています。

例:別のメジャーによる色分け
If(Avg(RNATURALINC2011) <= 0, '#d29b9b',
If(Avg(RNATURALINC2011) < Avg(TOTAL{1<Country = {'U.S.'}>}RNATURALINC2011), '#bdbdbd',
If(Avg(RNATURALINC2011) >= Avg(TOTAL{1<Country = {'U.S.'}>}RNATURALINC2011), '#57a7b1')))ここでは3つの色が、3種類の自然増加率(0以下(赤)、0より大きく全体平均未満(灰色)、全体平均以上(緑))を示しています。スライスのサイズは別のメジャーである人口規模を表しています。

Inner Radius
チャートのInner radiusを調整して、中央の空きスペースのサイズを設定できます。
デフォルトでは、Inner radiusは0%です。中心部は親要素によって占められ、余分なスペースは残りません:

Inner radiusを設定するには、以下の手順を行います:
- プロパティパネルのAppearance > Presentationに移動します。
- Inner radiusオプションを使用します。

中央のスペースを使用して、Center contentを表示することができます。
Center Content
Inner radiusが0より大きい場合、チャートの中央に空きスペースができます。これを使用して追加情報を表示できます:
- プロパティパネルのAppearance > Presentationに移動します。
- Center content入力ボックスに数式を入力します。
Center contentは、文字列値または任意の文字列数式のいずれかとして設定できることに注意してください。また、以下のサンプルのようにHTMLを使用することも可能です:
'<b>POPULATION<br><span style=color:red><i>' &
Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M</i></span></b>
ラベル
ラベルは、チャートのスライスに関する情報を表示するテキストオブジェクトです。
デフォルトでは、各ラベルにスライスの次元とメジャーが表示されますが、テキストをカスタマイズすることができます:
- プロパティパネルのAppearance > Labelに移動します。
- Textドロップダウンメニューからラベル形式を選択します。
- Expression形式を選択した場合は、入力ボックスに数式を入力します。
以下のラベル形式が利用可能です:
| ラベル形式 | 説明 |
|---|---|
| Dimension | 各ラベルに、スライスに対応する次元を表示します。 |
| Dimension and measure | 各ラベルに、スライスに対応する次元とメジャーを表示します。 |
| Measure only outside | 階層の最後(最下位)レベルを表す外側のリングのラベルには、次元とメジャーが表示されます。内側のすべてのリングのラベルには次元のみが表示されます。 |
| Measure only inside | 内側のすべてのリングのラベルには、次元とメジャーが表示されます。階層の最後(最下位)レベルを表す外側のリングのラベルには次元のみが表示されます。 |
| Expression | ラベルにカスタム(ユーザー定義)テキストを表示します。 |
Dimension

Dimension and Measure

Measure only Outside

Measure only Inside

Expressionオプションを選択した場合、ラベルテキストを文字列値または任意の文字列数式のいずれかとして設定できることに注意してください。数式を使用することで、特に関心のある値を強調したり、可視化に含まれていない値を表示したり、計算結果を表示したりすることなどが可能になります。
以下の例では、階層の異なるレベルにあるスライスが異なるラベルを表示しています:
If(Dimensionality() = 1, Country & ' POPULATION',
If(Dimensionality() = 2,
Upper(RegionName) & ': ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M',
If(Dimensionality() = 3, StateCodes)))
ツールチップ
ツールチップは、ユーザーがチャートのスライスにホバーしたときに表示されるテキストボックスです。カスタムツールチップテキストを設定できます。
ツールチップテキストは、文字列値または任意の文字列数式のいずれかとして設定できることに注意してください。数式を使用することで、特に関心のある値を強調したり、可視化に含まれていない値を表示したり、計算結果を表示したりすることなどが可能になります。
また、ツールチップでHTMLを使用することも可能です。
ツールチップを有効または無効にするには、プロパティパネルのInteractivityに移動し、Tooltipsスライダーを切り替えます。
ツールチップテキストを設定するには、
- プロパティパネルのAppearance > Tooltipに移動します。
- Tooltip textスライダーを切り替えます。
- 入力ボックスに文字列値または文字列数式を入力します。
異なるスライスのツールチップに異なるテキストを表示できます。例えば、階層レベルに応じてテキストを変えることができます:
If(Dimensionality() = 1,
'<b>' & Upper(RegionName) & '</b><br><i>Region</i>' &
'<hr>States: ' & Count(State) & '<br>',
If(Dimensionality() = 2,
'<b>' & Upper(DivisionName) & '</b><br><i>Division</i>' &
'<hr>States: ' & Count(State) & '<br>',
If(Dimensionality() = 3,
'<b>' & Upper(State) & '</b><br><i>State</i><hr>'))) &
'Population: ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M'


その他の機能
インタラクティブ機能
デフォルトでは、選択、スナップショット、ツールチップのインタラクティブ機能が利用可能です。また、選択モードを設定したり、選択の代わりにドリルダウンを有効にしたりすることもできます。
これらの機能を無効または有効にするには、プロパティパネルのInteractivityに移動し、以下の機能を使用します:
- Selection および Dimension
- Enable drilldown
- Snapshots
- Tooltips
Selectionが有効な場合、Dimensionドロップダウンメニューを使用して選択モードを設定できます。以下のオプションが利用可能です:
| 選択モード | 説明 |
|---|---|
| すべて表示 | 選択された次元と、その上位および下位のすべてのレベルにある親および子を表示します。 |
| 選択済みおよび下位を表示 | 選択された次元と、その下位のすべてのレベルにある子を表示します。 |


Enable drilldownオプションは、Selectionが無効な場合にのみ利用可能です。仕組みは以下の通りです:子を持つ要素をクリックすると、その要素とその子にドリルダウンします。親要素をクリックすると、1レベル上にドリルアップします。

計算条件
AnyChartは計算条件をサポートしています。オブジェクトが表示されるために満たされるべき条件(真)を設定できます。条件が満たされない場合、カスタムメッセージが表示されます。
計算条件は、チャートやテーブルが非常に大きく、可視化の応答が遅くなる場合に役立ちます。計算条件は、例えばユーザーが選択を適用してデータを扱いやすいレベルまでフィルタリングするまで、オブジェクトを表示しないようにするといった使い方が可能です。
条件を追加するには、以下の手順を行います:
- プロパティパネルのAdd-ons > Data handlingに移動します。
- Calculation condition入力ボックスに数式を入力します。
- Displayed message入力ボックスに文字列値または文字列数式を入力します。
例えば、以下の数式を使用すると、ユーザーが選択した州が20未満の場合にのみチャートを表示するようにできます:
If(Count(State) < 20, 1, 0)州が多すぎる場合、AnyChartはこのメッセージを表示します:
'There are too many states (' & Count(State) & ').'

