【チャートエディタ画面の系列タブ】

【TeeChart ギャラリ】

【面系列の［系列］-〔形式〕タブ】

【チャートツール】　（Windows Forms 用）

【チャートツール】　（Web Forms 用）

【エクスポート】
チャートを画像（ビットマップ、メタファイル、JPEG、PNG、GIF、TIFF、PDF、SVG、EPS、およびネイティブのチャート形式）として、またデータとしてExcel、XML、HTML、CSV（テキスト）およびネイティブのチャート形式として簡単にエクスポートできます。 Flex コンパイラを介して Flash をビルドしてエクスポートします。 BLOB ストレージ用のストリームのエクスポート/インポート機能およびクライアント（ブラウザなど）への直接出力にも対応しています。

※4.1.2015.1216X（XはVisual Studioのバージョンにより異なります）より一部の関数名を以下のように変更させていただきました。

ここでは、関数のいくつかを紹介します。

【ヒストグラム関数】 ヒストグラム関数は、一つの系列の X あるいは Y 値からヒストグラムを作成します。

【S.A.R （Stop And Reversal）関数】 SAR はロングポジション（買い）とショートポジション（売り）に対して退去ポイントを作成するよう設計されています。ポジションの最初の段階で反動または変動を考慮しますが、変動が頂点に達すると（ロングポジションの場合は）上向きに、（ショートポジションの場合は）下向きに 加速します。

【モード関数】 モード関数は、ソース系列データの中で重複数の多い値を計算します。 Null ソース値を無視するためのオプションがあります。

【メディアン関数】 メディアン関数は、ソートされたソース値で中央に配置された値を計算します。 中央に配置された値が2つある場合、この関数はその2つの値の平均値になります。Null ソース値は、計算に含めたり含めないこともできます。

【相関関数】 同じトレンドに従ってソースの X 値と Y 値をどのように示すか -1 から 1 への係数値を計算します。

【分散関数】 分散関数は、分布の広がり具合を返します。 標準偏差関数は分散の平方根を表します。

【境界関数】 境界関数は、ソース系列のリミット（境界）を構成するソースポイントのサブセットを計算します。

【ダウンサンプリング関数】 ダウンサンプリング関数は、下記の方法で系列のポイント数を減らします。 + Max : ポイントのグループをグループの最大値に置換します。 + Min : ポイントのグループをグループの最小値に置換します。 + MinMax : ポイントのグループを2つのポイント（グループの最小値とグループの最大値）に置換します。 + MinMaxFirstLast : ポイントのグループを2つのポイント（グループの最小値と最大）に置換します。1つのグループの最後の値から次のグループの最初の値まで描画します。 + Average : ポイントのグループをグループの平均値に置換します。

【指数トレンド関数】 指数トレンド関数は、指数(e)の重み付けを使用すること以外はトレンド関数と同様です。

【MACD 関数】 MACD（Moving Average Convergence Divergence）関数は、金融チャートで使用されます。

【ボリンジャー関数】 ボリンジャーバンドは、金融インジケーターとして使用される特別な関数です。 これは、移動平均値（指数の有無）あるいは標準偏差を使用して2つの線を計算し描画します。

【R.S.I 関数】 R.S.I（Relative Strength Index）関数には、2種類の計算方法があります。 デフォルトは、データソースのキャンドル系列の始値と終値を使用して計算します。もう1つの方法は、終値のみ使用します。

【ADX 関数】 A.D.X ( Average Directional Change )は、金融のチャートアプリケーションで一般に使用されるインジケータ関数です。 ADX関数は、データソースとしてOHLC（キャンドル）を使用して3つのライン（DMI+/ADX/DMI-）を描画します。

TeeChart を ADO.NET データベースに接続する方法は、デザイン時にチャートエディタで行う方法と実行時にコードの記述による方法があります。
どんな系列でもチャートエディタで ADO.NET のテーブルやクエリーに接続でき、また全ての系列はいろいろな ADO.NET データベースを使用してあらゆるテーブルに接続できます。これにより柔軟にデータベースをチャートで使用できます。

全ての系列には DataSource プロパティがあり、全ての系列は、データベースの値（テーブルあるいはクエリー）を定義する「DataSource」プロパティを持ち、「YValues.DataMember」プロパティや「LabelMember」プロパティは、表示させるフィールドを指定します。

またデザイン時に実際のデータを見ながら開発ができます。

▼テーブルデータ全体のバインディング

