xamWebBulletGraph チュートリアル

0 ユーザーが評価
この投稿には確認済みの回答があります。 0 返信 | 1 サポーター

トップ 10 投稿者 
男性
投稿 12
IG Employee
セドリック 投稿済み: 2009/12/16 11:47

このチュートリアルでは、NetAdvantage for Silverlight Data Visualization の xamWebBulletGraph の使用方法を紹介します。

XamWebBulletGraph はさまざまな数値データを 1 つのグラフで表示できるコントロールです。ブレットグラフは 5 つのコンポーネントで構成されます。このコントロールを使用する前に、まず主要コンポーネントを理解しておきましょう。

 

  1. QuantitativeScale (量的スケー):グラフを測定する目盛りです。目盛りおよび目盛りを識別するラベルを含みます。つまり、以下のコンポーネントの値を決定します。
  2. FeaturedMeasure (主な計測):グラフの主データです。グラフの中心部分にあり、「進行状態」や「今年の業績予想」などのグラフの主データとなる値を表すことができます
  3. ComparativeMeasure (比較的計測):このマーカーは関連する値を示すことにより、機能的計測と比較できます。「目標」や「先月の進行状態」などの比較対象となるデータを識別します。
  4. QualitativeRange (質的範囲):グラフの背景でレベル別に色分けして程度を表すことができます。「高い」、「標準」、「低い」などのデータ値を示します。たとえば、タスクの進行状態を、「低い」は 0 ~ 20 % で、「標準」は 21 ~ 50 % で、「高い」は 51 ~ 100 % などに設定できます。単色にさまざまなシェードを使用する見やすく効果的です。
  5. テキスト ラベル:グラフを説明するラベルです。たとえば、「進行状態」や「今年の業績予想」など自由にラベルを設定できます。グラフが水平方向に表示される場合、ラベルを左側に配置します。グラフが垂直方向に表示される場合、ラベルを上側に配置します。

ダッシュボード アプリケーションのように限られたスペースの中で特定の情報を表現する必要がある場合は、これら 5 つのコンポーネントが大変重要になります。このXamWebBulletGraph では一目で簡単に情報を理解でき、視覚的に値を比較することが可能です。

ここでは XamWebBulletGraph を使って、ダッシュボードでプロジェクトの進行状態に関する詳しいデータを簡単に分かりやすく表現してみましょう。以下の手順に従って基本的な XamWebBulletGraph を作成します。

1. 新しい Silverlight アプリケーションを作成します。

2. MainPage.xaml ファイルを開きます。XAML ビューを使用します。

3. StackPanel を追加します。Orientation を Horizontal に設定します。以下のコードを <Grid x:Name="LayoutRoot"> と </Grid> タグの間に追加します。

<StackPanel Orientation="Horizontal">

</StackPanel>

 

4. テキスト ラベルを表す TextBlock を追加します。テキストラベルは、ブレット グラフで表示されるデータを説明します。ブレット グラフのコンポーネントですが、現在 XamWebBulletGraph でテキスト ラベルが実装されていないため、代わりに標準の XAML TextBlock を使用します。Text プロパティを「今月の開発進捗状況」に設定します。TextBlock を StackPanel タグの間に追加します。これでラベルがブレットグラフの横に表示されます。

 

<TextBlock Text="今月の開発進捗状況" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" />

Text プロパティはラベルを表示するテキストを設定します。TextWrapping プロパティはラベルを 複数行可能に設定します。以上のコードで、ラベルを水平方向および垂直方向にセンタリングします。FontSize プロパティはテキストのサイズを設定します。

5. XamWebBulletGraph を追加します。このコントロールをツールボックスから XAML へドラッグして追加できます。または、プロジェクトの「参照設定」フォルダーに3つのアセンブリ (DataVisualization、Controls、および Gauge) を追加して、igGauge の名前空間宣言を定義する必要があります。コントロールをツールボックスからドラッグ、またはコントロールをツールボックスでダブルクリックすると、アセンブリの参照および名前空間宣言が自動的に追加されます。ここではツールボックスを使用する方が簡単です。XamWebBulletGraph を StackPanel タグの間で TextBlock の下に追加します。Name プロパティを BulletGraph 、Width プロパティを 500、Height プロパティを 100 にそれぞれ設定します。

<igGauge:XamWebBulletGraph Name="BulletGraph" Width="500" Height="100">

</igGauge:XamWebBulletGraph>

 

ここまでで TextBlock と空のブレットグラフが追加できました。以下の手順で実際にデータを追加して、ブレット グラフをカスタマイズします。

6. QuantitativeScale を追加します。ここではグラフと関連する目盛りおよびラベルを定義します。つまり、データの範囲を定義します。XamWebBulletGraph タグの間に QuantitativeScale を追加します。Minimum を 0、Maximum を 100、および Orientation を Horizontal に設定します。水平方向に配置される 0 ~ 100 のスケールを作成します。スケールはパーセントとして測定します。

 

 <igGauge:XamWebBulletGraph.Scale>

   <igGauge:QuantitativeScale Minimum="0" Maximum="100" Orientation="Horizontal"> 

   </igGauge:QuantitativeScale>

 </igGauge:XamWebBulletGraph.Scale>

 

