これまで聞いたことのない最高のカスタム ビジュアル

LuckyTemplates のカスタム ビジュアルを探している場合は、99% の人がこれまで見たことも聞いたこともないと思われる素晴らしいビジュアルを紹介します。このチュートリアルの完全なビデオは、このブログの下部でご覧いただけます。

私はこれを、購入、在庫、販売を扱うで見つけました。私たちは、主に注文書、売掛金、請求書に焦点を当てたデータセットを持っていました。

この課題では、これらのイベント間の時間を描写し、有用な方法で視覚化する必要がありました。このチャレンジについて最初に私が思いついたことの 1 つは、日付ごとにスケールされた水平のタイムラインでさまざまなイベントを表示できたら素晴らしいだろうということでした。LuckyTemplates 内の基本ビジュアルではそれを行う方法がないことはわかっていました。

そこで私は AppSource マーケットプレイスに行き、水平方向のタイムラインを実行できるカスタム ビジュアルを探しました。Query On Timelineというものを見つけました。

これには、私が探していたものがあります。日付とグラフィックを表示するバーと、注文書の日付、船荷証券の日付、請求書の日付などの追加情報をその行の下に含める機能です。

このカンバン スタイルのように、これを使用する方法もあります。

ビジュアルなしの縮小バージョンを使用することもできます。

またはウォーターフォールスタイルを選択してください。

ピクチャインラインスタイルを選択することもできます。

これについてはさまざまな方法があります。これについて調査し始めたところ、これに関する文書がないことがわかりました。驚くべきことに、Microsoft コミュニティにはこれに関する情報がありませんでした。Microsoft コミュニティでは、ほとんどの場合、質問の答えとなるものが見つかります。

これについては主に自分で調査する必要がありました。このブログでは、私がこれを使って何をしたかを紹介し、独自のレポートに適用することに興味がある場合に備えて、その使用方法を説明したいと思います。

これは、Query on Timeline ビジュアルを使用したチャレンジ #7 のエントリーでした。

左下のビジュアルにはこのキーがあります。オレンジ色は発注書の日付、中くらいの青は売掛金、濃い青は請求書の日付です。

各発注書には、納期と請求書の日付が異なる複数の資材が含まれています。すべてが完全に動的であるため、別の発注書を選択すると、ビジュアルが変化することがわかり、材料によってフィルターすることができます。

焦点を外して、さまざまな売掛金や請求書に関連付けられた日付の全範囲を表示することもできます。

これらのアイコンのいずれかをクリックすると、実際にそのページに移動します。たとえば、請求書をクリックすると…

…模擬請求書テンプレートが表示されます。

同様に、発注書に移動すると、発注書のテンプレートが表示されます。配達や船荷証券についても同様のことが起こります。

目次

• LuckyTemplates で最高のカスタム ビジュアルを実現するための重要な手順
• ビジュアルの準備
• データモデルの準備
• LuckyTemplates のカスタム ビジュアルの書式設定
• 結論

LuckyTemplates で最高のカスタム ビジュアルを実現するための重要な手順

これは洗練されたビジュアルであり、これを独自のレポートで機能させるには、いくつかの重要な手順があります。1 つ目は、ビジュアルを準備することです。

2 番目のステップでは、LuckyTemplates で操作するための URL を簡単に取得できるパブリック ホスティング サイトにビジュアルをアップロードします。

また、補足 URL を設定する必要もあります。この場合、これはアイコンにリンクした模擬テンプレートです。

次に、タイムラインのクエリ要件と一致する方法でデータ モデルを設定する必要があります。

さまざまなデータ モデルを柔軟に処理できる他のビジュアルとは異なり、このビジュアルではモデルの構造にいくつかの厳しい制限が必要です。

これを事前に考慮してから、ビジュアル自体を構成する必要があります。多くの設定が可能ですが、一部は直感的ではありません。

ビジュアルの準備

ステップ 1 から始めましょう。ビジュアルにはFlat Iconというサイトを使用します。

優れたアイコン サイトはたくさんあります。これはたまたま私が使っているものです。私が行ったのは、購入、成果物、請求書にそれぞれ 1 つずつ、計 3 つのアイコンを選択することでした。

カラーテーマを使用してこれらのアイコンを変更しました。これらをカラー テーマに一致させる方法に興味がある場合は、LuckyTemplates の簡単な 16 進コード ラングリングに関する私のビデオをご覧ください。

写真、画像、またはアイコンをすべて設定したら、ダウンロードして画像ホスティング サイトにアップロードします。またまた良いものがたくさんあります。私が使用しているのはImgBBという、使いやすい無料サイトです。

Query On Timeline のエントリで使用したアイコンは、オレンジ、中青、濃い青のアイコンです。

ここで重要なのは、必要なアイコンを選択し、 [埋め込みコードを取得]を選択することです。

これにより、ビューアのリンクが表示されるようになります。

ドロップダウン ボタンをクリックして、[直接リンク] に移動します。

次に、これらのリンクをメモ帳にコピーします。ここで重要なのは、これらの公的にホストされている画像の URL を取得することです。

これは、補足 URL に対して行うことと似ています。この場合、ソース元のサイトはTemplate Labsと呼ばれます。

注文書、船荷証券、請求書のテンプレートの URL をメモ帳にコピーしました。これらは、アイコンの URL を処理するのと同じ方法で処理します。

データモデルの準備

次に行うことは、データ モデルを準備することです。このチャレンジに参加したほとんどの人がデータ モデルをどのように扱ったかを紹介します。これは Mudassir Ali の投稿であり、彼はこの挑戦のために素晴らしいエントリーをまとめてくれました。ぜひご覧ください。