Visual Studio .NET のツールボックスのデータタブから必要な DataAdapter を Form にドラッグするか、Visual Studio .NET のサーバーエクスプローラから必要なデータベースのテーブルなどをドラッグします。自動的に作成される DataAdapter オブジェクトの構成を必要に応じて変更します。

たとえば、次のようなテーブルを DataAdapter で構成したとします。

TeeChart のチャートエディタの系列タブの中のデータソースタブを選択して、下図のようにデータセットを設定します。

すると、下図のようなチャートがとても簡単に完成します。

▼1レコード単位（単一レコード）のバインディング

TeeChart は、データベースの単一レコードを簡単にチャートにすることができます。
たとえば、1年1レコードで月毎の売上データから構成されているデータをチャートに表示する場合です。

たとえば、次のようなテーブルを DataAdapter で構成したとします。

【1】単一レコードのデータ接続に、TeeChart のチャートエディタを利用した場合

TeeChartのチャートエディタのバインドしたい系列タブのデータソースタブで、データソース型を「単一レコード」に設定します。
単一レコードのチャートはデータセット、テーブルやデータビューをサポートします。

すると、下図のように Visual Studio .NET のデザイナ画面の下方にある「コンポーネントトレイ」に TeeChart の「singleRecordSource」が表示されます。

この「singleRecordSource」は、DataAdapter を経由したデータソースとチャートデータを関連付けるコードを自動的に追加してくれます。
たとえば、上記の例では次のようなコードが自動的に付加されプログラマの負担が軽減されます。また、バインドしているデータに応じたチャートがデザイン時に確認できるというメリットもあります。

【2】単一レコードのデータ接続を、コーディングだけで行う場合

この場合は、デザイナ上に空のチャートコンポーネント（tChart）を配置し、DataAdapter でデータソースを指定した、下図のようなシンプルなデザイン画面となります。

▼CurrencyManager オブジェクトを利用したレコードナビゲーション

チャートのデータソースをナビゲートしたり、更新するには、Visual Studio .NETのWindows フォームの CurrencyManager オブジェクトを使用すると簡単です。

たとえば、上図のようにデータレコードの前進や後退ボタンにチャートの表示を連動させるには、CurrencyManager オブジェクトを利用した次のようなコーディングをする方法があります。

    private DataSet sourceTableSet;
    private DataTable sourceTable;

    private void Form1_Load(object sender, System.EventArgs e)
    {
        sourceTableSet = new System.Data.DataSet();
        oleDbDataAdapter1.Fill(sourceTableSet);
        sourceTable = sourceTableSet.Tables[0];
        ConnectChartToTable();
    }

    private CurrencyManager myCurrencyManager;

    public void ConnectChartToTable()
    {
        myCurrencyManager = (CurrencyManager)this.BindingContext[sourceTable];
        singleRecordSource1.RecordCurrency=myCurrencyManager;
        tChart1[0].CheckDataSource();
    }

    private void MovePrevious()
    {
        if (myCurrencyManager.Position>0)
        {
            myCurrencyManager.Position=myCurrencyManager.Position-1;
            tChart1[0].CheckDataSource();
        }
    }

    private void MoveNext()
    {
        if (myCurrencyManager.Position<myCurrencyManager.Count-1)
        {
            myCurrencyManager.Position=myCurrencyManager.Position+1;
            tChart1[0].CheckDataSource();
        }
    }

    ・・・・・・・・・・・・・・・・・・・・・

    private void bnPrev_Click(object sender, System.EventArgs e)
    {
        MovePrevious();
        CheckButtons();
    }

    private void bnNext_Click(object sender, System.EventArgs e)
    {
        MoveNext();
        CheckButtons();
    }

    ・・・・・・・・・・・・・・・・・・・・・

TeeChart.NET を Web アプリケーションで利用するには、2つの方法があります。ツールボックスより TeeChartのWebChart コンポーネントを使用する方法と、WebChart コンポーネントをの代わりに ASP ページのスクリプトにコードでチャートを作成する方法です。以下に、簡単に紹介します。

▼WebChartコンポーネントを使用する方法

【実行例】

WebフォームではTeeChart.NETのWebChartコンポーネントを使用します。
TeeChart.NETをインストールするとツールボックスにWebChartが追加されます。

　【ツールボックス内のWebChartアイコン】

●フォームにチャートを追加

ツールボックスからWebChartコンポーネントを選択し、Webフォーム上にWebChartをドラッグしサイズを調整します。
チャートをマウスで右クリックし、メニューから「編集」を選択してチャートエディタを起動します。
チャートエディタでは、系列や軸および他のチャートの特性が追加、変更できます。

●チャートのデザインとプロパティのオプション

