基本事項

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

Qlik Sense Desktop

Qlik Sense DesktopにAnyChart Bullseye Extensionをインストールするには、以下の手順を行ってください：

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

Qlik Sense Server

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

1. Qlik Sense用 AnyChart Bullseye 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 Bullseye Extensionをインストールするには、以下の手順を行ってください：

1. Qlik Sense Cloud用 AnyChart Bullseye 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 をクリックします。

概要

Bullseye Chart は、順序カテゴリまたは数値の範囲を表す一連の同心円状のリングに、マーカーとしてデータポイントを分散させて表示するツールです。

チャートの外観を設定できます。設定可能な項目には、色、マーカー、凡例、軸、グリッドの調整、start angle と inner radius の設定、ラベルの有効化と設定、ツールチップのテキスト設定があります。

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

クイックスタート

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

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

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

次に、3つの ディメンション を追加します。1番目は名目カテゴリ（データポイントのグループ）、2番目は順序カテゴリ（リングの名前）、3番目はポイントのIDを表します：

1. プロパティパネルの Dimensions に移動します。
2. Add dimension をクリックし、ディメンションを選択します。
3. Add dimension をクリックし、ディメンションを選択します。
4. Add dimension をクリックし、ディメンションを選択します。

あるいは、データ構造の必要性に応じて、2つのディメンションと1つの メジャー を追加することも可能です。

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

ディメンションとメジャー

ディメンション

ディメンションを追加するには、以下の手順を行います：

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

データ構造に応じて、2つまたは3つのディメンションを追加できます。

メジャー

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

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

データ構造に応じて、1つのメジャーを追加するか、メジャーなしでチャートを作成できます。

データ構造

Bullseye Chart は、2つの異なるデータ設定方法（データ構造）をサポートしています。データに最適なものを選択してください。

3 Dimensions

Y軸に順序カテゴリ（リングの名前）を表示したい場合は、3つの ディメンション を追加します：

• 1番目のディメンション（Categories）は、X軸に表示される名目カテゴリの名前を表します。
• 2番目のディメンション（Rings）は、Y軸に表示されるリングの名前を表します。
• 3番目のディメンション（ID）は、データポイントのIDを表します。

Y軸上のカテゴリの順序は、2番目のディメンションのソート設定によって定義されることに注意してください。

2 Dimensions + 1 Measure

Y軸に数値を表示したい場合は、2つの ディメンション と1つの メジャー を追加します：

• 1番目のディメンション（Categories）は、X軸に表示される名目カテゴリの名前を表します。
• 2番目のディメンション（ID）は、データポイントのIDを表します。
• メジャー（Rings）は、Y軸に表示される数値を表します。

Y軸に数値を表示する場合、scale type（linear または logarithmic）を設定できる点に注意してください。

外観

色

AnyChart Bullseye は、チャートの マーカー を色付けするためのさまざまな方法をサポートしています。

カラーモードの1つ（By dimension）は、凡例にも影響します。また、モードに応じて、凡例が利用可能かどうかが決まります。

カラーモードを選択するには、

1. プロパティパネルの Appearance > Colors and legend に移動します。
2. Colors スライダーを切り替えます。
3. ドロップダウンメニューからカラーモードを選択します。

以下の表は、各モードの違いと、それぞれで利用可能な設定を説明したものです：

Single Color

すべての マーカー に適用される1つの色を設定できます：

1. プロパティパネルの Appearance > Colors and legend に移動します。
2. Colors スライダーを切り替えます。
3. ドロップダウンメニューから Single color を選択します。
4. Color と Opacity オプションを使用します。

このモードでは、凡例 は利用できません。

Color by Dimension

組み込みのパレットを使用して、任意のディメンション（データ構造 に応じて2つまたは3つのディメンションがあります）で マーカー を色付けできます：

1. プロパティパネルの Appearance > Colors and legend に移動します。
2. Colors スライダーを切り替えます。
3. ドロップダウンメニューから By dimension を選択します。
4. Select dimension ドロップダウンメニューからディメンションを選択します。
5. パレットを選択し、Reverse colors と Opacity オプションを使用します。

凡例 は自動的に生成され、色付けされます。ただし、必要に応じていつでも無効化したりカスタマイズしたりできます。

このスクリーンショットでは、マーカーと凡例が1番目のディメンションによって色付けされています：

ここでは、マーカーと凡例が2番目のディメンションによって色付けされています：

Color by Expression

チャートの データ構造 にメジャーが含まれている場合、数式によってその マーカー を色付けできます：

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

さらに、マーカーの形状も 条件付きで設定 できます。凡例 は利用可能ですが、すべての項目を手動で追加して色付けする必要があります。

