カスタムチャート

はじめに

［管理者設定］オプションまたはAnalyzerで以下の言語やファイル形式を使用して、カスタムのチャートをDomoインスタンスに追加することができます。

SVG（スケーラブルベクターグラフィックス）：これは、2次元ベースのベクターグラフィックス記述するためのXMLベースのマークアップ言語です。
KML（キーホールマークアップ言語）：これは、Google Earthなどのアースブラウザーで地理データを表示するためのマークアップ言語です。
GeoJSON：これは、単純な地理的特徴と非空間属性を表現するためのオープン規格のファイル形式です。
TopoJSON：これは、GeoJSONを拡張したファイル形式で、地理空間トポロジーをエンコードすることができます。通常は、ファイルサイズが小さくなります。
Shape：これは、ESRIの標準ファイル形式です。地理空間ベクトルデータが含まれています（Google EarthをインポートしてKMLとしてエクスポートします）。

チャートを追加しておくと、追加したチャートをユーザーがAnalyzerのチャートピッカーの [カスタムチャート] で選択できます。これを使うと、Domoでデフォルトでは用意されていないが、お客様のビジネスに関連するような可視化データを作成できます。チャートの複雑さに応じて、SVGをそのまま使えることもあれば、かなり変更が必要になることもあります。多くの場合、大規模な変更には実践的なXMLの知識が必要になります。

カスタム地域ツールを使用して、下位地域まで含んだ新しいカスタム地域の列を持つDataSetをアップロードすることもできます。これは独自のSVGファイルを構築するほど堅牢ではありませんが、XMLの知識は必要ありません。詳細は、「地域区分のあるマップを作成する」を参照してください。

注記：カスタムチャートをDomoインスタンスに追加できるのは、デフォルトの「管理者」セキュリティロールが設定されているユーザーと、［すべてのカードとページを管理］が有効になっているカスタムロールが設定されているユーザーだけです。デフォルトのセキュリティ権限の詳細については、「デフォルトのセキュリティ権限ロールリファレンス」を参照してください。カスタムロールの詳細については「カスタムロールを管理する」を参照してください。

簡単な例を挙げましょう。香港の人形工場のエグゼクティブであるユーザーであるJJが、香港全区の新しい人形シリーズの売上を示すカードを作成しようと考えているとします。事前インストールでDomoに用意されているマップ一式では、このようなカードを作成できません。ところが、Domoのカスタムチャート機能を使うと、オンラインで香港のSVGマップをダウンロードし、[管理者設定] またはAnalyzerを使ってマップをDomoに追加するだけで、JJは必要なカードを作成できます。この結果、カード作成権限を持つユーザー全員が、JJと同じようにこのマップを使えるようになります。売上データの入ったDataSetをアップロードしてからAnalyzerを開き、マップタイプ [香港] を選択し、DataSetの列を差し込むことで、JJは他のマップのカードを作成するときと同じ要領でカードを作成します。この手順で以下のマップができあがります。

もう少し複雑な例を挙げましょう。ユーザーRodrigoは米国内で多数のタイムシェア物件を管理しているとします。これらの物件は、5つの別々の地域（西部、南西部、中西部、南東部、北東部）に分散されています。Rodrigoは、各地域の収益を一目で把握できるようにしたいと考えています。前の例と同じように、Domoには、米国内の地域のマップは事前インストールされていません（事前インストールされている場合も、Rodrigoの会社の地域グループとは若干異なる方法で州がグループ化されている可能性があります）。このケースでは、地域のグループ化をカスタマイズする必要があるため、Rodrigoは、米国のSVGマップにグループ化を組み込むようにカスタマイズすることが必要です。Rodrigoには幸いXMLの基礎知識があるため、マップを適宜分割するために必要なグループ化タグを比較的簡単に追加できます。

比較的簡単な例を2つ挙げて、Domoユーザーがカスタムチャートを実装する方法を紹介します。より複雑な例としては、地理的なマップ以外のマップなどがあります。たとえば、大学のキャンパスや

飛行機の座席表などです。

特殊な例としては、車のバンパーなどの組立説明図などがあります。

カスタムチャートを使用すれば、さまざまなアイデアを形にすることができます。以上の3例と同等のチャートは非常に複雑で、作成するには高度なXMLの知識が必要です。現時点ではサポートされていないXMLタグがあることにも注意してください。該当するタグのリストは、この記事の後半に掲載します。

重要：インポートして変換できるSVGファイルの最大サイズは6MBです。

ビデオ - カスタムのマップとチャート