チャートエディタは実行時におけるチャートのほとんどの項目を設定できます。設定はWebフォームに保存されます。
WebChartエディタの使い方は、Windows フォーム用のチャートと一部のチャートツールを除いて同じです。

●イメージフォーマット (PictureFormatプロパティ)
デフォルトのフォーマットはPNGですが、プロパティウィンドウでPictureFormatプロパティを変更できます。

●File あるいは Session の設定 (TempChartプロパティ)

TempChartプロパティは、テンポラリチャートをどのように保存するかを設定します。2つの利用可能な設定があります。

【1】File
デフォルトではTeeChartをインストールすると、テンポラリファイルの位置および同等な仮想フォルダ名を備えたレジストリキーを作成します。

【2】Session
セッションにもテンポラリファイルを保存できます。

●インタラクティブチャートイベントの使用 (AutoPostback プロパティ)

AutoPostbackプロパティをTrueに設定するとインタラクティブイベントを使用できます。
プロパティブラウザのイベントリストから必要とするイベントをダブルクリックすると、イベントが設定されます。

系列をクリックした場合のイベントに、たとえば次のようなコードを記述します。

    private void WebChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.EventArgs e)
    {
        Steema.TeeChart.Chart tChart=((WebChart)sender).Chart;
        clickedX=s.CalcXPos(valueIndex);
        clickedY=s.CalcYPos(valueIndex);
        msgText="Series: "+tChart.Series.IndexOf(s).ToString()+"\n\rValue: "+s.YValues[valueIndex].ToString("#0.00");
    }

▼ASPスクリプトでチャートを作成する方法

【実行例】

WebChartコンポーネントの代わりにASPXページのスクリプトにコードでチャートを作成します。

●スクリプトにチャートを追加
【1】新しいASP.NET Webアプリケーションのプロジェクトを作成します。作成されたWebフォームページをクライアントページとして使用します。
【2】新しいWebフォームページを追加します。このページはサーバーサイドでチャートコードを処理するために使用します。

●処理のフロー

クライアントのブラウザページ(SeriesTypes.aspx)はイメージを含んでいます。
そのイメージのリンクはaspxのサーバースクリプト(ProcessChart.aspx)です。
クライアントページの「チャートの更新」ボタンを選択すると、必要な変数を渡してサーバースクリプトを呼び出して、クライアントページに動的なチャートを表示します。

●TeeChartのコーディング
サーバーサイドでTeeChartをコーディングするには、スクリプトページに「using Steema.TeeChart」を追加します。

（例）  using Steema.TeeChart;

TChartの変数を宣言して、Page_Load イベントの最初の部分でクラスを作成します。

（例）

    private TChart tChart;

    private void Page_Load(object sender, System.EventArgs e)
    {
       tChart=new TChart();      

      ・・・・・・・・・
    }

●チャートの取得
クライアントのパラメータによりチャートをサーバーから取得します。
チャートのリクエストはURLのクエリ・ストリングで送信できます。
サーバースクリプトを呼び出すためのコードはWebフォームのコードページで記述します。

（例）
        この例では、Webフォームの変数をクエリ・ストリングでImageUrlに設定します。

        private void sendInfo()
        {
            seriesType=DropDownList1.Items[DropDownList1.SelectedIndex].ToString();
            viewType=CheckBox1.Checked.ToString();
            Image1.ImageUrl="http://"+webServer  /*use webserver variable for server*/
                +"/TeeChartForNET/ASPStream/ProcessChart.aspx?seriestype="
                +seriesType+"&view="+viewType;
        }

サーバースクリプトはクライアントからクエリ・ストリングを受け取り、Page_Loadイベントでチャートは作成されます。
チャートはイメージとして作成され、クライアントへストリームとして戻されます。

（例）
        private void Page_Load(object sender, System.EventArgs e)
        {
            tChart=new TChart();
            tChart.AfterDraw += new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw);
 
            /* ...add Series and data, etc ... */
 
            //Process Get parameters received from client
            if (Request.QueryString["view"]=="False")
                tChart.Aspect.View3D=false;
            else
                tChart.Aspect.View3D=true;
 
            MemoryStream tempStream = new MemoryStream();
            tChart.Export.Image.PNG.Save(tempStream);
            Response.ContentType="Image/PNG";
            Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length);
            tempStream.Close();
        }

●イベントの追加
ASPアプリケーションでは、チャート作成後にイベントを追加して処理できます。

