チャートの概要、高度な機能の紹介

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

トップ 10 投稿者 
女性
投稿 18
IG Employee
[IG] Yoshimi 投稿済み: 2010/11/25 16:17

元記事 (英語) Sung Kim : http://forums.infragistics.com/blogs/sung_kim/archive/2008/09/05/chart-university-chart-101-and-some-201-301-401-stuff.aspx

チャートは、数字だけでは分かりづらいトレンドの視覚化に大変適しているため、ダッシュボードで一番よく使用されているコントロールです。 
ただし、0 からチャートを作成することが複雑で、時間がかなりかかります。きれいで多様性のあるチャート コントロールを実装するにはそれなりにリソースが必要となってきます。新しいチャート コントロールを作成する代わりに NetAdvantage for Windows Forms および NetAdvantage for ASP.NET で提供されている WebChart コントロールを使用すると、シンプルなコードでアプリケーションで高度なビジュアライゼーション実現することができます。

はじめに

この記事では、NetAdvantange for Windows Forms および NetAdvantage for ASP.NET チャートの一般的な機能に加え、拡張機能をご紹介します。  Windows Forms および ASP.NET のチャートは同じコードで実装されているため、WinChart および WebChart のコードが同様に反映されます。以降、WinChart および WebChart については「UltraChart」を使用します。 この記事は長いので各セクションに分けてあります。

まず、using ステートメントには下記の名前空間を追加します。

using Infragistics.UltraChart.Core.Primitives;

using Infragistics.UltraChart.Resources.Appearance;

using Infragistics.UltraChart.Core;

ChartType

まず、デザイン領域にチャートをドラッグします。 ChartType プロパティでは、データの視覚化に使用するデータ型を設定します。ChartType には多くの列挙型があり、折れ線チャート, 棒チャート, 柱状チャートファンネルローソク足チャートバブルレーダー チャートヒートマップ円チャートおよびガントチャートなどが含まれます。加えて、平面 や 立体 チャート タイプもサポートされます。

chartstep0

Data.DataSource

次はデータを追加してみましょう。 
UltraChart にはデータを提供する方法が複数あります。 配列、CollectionBase から派生したクラスへのバインディングDataSet、DataView、または DataTable にバインドIBindingList, IList, XMLファイル、または Series コレクションの利用が可能です。 
この例では DataTable を使用しますが、上記の週類の詳細については、リンクをクリックして、その他のデータ ソースを使用する場合、上記のチャート種類をクリックし、チャート種類に対する記事をご参照ください。

描画に使用するデータをどこから読み込むか、どの ChartType でデータを描画するかはすでにご存知だと思いますので、次はデータの種類やデータ型についてもう少し見てみましょう。

チャート データ要件

ここでは 2D および 3Dチャートの要件について触れておきます。各チャート タイプによって要件が異なります。 複雑な要件があるチャートもありますが、柱状チャートは簡単で必要なのは数値列のみです。 
DataTable に柱状チャートを作成してみましょうUltraChart を設定する際には、データ タイプだけではなく、UltraChart でどのようにデータを変換するかを理解することも必要になってきます。 
ヘルプの ChartType セクションには、各 ChartTypes による実装方法のトピックがあります。 
これらの記事ではサンプル DataTable および描画結果のチャートを提供し、特定なチャート タイプではデータの実装方法を示します。 
平面柱状チャートについては、この記事を参照ください。 
この記事に基づいて、下記に表示される DataTable を作成しました。

DataTable のコード::

DataTable dt = new DataTable();

dt.Columns.Add("Month", typeof(string));

dt.Columns.Add("Leads", typeof(int));

dt.Columns.Add("Sales", typeof(int));

dt.Rows.Add("January", 120, 50);

dt.Rows.Add("February", 90, 44);

dt.Rows.Add("March", 70, 22);

dt.Rows.Add("April", 66, 21);

dt.Rows.Add("May", 80, 42);

dt.Rows.Add("June", 85, 48);

ultraChart1.Data.DataSource = dt;

ultraChart1.Data.DataBind();

実装結果:

image

詳細なカスタマイズ

さて、ここまでですべてのタイプのチャート作成できるようになりました。次に各チャートで必要になる細かいカスタマイズについてご紹介しましょう。

カスタム軸範囲