概要的な手順

カスタムチャートをDomo に追加し、カードを作成する一般的プロセスは次のとおりです。

追加するチャートを取得します。
必要に応じてXMLを編集します。
[管理者設定] またはAnalyzerでDomoにチャートを追加します。
Analyzerでチャートカードを作成します。

SVGチャートを取得する

ほとんどのケースでは、a）インターネットからSVGチャートをダウンロードするか、b）自作するかのどちらかの方法で、Domoで使うSVGチャートを取得できます。

Domoで未対応の国のマップをインストールするには、http://www.amcharts.com/svg-maps/ や https://simplemaps.com/resources/svg-maps などからダウンロードできます。こうしたウェブサイトはたくさんあります。これらのサイトは、仏領ギアナやアルバなど、海外の領地も掲載しています。このようなマップをダウンロードしたら、そのマップをそのままDomoにアップロードできます。XMLを編集する必要はありません（マップ内を分割しない場合）。

SVGチャートを自作する場合は、Adobe IllustratorやInkscapeなどのベクター描画ツールを使うことができます。こうしたツールは多数あります。こうしたアプリケーションまたはその他のアプリケーションの詳細については、それぞれのドキュメントを参照してください。

チャートに合わせてXMLを編集する

SVGが複雑な地域マップでカスタマイズを必要とする場合、XMLを編集して必要な変更を加える必要があります。目的とするカスタマイズの内容とチャートの複雑さに応じ、この編集は最小限で済むこともあれば、膨大となることもあります。DomoにSVGチャートをアップロードしようとしてエラーが発生することもありますが、通常、その原因はXML内でサポート対象外のタグを使っていることにあります。そのようなケースでは、問題となるタグを削除するか、サポート対象のタグで代替する必要があります。

このセクションでは、DomoのSVG変換プログラムがサポートするタグと現時点ではサポートしていないタグを紹介します。

サポート対象のXMLタグ

サポート対象の図形タグ

以下の図形タグがサポート対象です。

パス（円弧の回転を除くすべてのコマンドがサポート対象）
長方形
円
楕円
折れ線
ポリライン
多角形

このうち折れ線とポリラインを除くすべてのデータを組み込むことができます。

サポート対象のスタイルタグ

以下のスタイルタグは、スタイル属性内またはSVGにエンベッドしたCSSにおけるタグとともに、サポートされています（これらのタグはデータ組み込み不可）。

塗りつぶし
ストローク
ストローク幅
塗りつぶしの不透明度
ストロークの不透明度
不透明度

サポート対象の変換

制限付きでDomoがサポートする変換：

matrix()
translate()
scale()
rotate()

テキストタグ

テキストタグは制限付きでサポートしています。フォントは設定できませんが、指定された文字色と文字サイズについては、Domoが極力再現します。

rotate()はテキストタグでサポートしています。matrix()変換を使うと、テキストタグを回転できます。

サポート対象外のXMLタグ

DomoのSVG変換プログラムで現在サポート対象外：

グラデーションペイント
パターン
フィルター
その他の複雑な塗りつぶし
エンベッドされた画像

SVGファイルの構造について

次のXMLコードは、コロンビアの国内マップに相当するSVGファイルから取得したものです。このコードはファイルの基本フォーマットを示しています。余分な要素を削除してシンプルに記載してあり、ほとんどのパスデータ要素は縮約表示（楕円表示）になっています。このファイルで使われているタグはすべてDomoのサポート対象です。

パスタグには常にdサブタグを組み込みます。これで特定地域のパスデータ要素を示しつつ、他のサブタグで地域の一意のIDまたは名前を1つまたは複数指定します。上の例では、各地域パスにIDサブタグと名前サブタグを組み込みます。これらのタグはDataSetの [地域] 列にも対応しているので、重要です。Analyzerでマップを作成する場合は、マップのプレビューの上にある [州名] フィールドに地域列をドラッグします。（列の適用の詳細については「DataSetの列をチャートに適用する」を参照）。この例では、以上で参照した列（地域のIDまたは名前の付いた列）を少なくとも一つDataSetに組み込んで、SVGマップと一致させます。

注記：データ名の属性が見つかった場合、それが目標のデータの名前となります。この属性が付与されていない場合、次に優先度が高いのは名前です。どちらも指定されていない場合は、IDが使われます。

