サンバーストチャート

概要ドキュメントデモ動画バージョン履歴

サンバーストチャート ドキュメント

Table of contents

 

基本事項

ダウンロードとインストール

Qlik Sense Desktop

Qlik Sense DesktopにAnyChart Sunburst Extensionをインストールするには、以下の手順を行います:

  1. Qlik Sense用のAnyChart Sunburst Extensionをダウンロードします。
  2. アーカイブを解凍します。
  3. Windowsエクスプローラーを開き、Qlik SenseのExtensionsディレクトリに移動します:
    ..\Users\<UserName>\Documents\Qlik\Sense\Extensions
  4. anygantt-4x-sunburstフォルダをExtensionsディレクトリにコピーします。
  5. Qlik Sense Desktopを再起動します。
Qlik Sense Server

Qlik SenseサーバーにAnyChart Sunburst Extensionをインストールするには、

  1. Qlik Sense用のAnyChart Sunburst Extensionをダウンロードします。
  2. Qlik Management Console (QMC)を開きます: https://<QPS server name>/qmc
  3. QMCスタートページまたはStartドロップダウンメニューからExtensionsを選択します。
  4. アクションバーのImportをクリックします。
  5. ダイアログで、ダウンロードしたアーカイブを選択します。パスワード欄は空欄のままにします。
  6. ファイルエクスプローラーウィンドウでOpenをクリックします。
  7. Importをクリックします。
Qlik Sense Cloud

Qlik Sense CloudにAnyChart Sunburst Extensionをインストールするには、以下の手順を行います:

  1. Qlik Sense Cloud用のAnyChart Sunburst Extensionをダウンロードします。
  2. Management Consoleにアクセスします:
    • テナントのアドレスに /console を追加します: https://<your tenant address>/console
    • または、ハブのユーザープロファイル下にあるナビゲーションリンクAdministrationを使用します。
  1. Extensionsページに移動し、Addをクリックします。
  2. ダイアログで、ダウンロードしたアーカイブを選択します。
  3. Addをクリックします。
  4. Management Consoleで、Content Security Policyセクションに移動し、Addをクリックします。
  5. ダイアログで、Content Security Policyに名前(例:AnyChart)を付けます。
  6. オリジンサーバーのアドレスを入力します: qlik.anychart.com
  7. 以下のディレクティブを選択します:
    • connect-src
    • font-src
    • img-src
    • script-src
    • style-src
  1. Addをクリックします。

概要

Sunburst chartは、放射状ツリーマップまたは多階層パイチャートとも呼ばれ、階層的に組織化されたデータを、スライスに分割された一連の入れ子状のリングとして表示する可視化手法です。スライスのサイズはそれぞれの値を表します。

Sunburst chartの追加方法や、使用する次元とメジャーについては、Quick StartおよびDimensions and Measuresをご覧になり、確認してください。

チャートの外観を設定できます。数式による色分けInner radiusの設定、Center contentの追加、ラベルツールチップの調整が可能です。

また、以下のオプションも利用可能です:インタラクティブ機能計算条件

An AnyChart sunburst chart with three levels of the hierarchy and the center content enabled

クイックスタート

このクイックチュートリアルでは、基本的なSunburst chartの作成方法を説明します。

まず、シートに空のチャートを追加します:

  1. アセットパネルのCustom objects > AnyChartに移動します。
  2. 空のAnyChart Sunburstチャートをシートにドラッグします。

次に、2つの次元を追加します:

  1. プロパティパネルのDimensionsに移動します。
  2. Add dimensionをクリックし、次元を選択します。
  3. Add dimensionをクリックし、次元を選択します。

最後に、スライスのサイズを計算するために使用されるメジャーを追加します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。

フィールドから次元やメジャーを作成したり、空のチャート上のボタンをクリックして追加したりすることもできる点に注意してください。

A basic sunburst chart built with AnyChart Sunburst for Qlik Sense Extension

次元とメジャー

次元

次元を追加するには、以下の手順を行います:

  1. プロパティパネルのDimensionsに移動します。
  2. Add dimensionをクリックし、次元を選択します。

Sunburst chartには少なくとも1つの次元が必要です。ただし、次元が1つだけの場合は、通常の(単一層の)パイチャートのように見えます。多階層のチャートを作成するには、2つ以上の次元を追加してください。

次元は上位レベルから下位レベルへと正しい順序で並べる必要があることに注意してください。プロパティパネルでドラッグして調整します。

AnyChart Sunburstは、1つまたは複数のルートを持つ階層データを表示できます:

A sunburst chart displaying hierarchical data with one root