デフォルトでは、軸は最小値および最大値に基づいて範囲を定義します。この例では 21 および 120 になります。 範囲を 0..200 に変更するためには、Y 軸では RangeType を Custom に設定し、RangeMax を 200 に設定し、RangeMin を 0 に設定します。

ultraChart1.Axis.Y.RangeType = Infragistics.UltraChart.Shared.Styles.AxisRangeType.Custom;

ultraChart1.Axis.Y.RangeMax = 200;

ultraChart1.Axis.Y.RangeMin = 0;

変更後:

image

ColorModel

チャート要素のカラー スキームをコントロールする複数の方法があります。ColorModel.ModelStyle プロパティを設定します。 この例では CustomLinear 設定を紹介しますが、オンライン ヘルプでは他の方法もご覧いただけます。

ultraChart1.ColorModel.ModelStyle = Infragistics.UltraChart.Shared.Styles.ColorModels.CustomLinear;

ultraChart1.ColorModel.CustomPalette = new Color[]{Color.Orange, Color.Orchid, Color.PapayaWhip};

変更後:

image

凡例

凡例を追加することによって、チャート データが格段に分かりやすくなります。

ultraChart1.Legend.Visible = true;

ultraChart1.Legend.Location = Infragistics.UltraChart.Shared.Styles.LegendLocation.Bottom;

変更後:

image

TitleTop

TitleTopTitleBottomTitleLeft および TitleRight プロパティではチャートにタイトルを追加することも可能です。 Visible プロパティを true に設定し、Text プロパティを設定します。

ultraChart1.TitleTop.Visible = true;

ultraChart1.TitleTop.Text = "Leads and Sales for Q1 and Q2 of 2008";

変更後:

image

3 行以上のコードの変更が必要になるカスタマイズ

プロパティを変更するだけでは実現できない変更があります。そのようなカスタマイズには、UltraChart のイベントだけでなく、チャートを構成する要素についての知識が必要になります。

条件によって項目の色を変更する (平面のみ)

要素 (UltraChart では「Primitive」と呼びます) の色を変更するためには、ChartDrawItem イベントを処理します。 このイベントでは、現在の Primitive のプロパティおよび設定をチェックして、変更をするかどうかを決定します。よく使われているプロパティおよび条件については、以下を参考にしてください。

  • e.HasData - 描画されている Primitive はデータにバインドされているかどうか
  • e.Primitive.Path - Path は要素の位置を指定する文字列
  • Border.Title.Top - TitleTop の Primitive
    • Border.Title.Grid.Y - Y 軸の要素
    • Border.Title.Legend - 凡例内の要素
  • e.Primitive.Value - 指定した要素に関連つけられる値 (普通は柱または線のデータ値)
  • certain type of primitive - Primitive の

      if (e.Primitive is Polyline)

      {

          //実行する項目を追加

      }

private void ultraChart1_ChartDrawItem(object sender, Infragistics.UltraChart.Shared.Events.ChartDrawItemEventArgs e)

{

    //描画されている現在の Primitive を

    // Box にキャストします

    Box b = e.Primitive as Box;

    //現在の Primitive は Box ではない場合は

    //return

    if (b == null)

    {

        return;

    }

    //パスが Null の場合

    if (b.Path == null)

    {

        //値が 30 より小さい場合

        if ((double)b.Value < 30)

        {

            //Fill および FillStopColor を赤に変更します

            //グラデーションを使用しているので、以下の両方を設定します

            b.PE.Fill = Color.Red;

            b.PE.FillStopColor = Color.Red;

        }

    }

}

変更後:

image

棒チャート/柱状チャート/ポイントにテキストを追加する (平面のみ)

チャートは、データのおおまかなトレンド、または正確な値を示すのに使用できます。 
正確な値を示すには、ChartTextAppearance オブジェクトを使用し、この ChartType の ChartText コレクションに追加します。  柱状チャートの場合は、chart.ColumnChart.ChartText、折れ線チャートの場合は、chart.ColumnChart.ChartText です。

ChartTextAppearance cta = new ChartTextAppearance();

cta.Visible = true;

//-2 はすべての行またはすべての列を意味します

cta.Row = -2;

cta.Column = -2;

ultraChart1.ColumnChart.ChartText.Add(cta);

 

変更後:

image

チャートにさまざまな Primitive を追加する (平面のみ)