数式による色付けは、ユーザー定義の数式を使用して色を設定します。数式で色付けする場合、使用する色とそれを使用する値の両方を定義できるため、視覚化での色の使用方法をより詳細に制御できます。例えば、特に関心のある値を強調したり、異なる値の範囲内の値を区別したりすることができます。また、数式による色付けを使用して、代替のメジャーやディメンションでマーカーを色付けするなど、視覚化に含まれていない値で視覚化を色付けすることもできます。

例

数式による色付けで何ができるかを示すいくつかの例を以下に挙げます。数式は凡例には影響しないため、これらの例では凡例は手動で設定されています。

例：メジャーによる色付け

If(Price < 1, 'green',
If(Price < 100, 'gold',
If(Price < 1000, 'orange', 
If(Price >= 1000, 'red'))))

この例では、4つの色が Y軸 に表示されているメジャー（価格）の4つの範囲を表しています。

例：代替メジャーによる色付け

If(EstimatedCompletionTime < 4, 'red',
If(EstimatedCompletionTime < 8, 'orange',
If(EstimatedCompletionTime >= 8, 'green')))

この例では、3つの色が推定完了時間の3つの範囲を表しています。しかし、Y軸 には別のメジャーである価格が表示されています。

例：代替ディメンションによる色付け

If(Type = 'Antibiotic', 'green',
If(Type = 'Antiviral', 'orange',
If(Type = 'Analgesic', 'blue',
If(Type = 'Anticancer', 'red'))))

この例では、4つの色が4つの異なるグループ（薬の種類）に属するマーカーを区別しています。X軸 には別のグループ（国）が表示されています。

マーカー

種類とサイズ

マーカーを設定するには、プロパティパネルの Appearance > Colors and legend に移動し、Colors スライダーを切り替えて以下の手順を行います：

• サイズを設定するには、Size オプションを使用します。
• 種類を設定するには、Marker shape スライダーを切り替え、下のドロップダウンメニューから組み込みのアイコン（形状）を選択します。
• カスタム画像をマーカーとして設定するには、Image URL 入力ボックスに画像へのリンクを入力します。

以下は組み込みアイコンの1つです：

数式による種類の設定

異なるマーカーに異なる組み込みアイコンを割り当てるユーザー定義の数式を追加できます。このオプションは、マーカーが 数式によって色付け されている場合に利用可能です。使用するには、

1. プロパティパネルの Appearance > Colors and legend に移動します。
2. Marker shape スライダーを切り替えます。
3. Marker shape expression 入力ボックスに数式を入力します。

数式の中では、アイコンをその名前で参照する必要があります：

'circle'

'cross'

'diamond'

'diagonal-cross'

'square'

'star4'

'line'

'star5'

'trapezium'

'star6'

'pentagon'

'star7'

'arrowhead'

'star10'

'triangle-down'

'arrow-down'

'triangle-up'

'arrow-up'

'triangle-left'

'arrow-left'

'triangle-right'

'arrow-right'

以下の例では、色と形状が Y軸 に表示されているメジャー（価格）の異なる範囲を表しています。形状を設定するために以下の数式が使用されています：

If(Price < 1, 'triangle-up',
If(Price < 100, 'diamond',
If(Price < 1000, 'cross', 
If(Price >= 1000, 'star4'))))

形状を定義する数式は、色を定義する数式と同様である必要はありません。例えば、ここでは色は Y軸 に表示されているメジャー（価格）を表していますが、形状は X軸 に表示されているディメンション（国）を表しています：

If(Country = 'China', 'triangle-up',
If(Country = 'Germany', 'cross',
If(Country = 'USA', 'star4')))

凡例

チャートが ディメンションによって色付け されている場合、凡例は自動的に生成され、色付けされます。ただし、無効にしたりカスタマイズしたりすることも可能です。

チャートが 数式によって色付け されている場合、凡例は利用可能ですが、すべての項目を手動で追加して色付けする必要があります。

凡例を設定するには、プロパティパネルの Appearance > Colors and legend に移動し、以下の手順を行います：

• 有効または無効にするには、Legend スライダーを切り替えます。
• 位置を設定するには、Position ドロップダウンメニューから Top、Right、Bottom、または Left を選択します。
• 配置を設定するには、Alignment ドロップダウンメニューから利用可能なオプションの1つを選択します。
• タイトルを設定するには、Title に移動し、Title 入力ボックスにテキストを入力します。
• タイトルのフォントを設定するには、Style、Color、Size、Family、および Shadow オプションを使用します。

新しい凡例項目を追加するには、

1. Items に移動し、Items スライダー（存在する場合）を切り替えます。
2. Add legend item をクリックします。
3. Label 入力ボックスに項目の名前を入力します。
4. 色を設定するには、Color オプションを使用します。

カスタム項目は、自動生成された項目を置き換えます。

このスクリーンショットでは、チャートは2番目のディメンションによって色付けされており、自動生成された凡例が表示され、その位置とタイトルがカスタマイズされています：

ここでは、チャートは数式によって色付けされており、凡例にはカスタム項目が表示され、その位置とタイトルがカスタマイズされています：