ここには、非常に興味深いビジュアルやツールヒントがたくさん埋め込まれているほか、クールなテクニックもいくつかあります。これを達成するために、彼は 3 つのファクト テーブルを含むデータ モデルを構築しました。これは、この課題においては完璧に優れたアプローチです。

これは、計算を実行し、必要な分析結果を導き出すための良い方法でした。ただし、このモデルはタイムライン アプローチをサポートしません。

私の提出物は基本的に、これら 3 つのファクト テーブルを 1 つのエンドツーエンドのトランザクション テーブルに取得するための多くのパワー クエリ作業でした。

フォーラムでは、私たちがどのようにしてエントリーを思いついたのかについて詳しく書くことができます。を読むと、エンドツーエンドのトランザクション テーブルを詳細にまとめた方法がわかります。

トランザクション テーブルを見ると、発注日、請求日、売掛金の日付、その他の計算日など、多数の日付が表示されます。

Query On Timeline に必要なのは、単一の日付列です。したがって、この単一のトランザクション テーブルをまとめた後、ピボットを解除し、ピボット解除されたバージョンをデータ モデルにリンクしました。タイトルにはピボットと書かれていますが、実際にはピボットされていないことに注意してください。

トランザクション テーブルをもう一度見ると、Date category 列と 1 つのDate 列が表示されます。

「日付カテゴリー」列は基本的に、「 ordered」、「receeded」、および「billed」の 3 つの主要カテゴリーに折りたたまれています。ただし、そこにはローカルおよびグローバルの最大値と最小値も存在します。

発注書 URL (PO URL)もあります。

トランザクション テーブルを振り返ると、これらの URL の計算列が表示されます。これは、データ カテゴリを調べて、画像ホスティング サイトの URL を適切なアイコンに割り当てる

同じようなSWITCHステートメントを実行して、同じく「日付カテゴリー」フィールドに基づくテンプレートを割り当てます。

このようにして、各レコードに適切なアイコンとテンプレートを割り当てました。

アンピボット テーブルに戻ると、単一の Date Column、Date Category、および発注書とテンプレートの2 つのURL フィールドが表示されます。

タイムラインを適切に設定するために必要なのはこれだけです。

ここでビジュアルフィールドとメインフィールドに入ると、タイトルは、先ほど示したピボットされていない日付カテゴリです。

日付/時刻は、ピボットされていないバージョンのファクト テーブルの日付、または日付テーブルの検証された日付の 2 つのいずれかになります。ここではどちらかが機能します。

オプションの URL は、アイコンのクリックにリンクされるテンプレート URL です。

オプションの画像は注文書の URL フィールドです。

ここで、PO URL フィールドを確認すると、自動的にデフォルトでテキストになるため、データ カテゴリを画像 URL に設定する必要があります。テキストのままにすると、画像が適切にレンダリングされなくなります。

これを URL フィールドに設定すると、画像は画像ホスティング サイトから適切に送信されます。

これらの手順は基本的に、ビジュアル上で基本フィールドを適切に設定する方法です。

LuckyTemplates のカスタム ビジュアルの書式設定

ここで、レポート用に行ったいくつかの書式設定について説明したいと思います。最初に関連するのはStagger Textで、カスケード効果を作成します。

Stagger Text をオフにすると、すべてが同じ行に表示されます。ただし、複数のフィールドが互いに比較的近い場合、それらは重なって読めなくなります。これが、自動計算でテキストをずらして表示する理由です。

Text on Top機能を使用すると、カスケード テキストを下の行の上に移動できます。

太字のタイトルを使用すると、タイトルを太字で強調表示できます。X 軸で実行できる日付の書式設定もいくつかあります。軸に日付を表​​示または非表示にできます。

手動スケール日付スイッチも重要です。これをオンにすると、開始点と終了点が一定のままになるからです。

データには一定期間があるため、これをオンにする必要があります。これらのさまざまなイベントが発生する固定時点を基準にして示したいと考えています。

これをオフにすると、すべての発注書の最後のデータ ポイントがその行の終点になります。ご覧のとおり、終点は3月です。

この場合、手動スケーリングをオンにして、データセットの始まりである 1 月 1 日に開始し、データセットの終わりである 6 月 30 日に終了します。

[手動スケール ピクセル] は線の幅を設定します。これをオンにした唯一の理由は、実行されないように隙間を作り、下部にスクロール バーを作成するためでした。

単一要素プロパティは、カテゴリごとにイベントが 1 つだけある場合に便利です。

これには本格的なカスタム条件付き書式設定がないため、この機能を使用して各カテゴリのフォント、色、プロパティを設定できます。最初の色のみを実行でき、残りはデフォルトの色になります。今後のバージョンでは、完全な条件付き書式設定ができるようになることが期待されます。

画像設定を使用すると、画像のサイズを調整し、適切な間隔を維持できます。

[スタイル] では、バー スタイル、ライン スタイル、ウォーターフォール スタイル、カンバン スタイルのいくつかのスタイルから選択できます。

ここでは Bar スタイルを使用しますが、他のアプリケーションでは、この機能を実験して試してみるとよいでしょう。

このカスタム ビジュアルには、今日の日付を表示する動的な機能もありますが、データの長さまで拡張されないため、この場合は関係ありません。

Google カレンダーや Outlook から日付をカレンダー ファイルとしてダウンロードする機能もあります。

結論

これは、LuckyTemplates のカスタム ビジュアルを構成する方法の例です。正確に表示するには多くの実験が必要ですが、データを表示する貴重な方法を提供すると思います。

このチュートリアルが役に立ち、実験して遊んでみたいと思うものを見つけていただければ幸いです。

まだ登録していない場合は、LuckyTemplates TVに登録してください。近々、新しいビデオコンテンツがたくさん公開される予定です。