データソースによって提供されない要素は、追加する必要があります。また、データソースにあってもデフォルトでは正しく表示されない場合があります。 
例えば、販売チャートに目標ラインを追加してみましょう。 
この販売ターゲット値がテーブルにある場合、デフォルトでは値が目標ラインであることを指定できないため、柱状チャートは柱状にしようと試みます。 
この線が直接データに関連付けられていないため、線を自分で描画する必要があります。 
それには、FillSceneGraph イベントを処理し、Primitive を作成し、SceneGraph に追加します。

以下は、柱状チャートに赤の目標ラインを追加するコードになります。

private void ultraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)

{

    //X および Y 軸を取得します

    IAdvanceAxis x = (IAdvanceAxis)e.Grid["X"];

    IAdvanceAxis y = (IAdvanceAxis)e.Grid["Y"];

    //軸が存在するかどうかをチェックします

    if (x != null)

    {

        //y=100 に線を描画するために

        //座標を取得します

        int target = 100;

        int yVal = (int)y.Map(target);

        //注:x 軸は文字列の軸で、

        //0 は第 1 の列で 50 は第 50 列になります             

        int xStart = (int)x.Map(0);

        int xEnd = (int)x.Map(50);

        //座標に基づいて線の Primitive を作成します

        Line l = new Line(new Point(xStart, yVal), new Point(xEnd, yVal));

        //線の色を設定します

        l.PE.Stroke = Color.Red;

        //シーンに追加します

        e.SceneGraph.Add(l);

    }

}

変更後:

image 

高度なカスタマイズ

 このセクションでは、特別複雑ではありませんが、いくつかの手順を踏む必要のあるカスタマイズについてご紹介します。

カスタム ラベル

軸目盛りラベル、シリーズ  ラベル、項目ラベル、チャート テキスト、ツールチップなど、チャートではテキストがいくつかの場所に表示されます。 
オブジェクトの FormatString プロパティによってテキストを変更することができます。<DATA_VALUE> または <ITEM_LABEL> などのようなトークンの利用が可能ですが、これらを使用しても複雑なシナリオを処理できません。IRenderLabel インターフェイスでは、FormatString プロパティを使用してチャート テキストをカスタマイズできます。

このインターフェイスのメンバーである ToString は渡されたコンテキストによって表示する文字列を返します。  このメソッドでは、要素の値、テーブルの行および列、指定した要素に対する項目およびシリーズ ラベルにアクセスできます。 この情報がハッシュ テーブルとして渡されています。この情報に基づいて、出力文字列を決定し、この新しい文字列を返します。 この文字列はチャートに表示されます。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Infragistics.UltraChart.Resources;

namespace WinChart101

{

    class CustomToolTips:IRenderLabel

    {

        #region IRenderLabel Members

        public string ToString(System.Collections.Hashtable context)

        {

            return (string)context["ITEM_LABEL"] +": "+ ((double)context["DATA_VALUE"]).ToString("#")+ " Thousand";

        }

        #endregion

    }

}

クラスを定義した後、チャートにフックします。以下はフックするコードの記述です。

//ハッシュ テーブルを作成します 。このテーブルは、

//IRenderLabel オブジェクトを特定な書式文字列に関連付けるために使用します

Hashtable myHashTable = new Hashtable();

//カスタム ラベル文字列を追加します

//最初の引数は文字列です

//次の引数は IRenderLabel オブジェクトで、文字列を画面に表示されるテキストに変換します

//この例ではカスタム ラベルを 1 つだけ作成しますが、複数作成することも可能です

//各カスタム ラベルに、別の IRenderLabel クラスを作成し、

//カスタム ラベル文字列をレンダラーにリンクするエントリをハッシュ テーブルにリンクします

myHashTable.Add("MyLabel", new CustomToolTips());

//ハッシュ テーブルをチャートにアタッチします

this.ultraChart1.LabelHash = myHashTable;

//カスタム ラベルを ToolTip に割り当てします

this.ultraChart1.Tooltips.Format = Infragistics.UltraChart.Shared.Styles.TooltipStyle.Custom;

this.ultraChart1.Tooltips.FormatString = "<MyLabel>";

変更前のチャート ツールチップ:

image

変更後:

image

注:下記のコードでも全く同じことができます。