（例）
        private void Page_Load(object sender, System.EventArgs e)
        {
            tChart=new TChart();
            tChart.AfterDraw += new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw);
 
            /* ...add Series and data, etc ... */
 
            MemoryStream tempStream = new MemoryStream();
            tChart.Export.Image.PNG.Save(tempStream);
            Response.ContentType="Image/PNG";
            Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length);
            tempStream.Close();
        }
 
        private void tChart_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g)
        {
            string tmpStr="Copyright My Organisation "+DateTime.Now.ToString();
            g.TextOut(g.Chart.Width-(int)g.TextWidth(tmpStr)-5,g.Chart.Height-(int)g.TextHeight("H")-3,tmpStr);
        }

       AfterDrawイベントのコードはチャート作成時に実行されます。

【カスタムパレット】

複数の事前に定義されたカラーパレットを各チャートに割り当てることができます。
tmp.ApplyPalette(TChart1.Chart, cbDefault.SelectedIndex + 1)
さらに、カスタムカラーパレットを設定することもできます。

【拡張ラベル】

軸ラベルは「拡張」モードで表示できます。
これは、軸ラベルを2行あるいは2列で表示します。
TChart1.Axes.Left.Labels.Alternate = True

【軸のベベル】

4つのデフォルトのチャート軸の周りに「ベベル」を描画するためには、下記のコードが使用できます。
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
DrawBevelsAroundAxis(g, Steema.TeeChart.Drawing.BevelStyles.Lowered, 2)
End Sub

【カスタムな対数軸】

カスタム軸のラベルを使用して、非直線の軸スケールを構成するのは簡単です。
以下の例は左軸のために、どのようにカスタムな対数軸の増加量と副目盛を設定するかを示します。
この例では、各ラベル間に10個あたり4個の軸のラベルと2つ副目盛線を設定します。

【日付書式の奥軸】

奥軸(右)や奥軸(上)は、日付書式でラベルを表示するように設定できます。

【最初と最後のラベル】

Axis の「GetAxisDrawLabel」イベントは、複数の効果のために使用できます。
このイベントは、ラベルを表示する直前に発生します。
このサンプルは、下軸の最初と最後のラベルの異なるテキストの整列を設定する方法を表示します。

【等距離の軸】

このサンプルは、2つの軸を「等距離」で作成します。同じピクセル数のため、お使いのPCの画面サイズに従って同じスケールにするので、グリッド線は「長方形」の代わりに「正方形」を作成します。

【イメージベベル】

イメージベベルは標準のWindowsベベルの代わりであり、チャートに色々な構成が行えます。

【凡例スクロールバー】

凡例スクロールバーは、凡例の内側にスクロールバーを表示します。
スクロールバーは、Windowsコントロールではありませんので、色のカスタマイズなどが行えます。

【OnDrawSymbolイベント】

Legend.Symbolの「OnSymbolDraw」イベントは、たとえば、このサンプルのように国旗を表示しているように、凡例のシンボルの表示をカスタマイズするために使用できます。

【バーの3D 深さ】

縦棒系列や横棒系列の「DepthPercent」プロパティは、3D（Z 深さ）方向のバーサイズを制御します。
Bar1.DepthPercent = 50 ' 3D 深さの50%

【バーの目盛線】

縦棒系列や横棒系列は、各バーに「目盛線」を描画することができます。
各線は、TickLinesのペンを使用して各軸グリッド線の位置に描画します。
Bar1.TickLines.Visible = true

【マーカのシンボル】

系列マーカは、各マーカにシンボルを表示できます。
Bar1.Marks.Symbols.Visible = True
シンボルの色は、チャートの凡例と同じ色です。

【円の影】

楕円の影を描くプロシージャです。
円系列のようなサークル系列で役立ちます。ChartのOnBeforeDrawSeries イベントで下記のコードを使用しています。
DrawEllipseShadow( Chart1.Canvas, Chart1.Color, R )

【スライスの高さ】

各円系列あるいはドーナツ系列のスライスは、Chart1.Chart3DPercent（デフォルト：100%）のパーセンテージとして異なる高さを使用して描画することができます。
Donut1.SliceHeight(3) = 50 ' スライスのインデックス3, 3D 高さの50%を使用

【キャンドルの高値-安値ペン】

キャンドル系列には、キャンドルの枠のペンとは異なるペンで高値から安値まで線を描くための「HighLowPen」プロパティがあります。
Candle1.HighLowPen.Color = Color.Blue

【サーフェスのパレット】

サーフェスのパレットは、淡い、濃い、グレースケール、グレースケール反転、虹が設定できます。

【サーフェスのスムージング】

