メインコンテンツまでスキップ
waffle.svg
Domo Knowledge Base - 日本人

カスタムチャート

Version 5

はじめに

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

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

注記:Domoインスタンスにカスタムチャートを追加するには「管理者」のセキュリティプロフィールが必要です。セキュリティ権限の詳細については「セキュリティ権限リファレンス」を参照してください。 

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

custommaps_hongkong.png     

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

custommaps_usregions.png   


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

custommaps_campus.png

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

custommaps_plane.png


特殊な例では、こちらの車のバンパーをはじめとする組立説明も挙げられます。

custommaps_bumper.png

カスタムチャートを使えば、想像力を働かせ、費やせる時間や専門知識を駆使することにより、何でも実装できます。以上の3例と同等のチャートは非常に複雑で、作成するには高度なXMLの知識が必要です。現時点ではサポートされていないXMLタグがあることにも注意してください。該当するタグのリストは、この記事の後半に掲載します。 

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

トレーニングビデオ - カスタムマップとチャート

 

 

注記:この製品トレーニングビデオは、Domoのお客様とクライアント様のみを対象としています。

大まかな手順

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

  1. 追加するチャートを取得します。

  2. 必要に応じてXMLを編集します。

  3. [管理者設定] またはAnalyzerでDomoにチャートを追加します。 

  4. Analyzerでチャートカードを作成します。

SVGチャートを取得する

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

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

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

必要なチャートに合わせて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のサポート対象です。 

custommaps_basic_code.png

パスタグには常に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] 列を追加)。

custommaps_basic_dataset.png

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

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

custommaps_code_with_groups.png

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

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

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

  • [管理者設定]、[カンパニー設定]、[カスタムチャート] の順に選択する。[カンパニー設定] にアクセスするには、[管理者] のセキュリティプロフィールが必要です。

  • Analyzerのチャートピッカーで [カスタムチャート] を選択し、ペイン下部の [+] ボタンをクリックする。このボタンは [管理者] セキュリティプロフィールを持つ場合のみ表示されます。 

セキュリティプロフィールの詳細については「セキュリティ権限リファレンス」を参照してください。 

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

  1. []、[管理者設定]、[カンパニー設定]、[カスタムチャート] の順に進みます。

  2. [チャートを追加する] をクリックします。

  3. 以下のいずれかを行います。

    • SVGファイルを [ここにファイルをドロップ] フィールドにドラッグアンドドロップする

    • [ファイルを選択] をクリックし、目的のSVGファイルに進んで選択する 

  4. (オプション)ファイルの名前を変更し、必要であれば説明を入力します。

  5. [保存] をクリックします。

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

  1. カード用にAnalyzerを開きます。

  2. チャートピッカーで [カスタムチャート] を選択します。

  3. [カスタムチャート] ペイン下部の [+] ボタンをクリックします。

  4. 次のいずれかを行います。

    • SVGファイルを [ここにファイルをドロップ] フィールドにドラッグアンドドロップする

    • [ファイルを選択] をクリックし、目的のSVGファイルに進んで選択する 

  5. (オプション)ファイルの名前を変更し、必要であれば説明を入力します。

  6. [保存] をクリックします。

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

Analyzerでチャートを作成する

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

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