チャート ページの作成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
この手順は、基本的なSPEAKページの作成方法をすでに理解していることを前提としています。SPEAKの標準ChartDataProviderコンポーネントを使用しています。
SPEAKページに棒グラフを追加するには:
-
SPEAKページを作成します。ブランチテンプレートを使用して、便利な出発点を取得します。
-
ChartDataProviderコンポーネントをページに追加し、例えば、次のプロパティを指定します。
-
Resolution: Yearに設定します。
-
ResolutionRange: 4に設定します。
つまり、ChartDataProviderコンポーネントは1年間のデータをグループ化し、4年間の時間範囲を示しています。
-
-
次のいずれかの方法で、データ・プロバイダー・コンポーネントのサーバー・データを提供します。
-
ページコードを使用して、コンポーネントがJavaScriptを使用してプログラムでデータを取得する方法を指定します。
-
DataURLプロパティを使用して、データを返すサーバー側のMVCコントローラーのURLを設定します。
-
-
次の2つのグラフ フィールド構成項目を作成します。
-
あなたがCategoryと呼ぶもの。 Header TextプロパティをDateに、DataFieldプロパティをdateに設定します。
-
あなたがVisitsと呼ぶもの。 Header TextプロパティをVisitsに、DataFieldプロパティをvisitsに設定します。
-
-
BarChartコントロールをページに追加し、BarChartコントロールのDataプロパティをChartDataProviderコンポーネント: {Binding ChartDataProvider.Data}にバインドします。
-
BarChartコントロールを構成します。
-
CategoryChartFieldプロパティをCategory構成アイテムにバインドします。
-
ValueChartFieldプロパティをVisits構成アイテムにバインドします。
-
ShowAxisプロパティの値をTrueに設定します。
-
これにより、データに応じて次のような棒グラフが作成されます。