DataSetで使う可能性のある名前をほかにも検討する必要がある場合、適宜、他のサブタグも追加します。たとえば、ほとんどの国のマップのDataSetでは、ISO 3166地域コードが組み込んであります。そのため上の「コロンビア」の例では、XMLが3つ目のサブタグと各地域のコードを含む場合があります。このタグはシンプルに「コード」と呼びます。[name="Amazonas"] タグの下に「code="01"」（アマゾナス州のISO 3166コードが「01」であるため）などを追加し、他地域についても同じ要領で記述を続けます。

次の例は、先ほどのコード例に対応する列を備えたシンプルなDataSetです（先ほど説明されたとおり [ISO 3166] 列を追加）。

マップ内の地域を結合して大きい地域を設定する場合は、SVGファイルに組み込んだタグをすべて、適切なグループにグループ化し、それぞれのグループをタグとタグで囲みます。ファイル内のタグにはID属性または名前属性、あるいはその両方を組み込む必要があります。

次のコード例は、グループ化を組み込んだSVGファイルの一部を示しています。このコードは米国を多種多数のグループに分割したマップに使います。スクリーンショットは、これらのグループのうち「西部」と「南西部」の2つを示しています。

すべてのコードサンプルにアクセスして米国地域マップを作成するには、こちら（usa_regions.svg）を参照してください。各州に対応するタグをカットアンドペーストして適切なグループに編成し直すだけで、地域を自由にカスタマイズできます。たとえばこのファイルでは、オクラホマ州を「南西部」グループに配置していますが、この州を「中西部」に移動するには、「中西部」のIDを持つグループにコピーアンドペーストするだけです。必要に応じてグループの追加や削除もできます。

Domoにカスタムチャートを追加する

Domoインスタンスに追加するチャートを取得し、対応するXMLを適宜編集したら、次はそれをDomoにアップロードしていきます。この操作は、以下のいずれかの場所で実行できます。

[管理者設定]、[カンパニー設定]、[カスタムチャート] の順に選択する。［カンパニー設定］にアクセスするには、デフォルトの「管理者」セキュリティロールが設定されているか、［すべてのカンパニー設定を管理］オプションが有効になっているカスタムロールが設定されている必要があります。
Analyzerのチャートピッカーで [カスタムチャート] を選択し、ペイン下部の [+] ボタンをクリックする。このボタンが表示されるのは、「管理者」セキュリティロールが設定されているユーザーと、［すべてのカードとページを管理］オプションが有効になっているカスタムロールが設定されているユーザーの場合だけです。

デフォルトのセキュリティプロフィールの詳細については「デフォルトのセキュリティロールリファレンス」を参照してください。カスタムロールの詳細については「カスタムロールを管理する」を参照してください。

[管理者設定] でカスタムチャートをDomoに追加するには

［その他］>［管理者設定］>［カンパニー設定］>［カスタムチャート］に移動します。
[チャートを追加する] をクリックします。
以下のいずれかを実行します。
- ［ここにファイルをドロップ］フィールドにファイルをドロップします。
- ［ファイルを選択］をクリックし、目的のファイルを選択します。
（任意）ファイルの名前を変更し、必要であれば説明を入力します。
[保存] をクリックします。

AnalyzerでカスタムチャートをDomoに追加するには

カード用にAnalyzerを開きます。
チャートピッカーで [カスタムチャート] を選択します。
[カスタムチャート] ペイン下部の [+] ボタンをクリックします。
次のいずれかを行います。
- ［ここにファイルをドロップ］フィールドにファイルをドロップします。
- ［ファイルを選択］をクリックし、目的のファイルを選択します。
（任意）ファイルの名前を変更し、必要であれば説明を入力します。
[保存] をクリックします。

これでこのチャートをAnalyzerのチャートピッカーの [カスタムカード]ドロップダウンメニューで選択できるようになります。このチャートをDomoから削除するには、[管理者設定]、[カンパニー設定]、[カスタムチャート] の順に移動し、このチャートを選択して、右上隅にレンチマークで表示されているメニューの [削除] を選択します。同様に、チャートで使用するSVGファイルに切り替える場合は、同じメニューで［ファイルを変更］を選択します。

Analyzerでチャートを作成する

チャートをDomoにアップロードしておくと、国別マップの場合とまったく同じようにAnalyzerでチャートからカードを作成できます。国別マップの詳細については、「国別マップ」を参照してください。この手順は、地理的マップもそうでないマップも含め、Domoにアップロードしたすべてのカスタムチャートで使います。

カスタムチャートの [チャートの設定] は、ほとんどの地理的マップで使う設定と同じ内容です。これらのプロパティのリストについては、「マップのプロパティ」を参照してください。