A sunburst chart displaying hierarchical data with several roots

チャートの各スライスには、その次元とメジャーを表示するテキストラベルがあります。必要に応じて、ラベルに異なるテキストを表示することもできます。例えば、カテゴリの数値識別子を次元として使用しながら、カテゴリの名前をラベルとして表示することができます。詳細はラベルセクションをご覧ください。

メジャー

メジャーを追加するには、以下の手順を行います:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。

メジャーはスライスのサイズを計算するために使用されます。可視化においては、任意の集計方法を用いたメジャーを使用できるほか、カスタム数式としてメジャーを設定することも可能です。例えば、カスタム数式を使用して、小さすぎるスライスを非表示にすることができます。

外観

数式による色分け

チャートのスライスはデフォルトのパレットで色付けされています。あるいは、数式によって色付けすることもできます。

数式による色分けでは、ユーザー定義の数式を使用して色を設定します。数式による色分けを使用すると、使用する色と、それらをどの値に適用するかを両方定義できるため、可視化における色の使用方法をより詳細に制御できます。例えば、特に関心のある値を強調したり、異なる値の範囲間で値を区別したりすることができます。また、数式による色分けを使用して、可視化に含まれていない値に基づいて色を付けることも可能です。

数式によってスライスを色分けするには、以下の手順を行います:

  1. プロパティパネルのAppearance > Colorsに移動します。
  2. Colorsスライダーを切り替えます。
  3. 最初のドロップダウンメニューからBy expressionを選択します。
  4. 入力ボックスに数式を入力します。

例:親による色分け

Pick(Match(RegionName, 
'South', 'West', 'Midwest', 'Northeast'), 
'#d29b9b', '#57a7b1', '#5785b2', '#bdbdbd')

この例では、4つの色で4つの異なる親グループに属するスライスを区別しています。

A sunburst chart with the slices colored by expression (by parent group)

例:階層レベルによる色分け

If(Dimensionality() = 1, '#d29b9b', 
If(Dimensionality() = 2, '#57a7b1',
If(Dimensionality() = 3, '#bdbdbd')))

この例では、3つの色で3つの異なる階層レベルに属するスライスを区別しています。

A sunburst chart with the slices colored by expression (by hierarchy level)

例:メジャーによる色分け

If(Sum(CENSUS2010POP) >= 30000000, '#d29b9b', 
If(Sum(CENSUS2010POP) >= 10000000, '#57a7b1',
'#bdbdbd'))

ここでは3つの色が、3つの人口規模(3,000万人以上、1,000万人以上3,000万人未満、それ以外(1,000万人未満))を示しています。

A sunburst chart with the slices colored by expression (by measure)

例:別のメジャーによる色分け

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より大きく全体平均未満(灰色)、全体平均以上(緑))を示しています。スライスのサイズは別のメジャーである人口規模を表しています。

A sunburst chart with the slices colored by expression (by an alternative measure not included within the visualization)

Inner Radius

チャートのInner radiusを調整して、中央の空きスペースのサイズを設定できます。

デフォルトでは、Inner radiusは0%です。中心部は親要素によって占められ、余分なスペースは残りません:

A sunburst chart with the inner radius set to 0

Inner radiusを設定するには、以下の手順を行います:

  1. プロパティパネルのAppearance > Presentationに移動します。
  2. Inner radiusオプションを使用します。

A sunburst chart with the inner radius set to a positive value

中央のスペースを使用して、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>

A sunburst chart with the center content enabled and formatted with the help of HTML

ラベル

ラベルは、チャートのスライスに関する情報を表示するテキストオブジェクトです。

デフォルトでは、各ラベルにスライスの次元とメジャーが表示されますが、テキストをカスタマイズすることができます:

  1. プロパティパネルのAppearance > Labelに移動します。
  2. Textドロップダウンメニューからラベル形式を選択します。
  3. Expression形式を選択した場合は、入力ボックスに数式を入力します。

以下のラベル形式が利用可能です:

ラベル形式説明
Dimension各ラベルに、スライスに対応する次元を表示します。
Dimension and measure各ラベルに、スライスに対応する次元とメジャーを表示します。
Measure only outside階層の最後(最下位)レベルを表す外側のリングのラベルには、次元とメジャーが表示されます。内側のすべてのリングのラベルには次元のみが表示されます。
Measure only inside内側のすべてのリングのラベルには、次元とメジャーが表示されます。階層の最後(最下位)レベルを表す外側のリングのラベルには次元のみが表示されます。
Expressionラベルにカスタム(ユーザー定義)テキストを表示します。

Dimension

A sunburst chart with the labels displaying dimensions