this.ultraChart1.Tooltips.Format = Infragistics.UltraChart.Shared.Styles.TooltipStyle.Custom;

this.ultraChart1.Tooltips.FormatString = "<ITEM_LABEL>: <DATA_VALUE:#> Thousand";

上記のコードでは、チャートが IRenderLabel を実装するクラスを使用する方法です。 通常は、コンテキストにすぐにアクセスできないとき (例えばデータは別のテーブルにあります) にこれをします。

複合チャート (平面のみ)

複合チャートは、重複する平面チャート レイヤーで実装されます。 例えば、CompositeChart の ChartType を使用することによって、高値および安値を表すローソク足チャート イヤーおよびボリュームを表す柱状チャートを 1 つのチャート コントロールに含むことができます。 複合チャートを作成するためには、下記の要素が必要になります。:

  • ChartArea - チャートが配置されるキャンバス
  • AxisItem - X または Y 軸を表します (ChartLayerAppearance の ChartType に基づく要件)。
  • ChartLayerAppearance - ChartTypeレイヤー (ColumnChart や ScatterChart など)
  • Series - さまざまな ChartType に利用されるレイヤー、Series の種類にデータを提供します

注: 複合チャートでは、データを Series オブジェクトで提供することが必要です。 Series オブジェクトは、バインド可能のデータのシング セットです。 イメージとして、それぞれの線が LineChart 内のシリーズ オブジェクトで、オレンジ列が 1 つのシリーズで紫列が同じ柱状チャート内の別のシリーズです。 また、Series オブジェクトは複合チャートだけではなく、すべてのチャート種類で利用可能です。

コードが非常に長いのでこの記事に含みませんが、  このチャートの作成については、ウイザード、デザイナーまたはコードでの作成方法の記事がありますので、是非ご覧ください。

複合チャートの例:

複合凡例付きの複合チャート:

comp1

線レイヤー付きの複数 Y 軸

comp2

上部にエリアー チャートおよび折れ線チャートで、下部にスプライン チャートおよびスプライン エリアー チャート:

comp3 

さてここでクイズです! ***** 回答を見ずに挑戦してみてください *****

  1. 散布図にどうやって別のアイコンを指定しますか?
  2. チャート要素をクリックすると、詳細情報のチャートを表示するように設定したいのですが、どうやってチャートにドリルダウンを設定しますか?
  3. チャートでズームやスケールを可能にするには何を設定しますか?
  4. チャートを PDF ドキュメントへエクスポートする方法は?
  5. チャートで 1 つまたは 2 つの値を効率的にプロットする方法は? (例えば、温度計のようなゲージ)

回答!

実は、上記の質問の内容についてこの記事で言及していないため、回答が難しかったと思います。このようにチャートはとても奥深く、まだまだ多くの機能があり、ご紹介しきれません。チャートについてのご質問は、オンライン ヘルプフォーラム、または弊社サポートへお気軽にお問い合わせください。

  1. ChartType によって、反映されるプロパティが異なります。ヘルプ ドキュメントの ChartTypes セクションでは、特定のプロパティの設定について説明しています。 散布図には、使用されるアイコンをコントロールする Icon プロパティがあります。
  2. IDrillDown インターフェイスを実装します。詳細については、オンライン ヘルプのドリルダウンをご覧ください。
  3. Windows Forms の WinChart および ASP.NET の WebChart では方法が異なります。
    1. Win - x、y、両方に設定可能です

      ultraChart1.Axis.X.ScrollScale.Visible = true;

      ultraChart1.Axis.X.ScrollScale.Scale = .5;

    2. Web - コントロールが必要なスクロールバーの画像をコピーするようデザイン時に設定する必要があります。

      UltraChart1.EnableScrollBar = true;

  4. グラフィックス オブジェクトで pfd を渡す  RenderPdfFriendlyGraphics メソッドを呼び出します。
    注:Infragistics.Documents アセンブリを参照してください。 

      Report r = new Report();

      ultraChart1.RenderPdfFriendlyGraphics(r.AddSection().AddCanvas().CreateGraphics());

  5. コントロールが必要なスクロールバーの画像をコピーするようデザイン時に設定する必要があります。ゲージには、ラジアル、リニア、デジタルの 3 つの種類があります。UltraChart と同様、複数のゲージ種類のレイヤーを追加するが可能です。

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