軸

X軸

X軸には、名目カテゴリ（すべての データ構造 における最初のディメンション）の名前が表示されます。

X軸を設定するには、プロパティパネルの Appearance > X-axis に移動し、以下の手順を行います：

• ラベルを無効または有効にするには、Labels スライダーを切り替えます。
• 線を設定するには、Line に移動し、Line、Color、および Style オプションを使用します。
• Xグリッドを設定するには、Grid スライダーを切り替え、下のオプションを使用します。

Y軸

データ構造に応じて、Y軸には順序カテゴリ（リングの名前）または数値（メジャーに対応）のいずれかが表示されます。

Y軸の位置は、チャートの start angle の影響を受けます。

Y軸を設定するには、プロパティパネルの Appearance > X-axis に移動し、以下の手順を行います：

• ラベルを無効または有効にするには、Labels スライダーを切り替えます。
• 線を設定するには、Line に移動し、Line、Color、および Style オプションを使用します。
• Yグリッドを設定するには、Grid スライダーを切り替え、下のオプションを使用します。

また、Yスケールの種類を設定するには、

1. Scale type に移動します。
2. ドロップダウンメニューから Linear または Logarithmic を選択します。

このオプションは、Y軸に数値が表示されている場合にのみ利用可能であることに注意してください。値の範囲が非常に広い場合は、Logarithmic（対数）スケールタイプを使用する必要があるかもしれません。

グリッド

Bullseye Chart には2つのグリッドがあります：

• Xグリッドは X軸 と交差し、チャートをセクターに分割します。
• Yグリッドは Y軸 と交差し、チャートをリングに分割します。

グリッドを設定するには、プロパティパネルの Appearance > X-axis または Y-axis に移動し、Grid スライダーを切り替えて以下の手順を行います：

• 線を設定するには、Line に移動し、Line、Color、および Style オプションを使用します。
• 塗りつぶしを設定するには、下に移動してドロップダウンメニューから塗りつぶしの種類を選択し、下の利用可能なオプションを使用します。

XおよびYグリッドは、異なる塗りつぶしスキームと設定をサポートしています：

異なるグリッドに異なるスキームを適用することで、塗りつぶしの種類を組み合わせることができます。以下のスクリーンショットは、ほとんどの塗りつぶしとその組み合わせを示しています：

Start Angle

チャートの開始角度を調整できます。これはチャートの向きと Y軸 の位置に影響します：

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

デフォルトでは、開始角度は 0° です。

Inner Radius

チャートの内半径（inner radius）を調整して、中央の空きスペースのサイズを設定できます：

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

デフォルトでは、内半径は 0% です。中央は内側のリングで占められ、余分なスペースは残りません。

ラベル

ラベルは マーカー にリンクされたテキストオブジェクトで、それらが表すデータポイントに関する追加情報を表示します。

デフォルトでは、チャートにラベルは表示されませんが、有効化して設定することができます。プロパティパネルの Appearance > Labels に移動し、以下の手順を行います：

• 有効または無効にするには、Labels スライダーを切り替えます。
• テキストを設定するには、Text スライダーを切り替え、入力ボックスに文字列値または文字列数式を入力します。
• 背景を設定するには、Background スライダーを切り替え、Fill、Opacity、Corner type、Border type、および Border radius オプションを使用します。
• フォントを設定するには、Font スライダーを切り替え、Style、Color、Size、Family、および Shadow オプションを使用します。
• 文字数制限を設定するには、Character limit スライダーを切り替え、入力ボックスに数値を入力します。

以下の例では、ラベルに次の数式が表示されています：

If(Price >= 1000, Drug & Chr(10) & '$' & Round(Price), ' ')

ツールチップ

ツールチップは、ユーザーが マーカー にカーソルを合わせたときに表示されるテキストボックスです。カスタムのツールチップテキストを設定できます。

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

また、ツールチップでは HTML を使用できます。

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

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

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

以下は、ツールチップテキストを設定するための数式の例です：

'<b>' & Upper(Drug) & '</b>'&
'<br><i>' & Type & '</i>' &
'<hr>Stage: ' & Phase &
'<br>Estimated Price: $' & Price

その他の機能

インタラクティブ機能

デフォルトでは、選択（selection）、スナップショット（snapshots）、および ツールチップ のインタラクティブ機能が利用可能です。これらを無効または有効にするには、プロパティパネルの Interactivity に移動し、以下のスライダーを切り替えます：

• Selection
• Snapshots
• Tooltips

計算条件

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

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

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

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

例えば、以下の数式は、ユーザーが選択したデータ項目が10個未満の場合にのみチャートを表示するようにします：

If(Count(Drug) < 10, 1, 0)

項目が多すぎる場合、AnyChart は次のメッセージを表示します：

'There are too many items (' & Count(Drug) & ').'

読み込み中...