既存のセル間で値を補間（新しいセルを挿入する簡単なアルゴリズムを使用）することで少ない数のセルを持つサーフェス（およびタワー、等高線、などのような「3Dグリッド」系列）は滑らかにすることができます。

【リボン系列の補間】

簡単な式を使用して任意のX値のy=y(x)を計算することができます。コードは、リボン系列/折れ線系列を使用してX値がソートされた場合にのみ正しく動作します。

【壁の自動非表示】

WallのAutoHide プロパティがTrueの場合、ポイントが壁で覆われないように自動的に壁を非表示にします。
TChart1.Walls.Right.Visible = True
TChart1.Walls.Right.AutoHide = True

【EPS(Encapsulated PostScript) 形式へのエクスポート】

チャートをEPS形式（Encapsulated PostScript）へエクスポートするための、新しい PSCanvas.cs ユニットです。

【SVG(Scalable Vector Graphics)形式へのエクスポート】

実行時に、エクスポートダイアログあるいはコードを使用して、チャートをSVG(Scalable Vector Graphics)形式にエクスポートできます。

【ChartListBoxのラジオボタン】

ChartListBoxコントロールは、チェックボックスやラジオボタンを表示できます。
ラジオボタンの主な目的は、一度に1つの系列のみ表示させるためです。
ChartListBox1.CheckStyle = CheckBoxStyle.Radio

【ChartListBoxの編集】

F2キーを押すかメソッドを呼び出すと、選択された系列の ChartListBox のテキストの編集が行えます。

【ChartListBox の有効な機能】

ChartListBox コンポーネントには、エンドユーザーが系列型あるいは系列色を変更、系列をドラッグにより再ソート、系列を Del キーで削除することを制御するためのプロパティがあります。
例：ChartListBox1.EnableChangeColor = False
ChartListBoxコンポーネントは、系列がコードで追加あるいは削除された場合も連動します。

【チャートのグリッド】

簡単なコードを使用して、標準の .NETのDataGrid に TeeChart 系列をリンクすることができます。
グリッドは、キーボード上の標準のナビゲーションキーを使用してポイント値やテキストを追加、削除、編集することができます。

【TextSource】

TextSourceコンポーネントは、テキストから取得したポイントで系列を描画するために使用されます。テキストは、ファイルあるいはウェブの URL アドレスの文字列でポイントを取得することができます。

【XMLSource】

XMLSource コンポーネントは、チャート系列に XML 形式でデータをインポートします。
XMLSourceコンポーネントは、ウェブから XML データを検索し、そして自動的に系列を作成するために使用することができます。

【CrossTabSource】

CrossTabSource コンポーネントは、全てのデータセットに接続し、データベースのデータからグループやラベルフィールドや式（値の和あるいは計算）を使用して自動的に系列を作成します。

【系列グループ】

Series コンポーネントは、一度に複数の系列を表示/非表示するためにグループ付けができます。グループ付けが有効の場合、チャートエディタにはグループ名が表示されます。
TChart1.Series.AddGroup("First group")

【3D 散布の基準線】

系列の垂直軸により指定された全てのポイントから系列の垂直軸で指定されたベースフロアに線を描くための ChartPen です。
Points3D1.BaseLine.Visible = True

【カラーバンドのドラッグ】

カラーバンドツールは、開始あるいは終了の端をドラッグしてリサイズすることができます。
ColorBand1.ResizeStart = True
ColorBand1.ResizeEnd = True

【カラーバンドのクリック】

カラーバンドツールは、カラーバンドをクリックした際に発生する Click イベントや Clicked 関数を提供します。

【凡例のタイトル】

LegendのTitle プロパティは、凡例矩形の上部にテキストを表示します。
TChart1.Legend.Title.Visible = True

【マップ】
ESRI オープン標準マップ形式をサポートするマップシリーズのライブラリを提供します。

【ゲージ】
ゲージシリーズのタイプとインジケーター（動的ゲージ、円形、線形、数値、ノブ、または組み合わせ）。 TeeChart のゲージは、ダッシュボードアプリケーションのフォーマット、サイズ、色、および形を完全に制御できるように完全に設定可能です。

【インタラクティブズームとスクロール】
チャートは、マウスまたはコードを実行時に使用してスクロールおよびズームできます。 ズームとスクロール機能は、チャートのプロパティとイベントを使用してカスタマイズできます。

【チャート画像フィルタ】
25の画像フィルタのセットでチャートを美しくコントロールすることができます。

【高速でメモリ効率の良い処理】
チャートへの配列データの直接高速追加により、TeeChart .NET は非常に迅速な処理が可能となります。