arrow ブログに戻る Your Dashboards — Your Look! Meet the New Custom Theming in Reveal

お客様のダッシュボード、お客様のデザイン！Revealの新しいカスタムテーマをご覧ください。

Reveal組み込みBIソフトウェアにカスタムテーマを適用し、アプリの外観に合わせて独自のダッシュボードと視覚化スタイルを作成する方法をご覧ください。

要約: ChatGPT ChatGPT Perplexity Perplexity

エグゼクティブサマリー:

Revealは、組み込み分析を備えた、すぐに統合できるデータ視覚化を提供することに重点を置いています。重要なのは、アプリケーションに組み込む要素が、外観と雰囲気に一致していることを確認することです。アプリケーションユーザー向けに、RevealにはMountainとOceanの2つのテーマが用意されており、どちらも明るい環境と暗い環境で美しく表示されます。

アプリケーションユーザー向けに、RevealにはMountainとOceanの2つのテーマが用意されており、どちらも明るい環境と暗い環境で美しく表示されます。アプリケーションのテーマに一致する視覚化を組み込みたいですか？問題ありません！Reveal SDKを使用すると、独自のカスタムテーマを作成し、ダッシュボードのすべての側面を制御できます。

Revealの新しいダッシュボードテーマ

新しいMountainとOceanのテーマで最高のユーザーエクスペリエンスを提供するために、美しく、明るいモードと暗いモードで機能し、モダンな外観と雰囲気を持つカラーパレットを開発しました。 Reveal dashboard Revealのオーシャンテマ

カラーパレット

Revealアプリケーション内の各テーマには、パレットに10種類の異なる色があります。視覚化を編集または作成するときに、パレットから選択して、開始色を簡単に変更できます。

Reveal app color palette example

分析を組み込む際のカスタムテーマ

既存のアプリケーションに分析を組み込む場合、それらのダッシュボードがアプリケーションの外観と雰囲気に一致することが重要です。そのため、SDKを通じてRevealダッシュボードを完全に制御できます。アプリケーションと比較して、カスタムテーマで実現できる主なカスタマイズは次のとおりです。

  • カラーパレット: 視覚化でシリーズを表示するために使用される色。無制限の数の色を追加できます。すべての色が視覚化で使用されると、Revealはこれらの色の新しい色合いを自動的に生成します。このようにして、色が繰り返されることはなく、各値には独自の color が割り当てられます。
  • アクセントカラー: Revealのデフォルトのアクセントカラーは、+ダッシュボードボタンやその他のインタラクティブアクションで使用できる青色の色合いです。この色を、アプリケーションで使用するのと同じアクセントカラーに変更できます。
  • 条件付き書式設定の色: 条件付き書式設定で境界を設定するときに使用できるデフォルトの色を変更します。
  • フォント: Revealは、アプリケーションで3種類のテキスト（通常、中、太字）を使用します。これらのテキストグループのそれぞれに使用するフォントを指定できます。
  • 視覚化とダッシュボードの背景色: ダッシュボードの背景色と視覚化の背景色を個別に設定できます。

カスタムテーマの作成方法

Revealで独自のテーマを作成するのは、新しい RevealTheme()/$.ig.RevealTheme() クラスのインスタンスを作成するのと同じくらい簡単です。このクラスには、上記でリストしたすべてのカスタマイズ可能な設定が含まれています。

新しい RevealTheme/$.ig.RevealTheme インスタンスを作成すると、各設定のデフォルト値が表示されます。次に、変更する必要がある設定を変更します。最後に、テーマインスタンスを UpdateRevealTheme(theme)/ updateRevealTheme(theme) メソッドに渡します。すでに画面に表示されているダッシュボードまたは他のRevealコンポーネントがある場合は、変更を適用するために再レンダリングする必要があります。

すでに独自のテーマを適用しているが、他の変更を失わずに一部の設定を変更したい場合があります。

この場合、 GetCurrentTheme()/getCurrentTheme() メソッドを呼び出すことができます。このメソッドを使用すると、RevealTheme設定に対して最後に設定した値を取得できます。RevealThemeを最初から作成する場合とは異なり、変更を適用してテーマを再度更新すると、変更しなかった各設定に対して、デフォルト値ではなく現在の値が取得されます。

どちらのメソッドも、 GetCurrentTheme()/getCurrentTheme() と UpdateRevealTheme(theme)/ updateRevealTheme(theme) RevealView / $.ig.RevealViewクラスを通じてアクセスできます。 次のコードスニペットでは、現在のテーマを取得し、変更を適用し、Revealでテーマを更新する方法を示します。 まず、変更を加える前のスクリーンショットの例を見てみましょう。

コード例

次に、このコードスニペットを使用して、カスタムテーマを定義します。

var regularFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Italic");

Reveal Marketing Dashboard

var boldFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Bold");

var mediumFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Bold Italic"); 
var customTheme = RevealView.GetCurrentTheme(); 
customTheme.ChartColors.Clear(); 

customTheme.ChartColors.Add(Color.FromRgb(192, 80, 77)); 
customTheme.ChartColors.Add(Color.FromRgb(101, 197, 235)); 
customTheme.ChartColors.Add(Color.FromRgb(232, 77, 137)); 
customTheme.BoldFont = new FontFamily("Gabriola"); 
customTheme.MediumFont = new FontFamily("Comic Sans MS"); 