Dimension and Measure

A sunburst chart with the labels displaying dimensions and measures

Measure only Outside

A sunburst chart with the labels displaying dimensions and measures in the outside ring and dimensions in all the inside rings

Measure only Inside

A sunburst chart with the labels displaying dimensions in the outside ring and dimensions and measures in all the inside rings

Expressionオプションを選択した場合、ラベルテキストを文字列値または任意の文字列数式のいずれかとして設定できることに注意してください。数式を使用することで、特に関心のある値を強調したり、可視化に含まれていない値を表示したり、計算結果を表示したりすることなどが可能になります。

以下の例では、階層の異なるレベルにあるスライスが異なるラベルを表示しています:

If(Dimensionality() = 1, Country & ' POPULATION',

If(Dimensionality() = 2,
Upper(RegionName) & ': ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M',

If(Dimensionality() = 3, StateCodes)))

A sunburst chart with the labels displaying different texts at different hierarchy levels

ツールチップ

ツールチップは、ユーザーがチャートのスライスにホバーしたときに表示されるテキストボックスです。カスタムツールチップテキストを設定できます。

ツールチップテキストは、文字列値または任意の文字列数式のいずれかとして設定できることに注意してください。数式を使用することで、特に関心のある値を強調したり、可視化に含まれていない値を表示したり、計算結果を表示したりすることなどが可能になります。

また、ツールチップでHTMLを使用することも可能です。

ツールチップを有効または無効にするには、プロパティパネルのInteractivityに移動し、Tooltipsスライダーを切り替えます。

ツールチップテキストを設定するには、

  1. プロパティパネルのAppearance > Tooltipに移動します。
  2. Tooltip textスライダーを切り替えます。
  3. 入力ボックスに文字列値または文字列数式を入力します。

異なるスライスのツールチップに異なるテキストを表示できます。例えば、階層レベルに応じてテキストを変えることができます:

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'

A sunburst chart with a tooltip displaying a custom text for a slice at the first hierarchy level

A sunburst chart with a tooltip displaying a custom text for a slice at the second hierarchy level

A sunburst chart with a tooltip displaying a custom text for a slice at the last hierarchy level

その他の機能

インタラクティブ機能

デフォルトでは、選択、スナップショット、ツールチップのインタラクティブ機能が利用可能です。また、選択モードを設定したり、選択の代わりにドリルダウンを有効にしたりすることもできます。

これらの機能を無効または有効にするには、プロパティパネルのInteractivityに移動し、以下の機能を使用します:

  • Selection および Dimension
  • Enable drilldown
  • Snapshots
  • Tooltips

Selectionが有効な場合、Dimensionドロップダウンメニューを使用して選択モードを設定できます。以下のオプションが利用可能です:

選択モード説明
すべて表示選択された次元と、その上位および下位のすべてのレベルにある親および子を表示します。
選択済みおよび下位を表示選択された次元と、その下位のすべてのレベルにある子を表示します。

Two sunburst charts with different selection modes enabled, a dimension at the second level of the hierarchy selected

Two sunburst charts with different selection modes enabled, a dimension at the third level of the hierarchy selected

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

A sunburst chart with drilldown enabled

計算条件

AnyChartは計算条件をサポートしています。オブジェクトが表示されるために満たされるべき条件(真)を設定できます。条件が満たされない場合、カスタムメッセージが表示されます。

計算条件は、チャートやテーブルが非常に大きく、可視化の応答が遅くなる場合に役立ちます。計算条件は、例えばユーザーが選択を適用してデータを扱いやすいレベルまでフィルタリングするまで、オブジェクトを表示しないようにするといった使い方が可能です。

条件を追加するには、以下の手順を行います:

  1. プロパティパネルのAdd-ons > Data handlingに移動します。
  2. Calculation condition入力ボックスに数式を入力します。
  3. Displayed message入力ボックスに文字列値または文字列数式を入力します。

例えば、以下の数式を使用すると、ユーザーが選択した州が20未満の場合にのみチャートを表示するようにできます:

If(Count(State) < 20, 1, 0)

州が多すぎる場合、AnyChartはこのメッセージを表示します:

'There are too many states (' & Count(State) & ').'

A sunburst chart with a calculation condition


AnyChart のその他の拡張機能
Spreadsheets分解ツリーブルズアイチャートサーキュラーゲージコンボチャートプロジェクトガントリソースガントタイムラインクラシックウォーターフォールアドバンストウォーターフォール
サンバーストチャート 拡張機能をダウンロード
ダウンロード
このページを共有
LinkedInFacebookXEmail
---