バージョン

VS デザイナーでチャートを作成

トピックの概要

目的

このトピックは、Visual Studio 2013-2017 デザイナー インターフェイスを使用した WinForms UltraDataChart コントロールの作成について説明します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、 UltraDataChart コントロールの概要を説明します。

このトピックでは、UltraDataChart コントロールを使用して作業を開始する方法に関する情報を提供します。

このトピックでは、UltraDataChart コントロールで利用可能な散布シリーズに関する情報を提供します。

概要

プレビュー

以下はこのトピックの最終結果のプレビューです。

Create DataChart Using the Designer 1.png

アプリケーションの要件

以下の表では、 UltraDataChart の作成の要件を簡単に説明します。

要件 説明

Infragistics 製品をインストール

チャート コントロールは Ultimate UI for Windows Forms 2014 Volume 2 またはそれ以降のバージョンに含まれます。

データ ソースの追加

チャート コントロールにはデータ ソースが必要です。このトピックは サンプル エネルギー データをデータ ソースとして提供します。エネルギー製造データのサンプル、またカスタムデータ ソースを使用することは可能です。チャート シリーズの要件に関して シリーズ要件トピックを参照してください。

アプリケーションの作成

Visual Studio 2013-2017 およびそれ以降のバージョンで WinForms アプリケーション プロジェクトを作成します。

プロジェクトにアセンブリを追加する必要がありません。それはフォームにチャート コントロールをドロップしたら、Visual Studio 2013-2017 は自動的に次のアセンブリを追加するからです:

  • Infragistics.Win.DataVisualization.Shared.dll

  • Infragistics.Win.DataVisualization.UltraDataChart.dll

  • Infragistics.Win.Portable.Core.dll

チャート コントロールの追加

Visual Studio 2013-2017 ツールボックス領域からフォーム上に UltraDataChart コントロールをドラッグ アンド ドロップします:

Create DataChart Using the Designer 2.png

スマート タグを使用

コントロールに右上にあるスマート タグが含まれます。

タスク リストを表示するにはスマート タグの矢印をクリックしてください。デザイン時にカスタマイズのため Name および Dock プロパティが含まれます。

Create DataChart Using the Designer 3.png

カスタム プロパティ ページ

UltraDataChart コントロールのプロパティは Visual Studio 2013-2017 のプロパティ グリッドまたはカスタム プロパティ ページで表示されます。チャート コントロールに右クリックして、「カスタム プロパティ ページ」のダイアログ ウィンドウを選択します。

Create DataChart Using the Designer 4.png

このダイアログ ウィンドウでコントロールをカスタマイズして、更新して変更を表すことおよび変更されたプロパティのみ表示されることが可能です。

Create DataChart Using the Designer 5.png

軸の追加

ダイアログ エディターを開くには軸プロパティの隣の楕円 () をクリックしてください。軸コレクション エディターでチャートコントロールに軸オブジェクトを追加できます。

Create DataChart Using the Designer 6.png

軸コレクション エディターの「追加」ボタンでリストから軸のタイプを選択できます。水平軸のために CategoryXAxis を選択し、垂直軸のために NumericYAxis を選択します。チャート コントロールの Axes コレクションに追加するには [OK] ボタンをクリックします。

Create DataChart Using the Designer 7.png

シリーズの追加

ダイアログ エディターを開くには軸プロパティの隣にある楕円ボタン () をクリックしてください。シリーズコレクション エディターでチャート コントロールにシリーズ オブジェクトを追加できます。

シリーズコレクション エディターの「追加」ボタンでリストからシリーズ タイプを選択できます。データを可視化するには AreaSeries を選択して、シリーズをシリーズコレクションに追加するには [OK] ボタンを押します。

Create DataChart Using the Designer 8.png

前に作成された軸の名前に AreaSeries の XAxis および YAxis を設定します。

Create DataChart Using the Designer 9.png

データ ソースの作成

プロジェクトに サンプル エネルギー データ リソースのサンプル データ コードをコピーしてカテゴリ サンプル データのインスタンスを作成します:

C# の場合:

var data = new CategorySampleData();

Visual Basic の場合:

Dim data As New CategorySampleData()

データ ソースへのバインド

データ バインディングには Series オブジェクトで公開された DataSource プロパティおよびカテゴリの種類の Axis タイプを設定する必要があります。数値軸オブジェクトは DataSource プロパティがありません。この軸のラベルはシリーズにバインドされたデータ範囲によって自動的に生成されます。

次のコード例は CategoryXAxisオブジェクトへのバインディングおよび Label データ列にラベルをマップする方法を紹介します。

C# の場合:

var xAxis = this.ultraDataChart1.Axes.OfType<CategoryXAxis>().FirstOrDefault();
xAxis.Label = "Country";
xAxis.DataSource = data;

Visual Basic の場合:

Dim xAxis = Me.ultraDataChart1.Axes.OfType(Of CategoryXAxis)().FirstOrDefault()
xAxis.Label = "Country"
xAxis.DataSource = data

次の例は AreaSeriesオブジェクトへのバインディングおよび Value データ列にシリーズの値をマップする方法を紹介します。

C# の場合:

var series = this.ultraDataChart1.Series.OfType<AreaSeries>().FirstOrDefault();
series.ValueMemberPath = "Coal";
series.DataSource = data;

Visual Basic の場合:

 Dim series = Me.ultraDataChart1.Series.OfType(Of AreaSeries)().FirstOrDefault()
series.ValueMemberPath = "Coal"
series.DataSource = data

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックは、コード例を示して、WinForms の UltraDataChart コントロールを作成する方法を説明します。