customTheme.FontColor = Color.FromRgb(31, 59, 84); 
customTheme.AccentColor = Color.FromRgb(192, 80, 77); 
customTheme.DashboardBackgroundColor = Color.FromRgb(232, 235, 252); 
RevealView.UpdateRevealTheme(customTheme); 
まず、チャートカラーリストをクリアする必要があります。 

新しいカラーセットを追加できるように、デフォルト値をクリアします。

注： 次のコードスニペットは、revealThemeクラスの新しいインスタンスを作成し、設定に目的の変更を適用し、Reveal Webでテーマを更新する方法を示しています。 コードサンプル – Reveal Webvar revealTheme = new $.ig.RevealTheme();

revealTheme.chartColors = ["rgb(192, 80, 77)", "rgb(101, 197, 235)", "rgb(232, 77, 137)"];   revealTheme.mediumFont = "Gabriola";

revealTheme.boldFont = "Comic Sans MS"; 
revealTheme.fontColor = "rgb(31, 59, 84)"; 

revealTheme.accentColor = "rgb(192, 80, 77)"; 
revealTheme.dashboardBackgroundColor = "rgb(232, 235, 252)"; 
$.ig.RevealView.updateRevealTheme(revealTheme); 
フォントオプションを使用する 
revealテーマのboldFont、regularFont、またはmediumFontの設定を定義する際には、正確なフォントファミリー名を渡す必要があります。太さは、フォント自体の定義によって定義され、名前には含まれません。$.ig.RevealThemeのフォント設定で指定されたフォントフェイス名が利用できるように、@font-face（CSSプロパティ）を使用する必要がある場合があります。 

テーマの変更を実装した後、ダッシュボードとビジュアライゼーションエディターの両方で新しい結果を以下に示します。

注： 上記のコードスニペットから変更を適用した後のダッシュボードエディター

上記のコードスニペットから変更を適用した後のビジュアライゼーションエディター。 テーマの変更に関するドキュメントは、ここにあります。 https://www.revealbi.io/help/developer/rvui.wpf~infragistics.sdk.revealtheme_properties

$.ig.RevealThemeで設定できるプロパティは次のとおりです。

Dashboard in Reveal BI chartColors.

Reveal dashboard regularFont

テーマのプロパティを変更するためのコードスニペット

mediumFont

boldFont

fontColor

  • dashboardBackgroundColor
  • visualizationBackgroundColor
  • accentColor
  • useRoundedCorners
  • conditionalFormatting.lowColor
  • conditionalFormatting.midColor
  • conditionalFormatting.hiColor
  • conditionalFormatting.noneColor
  • ここに、Web SDKでテーマを変更するスニペットを示します。
  • // 標準のカラー/フォントの設定 revealTheme.accentColor = “rgb(15,96,69)”; revealTheme.regularFont = “Righteous”; revealTheme.mediumFont = “Caveat”; revealTheme.boldFont = “Domine”; revealTheme.fontColor = “rgb(226,24,125)”; revealTheme.dashboardBackgroundColor = “rgb(24,224,37)”; revealTheme.visualizationBackgroundColor = “rgb(221,224,37)”;
  • // 条件付き書式の設定 revealTheme.conditionalFormatting.hiColor = “rgb(87,0,127)”; revealTheme.conditionalFormatting.lowColor = “rgb(158,0,232)”; revealTheme.conditionalFormatting.midColor = “rgb(198,137,229)”; revealTheme.conditionalFormatting.noneColor = “rgb(255,255,127)”;
  • // チャートカラーの設定 revealTheme.chartColors = [“rgb(248,53,255)”, “rgb(248,53,75)”, “rgb(54,247,160)”, “rgb(130,53,244)”, “rgb(235,242,138),rgb(239,139,219),rgb(38,116,68),rgb(108,147,178)”];
  • // 正方形または角丸の外観の設定 revealTheme.useRoundedCorners = false;

// ダッシュボードの更新 $.ig.RevealView.updateRevealTheme(revealTheme);

revealTheme.boldFont = "Comic Sans MS";

テーマのプロパティを設定したら、updateRevealメソッドをRevealViewで呼び出します。

フォントのカスタマイズを行うには、次の行をページのCSSに追加する必要があります。

これらのプロパティ設定を使用すると、必要なブランドの顧客エクスペリエンスに合わせて、外観をカスタマイズできるはずです。

他にスタイリングのポイントが必要な場合は、お知らせください。

データに基づいた意思決定が必要な理由

データに基づいた意思決定とは何か、そしてなぜそれが重要なのかを知りましょう。データに基づいた企業になるための7つの構成要素と、例とビデオについて学びます。 最終更新日：2021年1月18日 データに基づいたインサイトは、ビジネスチャンスを特定し、顧客ジャーニーのボトルネックを検出し、製品の弱点を深刻な問題に発展する前に積極的に特定するのに役立ちます。 データに基づいた意思決定とは？.

テーマの変更を実装した後、ダッシュボードとビジュアライゼーションエディターの両方で新しい結果を以下に示します。

データに基づいた意思決定が重要な理由

データに基づいた意思決定のメリット Revealの埋め込み分析 データに基づいた文化をどのように実現できるか？

If there are additional styling points you require, please let me know!

データの力を活用する

リアルタイムでコンテキストに応じたデータを使用して、ビジネスを成長させましょう。

デモをリクエストする

製品のアップデート