チャートページを作成する

この手順は、基本的なSPEAKページの作成方法が既に分かっていることを前提としています。SPEAKの標準的なChartDataProviderコンポーネントを使用しています。

SPEAKページに棒グラフを追加するには:

1. SPEAKページを作成しましょう。分岐テンプレートを使って有用な出発点を作ってください。

2. ページにChartDataProviderコンポーネントを追加し、例えば以下のプロパティを指定します。

   • 解像度: Yearに設定されています。
   • 解像度範囲: 4に設定されています。

   つまり、ChartDataProviderコンポーネントは1年間データをグループ化し、4年間の時間範囲を示します。

3. データプロバイダーコンポーネントにサーバーデータを提供する方法のいずれか:

   • ページコードを使って、コンポーネントがJavaScriptを使ってプログラム的にどのようにデータを取得するかを指定します。
   • DataURLプロパティを使って、データを返すサーバー側のMVCコントローラーのURLを設定します。

   ChartDataProviderコンポーネントの説明には 、さらに詳しい情報があります。

4. チャートフィールドの設定項目を2つ作成します:

   • 1つを Categoryと呼びます。ヘッダーテキストプロパティを Date に、 DataField プロパティを dateに設定します。
   • 1つは Visitsと呼びます。ヘッダーテキストプロパティを Visits に、DataFieldプロパティを visitsに設定します。

5. ページに バーチャート コントロールを追加し、そのバー チャート コントロールのDataプロパティをChartDataProviderコンポーネントにバインドします: {Binding ChartDataProvider.Data}。

6. バーチャートコントロールの設定:

   • CategoryChartFieldプロパティを Category 設定アイテムにバインドします。
   • ValueChartFieldプロパティを Visits 設定アイテムにバインドします。
   • ShowAxisプロパティの値を Trueに設定します。

これにより、データによっては次のような棒グラフが作成されます: