インフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。InfragisticsのXamDataChartを使用すれば、そのようなグラフも簡単に作成することができます。トライアル版のNuGetパッケージを使用しますので、Infragistics製品の事前インストールは必要ありません。必要なものはVisualStudio2022だけです。2022を開き、「新しいプロジェクトの作成」を選択します。テンプレートは「WPFアプリケーション」を選択し、「次へ」をクリックします。適当なプロジェクト名を付け、「次へ」をクリックします。フレームワークは「.NET6(長期的なサポート)」を選択して「作成」をクリックします。NuGetパッケージをインストールするプロジェクトの生成が完了したら、XamDataChartを使用するためのNuGetパッケージをインストールします。Studioの上部のメニューから「ツール」>「NuGetパッケージマネージャー」>「ソリューションのNuGetパッケージの管理」を選択します。「インストール」ボタンをクリックします。変更のプレビュー画面が表示されたら、「OK」ボタンをクリックします。以上の操作により、NuGetパッケージInfragistics.WPF.Charts.Trialがプロジェクトにインストールされ、XamDataChartを使用するための準備が整いました。ソリューション」のタブを閉じ、MainWindow.xaml.csを開き、コードビハインドでグラフにバインドするデータを作成します。データポイントを表すMyDataPointクラスの定義です。時間軸であるX軸を表すDateTimeタイプのMyDateプロパティと、数値軸であるY軸を表すdoubleタイプのMyValueプロパティを追加しました。}次に、グラフにバインドするためのデータコレクションを保持するChartDataSourceクラスを用意します。タイプのObservableCollectionとなっています。ChartDataSourceクラスは自身のコレクションにMyDataPointインスタンスを追加するaddDataItem()メソッドを持ちます。プロパティにはDateTime.Todayを起点として5秒刻みの日付値を、MyValueプロパティには都度ランダムの数値を生成して割り当てます。MainWindowのコンストラクタでChartDataSourceをインスタンス化し、MainWindowのDataContextに割り当てます。}以上でデータクラスの準備は整いました。XamDataChartを配置する次に、MainWindow.xamlを開いてXamDataChartのコーディングを始めます。Infragisticsのコントロールを参照するためのネームスペースをWindowに追加します。xmlns:ig="http://schemas.infragistics.com/xaml">.....</Window>次に、WindowにXamDataChartを配置していきます。</Grid></Window>ここでは軸ラベルの見切れを回避するため、Marginプロパティのみ"25"に設定しています。次に、軸の定義を行います。Y軸は数値軸となるためNumericYAxisを、X軸は時間軸となるためTimeXAxisを定義します。それぞれの定義をXamDataChart.Axesコレクションに追加します。</ig:XamDataChart.Axes>TimeXAxisの実装のポイントはItemsSourceプロパティにDataContextをバインドしていること、そしてDateTimeMemberPathプロパティに先ほどMyDataPointクラスで定義したMyDateプロパティを指定していることです。IntervalsおよびLabelFormatsコレクションには今回のグラフで使用する範囲のみ、軸インターバルとラベル書式設定を行っています。NumericYAxisでは軸の最小値(MinimumValue)と最大値(MaximumValue)のみ指定しています。次にXamDataChart.Seriesコレクションを定義します。今回のチャートは折れ線グラフのため、LineSeriesを使用します。LineSeriesのインスタンスをXamDataChart.Seriesコレクションに追加します。NumericYAxisを指定しています。TimeXAxisの時と同様、DataContextをバインドし、ValueMemberPathにはMyDataPointクラスで定義したMyValueプロパティを指定しています。今回はマーカー表示は行いませんので、MarkerTypeプロパティはNoneとします。XamDataChartの全体像は以下のようになります。</ig:XamDataChart>MainWindow.xamlの定義は以上です。リアルタイムのデータフィードを処理するここで、リアルタイムでデータのフィードを行うためのDispatcherTimerの実装をコードビハインドに追加していきます。WindowのLoadedイベントを以下のように実装します。1秒間隔でDispatcherTimerのTickイベントを発行する内容です。}そして、Tickイベントは以下のように実装します。}1秒間隔で実行されるTimer_Tickで、グラフのデータコレクションに120ずつデータポイントを追加します。データポイントは5秒刻みで追加していますので、120だと120×5(秒)=600(秒)で10分間分のデータとなりますね。それぞれの現在の値に600秒を追加し、グラフが左に流れるようにします。その際にデータポイントを古い方から120削除します。これはMainWindowのコンストラクタに追加すればよいでしょう。本記事のサンプルはこちらからダウンロードいただけます。for...こんにちは。ファイルを読み書きし、サーバー負荷を減らすこんにちは、インフラジスティックス・ジャパンです。テクニカルコンサルティングチームの古堅です。テクニカルコンサルティングチームの古堅です。»Aboutインフラジスティックス・ジャパンのチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Reserved引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。