7. QuantitativeScale に LabelGroup を追加します。値を示すために、スケールでラベルを表示します。以下のコードを QuantitativeScale タグの間に追加します。

 

 <igGauge:QuantitativeScale.LabelGroup>

   <igGauge:BulletGraphLabelGroup StringFormat="{}{0}%" />

 </igGauge:QuantitativeScale.LabelGroup>

 

 8. QuantitativeScale に TickMarkGroup を追加します。スケールで値を示す目盛りを定義します。以下のコードを QuantitativeScale タグの間で LabelGroup の下に追加します。

 

<igGauge:QuantitativeScale.TickMarkGroup>

  <igGauge:BulletGraphTickMarkGroup Interval="5" Length="15" Thickness="5" Stroke="Blue" />

</igGauge:QuantitativeScale.TickMarkGroup>

 

 Interval プロパティは、スケールの目盛りの頻度を設定します。Length、Thickness、および Stroke プロパティは目盛りのスタイルを設定します。

9. 次に、QuantitativeScale に 3 つの範囲を追加します。この範囲は「 上」、「中」、または「下」などの範囲を視覚的に定義します。範囲を QuantitativeScale タグの間で TickMarkGroup の下に追加します。

 

<igGauge:QuantitativeScale.Ranges>

  <igGauge:QualitativeRange Value="50" Background="LimeGreen" />

  <igGauge:QualitativeRange Value="80" Background="Green" />

  <igGauge:QualitativeRange Value="100" Background="DarkGreen" />

</igGauge:QuantitativeScale.Ranges>

 

3 つ目の QualitativeRange を削除して、(手順 6 の) QuantitativeScale の Background プロパティを DarkGreen に設定することも可能です。範囲はあまり多くしない方がユーザーに分かりやすいグラフになります。ここでは、全部の範囲を 1 つのセクションで定義することも分かりやすくと思います。

これで QuantitativeScale の定義が完了しました!

10. 次は、FeaturedMeasureを追加します。FeaturedMeasureは主データを定義するものなので、この例ではFeaturedMeasureを使ってプロジェクトの進行状態を表します。今日の進捗状況を表すために、Value プロパティを 60 に設定します。以下のコードをXamWebBulletGraph タグの間で Scale タグの下に追加します。

 

<igGauge:XamWebBulletGraph.FeaturedMeasures>

  <igGauge:FeaturedMeasure Value="60">

  </igGauge:FeaturedMeasure>

</igGauge:XamWebBulletGraph.FeaturedMeasures>

 

11. アプリケーションを実行するときに、FeaturedMeasureの値を表示するアニメーションを追加します。これは XamWebBulletGraph の魅力的な効果の 1 つです。以下のコードを上の FeaturedMeasure タグの間に追加します。

 

<igGauge:FeaturedMeasure.Animation>

  <igGauge:Animation Duration="00:00:03">

    <igGauge:Animation.EasingFunction>

      <CubicEase />

    </igGauge:Animation.EasingFunction>

  </igGauge:Animation>

</igGauge:FeaturedMeasure.Animation>

 

以上のコードは 3 秒間の「CubicEase」アニメーションを追加します。

これで FeaturedMeasures の定義が完了しました!

12. 2 つの ComparativeMeasure を追加します。ComparativeMeasure はFeaturedMeasure 内に表示される目盛りです。この目盛りを使用すると、関連データとFeaturedMeasureで表す主データを比較できます。この例では 2 つのマーカーを追加します。昨日の進行状態および明日の進捗の目標を表します。以下のコードをXamWebBulletGraph タグの間で FeaturedMeasures タグの下に追加します。

 

<igGauge:XamWebBulletGraph.ComparativeMeasures>

  <igGauge:ComparativeMeasure Value="50" Background="Gray" />

  <igGauge:ComparativeMeasure Value="70" AllowDrag="True" Cursor="Hand" Background="Gray" />

</igGauge:XamWebBulletGraph.ComparativeMeasures>

 

50 にある ComparativeMeasure は昨日の進行状態を表します。70 にある ComparativeMeasure は明日の進捗状況の目標を表します。今日の進捗率 (FeaturedMeasure) は 60 に設定しますから、ComparativeMeasure によって、プロジェクトの進行状態に遅延がないことが分かります。

ComparativeMeasure の AllowDrag を True に設定すると、インジケーターをグラフでドラッグできます。この例では、2 つ目のインジケーターをドラッグできます。マウス オーバーすると、カーソルがドラッグできることを示す「ハンド」(Hand) に変わります。進行状態に基づいて明日の目標を変更する必要がある場合、このインジケーターを新しい値にドラッグできます。

ここまでで ComparativeMeasures の定義が完了しました!

13. プロジェクトを保存して実行します。以下の画像のような BulletGraph を表示します。

 

 

推奨されるベスト プラクティスおよび標準の詳細については、ブレット グラフの開発者である Stephen Few 氏によるこのドキュメント (英語) をご覧ください。

 

ページ 1 / 1 (1 項目) | RSS
Infragistics Japan
インフラジスティックス ジャパン