TeeChart Pro .Net チュートリアル

TeeChart Pro .Net 3J チュートリアル

TeeChart Pro .Net 3J チュートリアル

© 2002-2008 Steema Software SL. All rights reserved.
Localized by Newtone


項目

チュートリアル

第1章 - はじめに
第2章 - チャートの表示プロパティ
第3章 - チャートのページング
第4章 - 軸の制御
第5章 - 凡例のデザイン
第6章 - 系列について
第7章 - 関数について
第8章 - ADO.NETのアクセス
第9章 - ASP.NETのアプリケーション
第10章 - ASP.NETのサンプル
第11- ズームとスクロール
第12章 - チャートのエクスポートとインポート
第13章 - チャートパネル上でのカスタム描画
第14章 - チャートの印刷
第15章 - 3Dチャート
第16章 - TeeChartの追加コンポーネント
第17章 - デザイン時および実行時に必要な条件
第18章 - TeeChartのツール類
第19章 - カスタムなシリアライズ


第1章 - はじめに

はじめに

チャートの作成
フォームへのチャートの貼り付け
チャートエディタ
チャートの系列

系列のデータのセット
ADO.NET
プログラムによるデータのセット

系列の選択

はじめに

ほとんどコーディングをせずに、チャートエディタで基本的なチャートの作成や実装を行うことができます。チャートはデータ系列の内容とは別に考えることができます。チャート、タイトル、凡例や3Dなどの外観をデータ系列とは別に定義することができます。従って、チャート全体の外観を再定義せずに、実行時に別のデータ系列を自由に追加したり削除したりすることができます。

チャートと系列は、チャートと系列間のインターフェイスであるチャート軸と一緒に動作します。系列にはデータがあり、その値がチャート軸の表示に反映されます。軸の外観、色、目盛の範囲やラベルのフォントなどは、データ系列を追加する前に定義できます。TeeChartは、チャートと系列の特性から最も最適なチャートを作成します。

(チャートエディタの日本語設定)
①新規プロジェクトの作成時、参照設定で.NETタブから「TeeChart Pro Languages」を選択してください。
下図のように「TeeChart Pro Languages」が表示されていない場合、「参照」ボタンを使用してTeeChartがインストールされているフォルダ内の「TeeChart.Languages.dll」を選択して追加してください。
②次に現在開かれているフォームのみ（プロジェクトは終了せずに）閉じて、もう一度開いてください。
以上でチャートエディタの日本語設定が完了です。チャート上で右クリックメニューにより、「編集」を選択しチャートエディタが日本語になっているか確認してください。

(チャートエディタによる複数の系列の追加)

(インターネット)
TeeChart Pro .NETはASP.NETに完全に対応していますので、Web フォームで使用するときでも、チャートの外観をみながらデザインできます。また実行時に出力できるイメージフォーマットとして JPEG, GIF, PNG, TIFF, BMP や EMF を指定できます。詳しくは 第9章 を参照してください。

チャートの作成

フォームへのチャートの貼り付け
TeeChartのインストールが成功すると、Visual Studio .NETのプログラミング環境のツールボックスに下記のTeeChartのアイコンが追加されます。

ツールバーのアイコンをクリックして、フォーム上にTChartをドラッグしサイズを調整して配置してださい。軸やタイトルなど、基本的なチャートの要素からなるTeeChartが表示されます。このTeeChart上でマウスの右クリックをし、メニューから「編集」を選択してください。

TeeChartの他のパレットコンポーネントについては、第16章を参照してください。

チャートエディタ
チャートエディタでは、使用するチャートのプロパティの設定を行うことができます。

新しい系列を追加するには「追加」ボタンをクリックして、系列ギャラリから系列のタイプを選択してください。選択した系列のタイプを変更したい場合は、エディタの最初の画面の「変更」ボタンを選択します。（系列データの内容が異なる場合は、変更できない場合があります。）

チャートの系列

チャートギャラリには5つのタブがあります。

・標準：
一般的に使用される系列です。

・統計：
統計処理に適した系列です。

・金融：
金融処理に適した系列です。
・拡張：
カスタム系列のサンプルです。
・3D：
主にX,Y,Z軸からなる系列です。
・その他：
その他の系列です。

ここでは、縦棒系列を選択します。

系列のデータのセット

ADO.NET
チャートエディタを使用して ADO.NET をチャートに直接マッピングする方法を下記にしめします。

この例では、TeeChart.mdbのアクセス・データベースに縦棒系列を接続します。以下の手順に従ってください。

(1)VS.NET ツールボックスのデータタブから、TeeChartのあるWinForm上にOleDbDataAdapterをドラッグし、配置します。

(2)「データアダプタ構成ウイザードダイアログ」が表示されるので、ここで、「次へ」ボタンをクリックします。

(3)「新しい接続」ボタンをクリックします。

(4)データリンクプロパティダイアログのプロバイダタブを選択します。

（*注意 - ウィザードの外観はFramework間でわずかに異なります）

(5)Microsoft Jet 4.0 OLE DB Provider」を選択して「接続」タブを選択してください。

(6)TeeChartのインストールフォルダのSample dataの「TeeChart.mdb」を下記のように設定してください。。

(6)「接続のテスト」ボタンをクリックし、接続の確認を行って「OK」ボタンをクリックしてください。

(7)「データアダプタ構成ウイザードダイアログ」の「次へ」ボタンをクリックしてください。

(8)「SQLステートメントの使用」にチェックがあるのを確認し「次へ」ボタンをクリックしてください。

(9)「クエリビルダ」のボタンをクリックし「Employee」を選択し、「追加」ボタンをクリックし次に「閉じる」ボタンをクリックしてください。

(10)「すべての列」にチェックを「OK」ボタンをクリックしてください。

(11)チャートエディタを起動し、「系列」タブの「データソース」タブを選択し、下記のように設定してください。

(12)設定したデータのチャートが下記のように表示されます。

詳しくは、第8章を参照してください。

プログラムによるデータのセット
チャートに追加された系列は、デザイン時にランダムなデータを表します。しかし実行時には、系列にデータが設定されていない場合は空の状態となります。下記はコマンドボタンに応答してチャートに値を設定するコード例です。

[C#.NET]
private void button1_Click(object sender, System.EventArgs e)
        {
            bar1.Add(3,"Pears",Color.Red);
            bar1.Add(4,"Apples",Color.Blue);
            bar1.Add(2,"Oranges",Color.Green);
        }

[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Bar1.Add(3, "Pears", Color.Red)
        Bar1.Add(4, "Apples", Color.Blue)
        Bar1.Add(2, "Oranges", Color.Green)
End Sub
プロジェクトを実行しコマンドボタンを押すと、3つの新しいバーがチャートに表示されます。

シリーズは、方法が25の過負荷、どれが3つの変数を受理するかの、値、テキストおよび色を持っていると付け加えます。Add方法は、このようにラベル軸(この場合X軸)の上の値の等しい間隔を仮定します。あなたのデータが2つの変数を含んでいる場合、Add方法の過負荷の別のものを使用し�ﾄもよい。あなたのプロジェクトに別のボタンを加えて、それにこのコードを入れてください。プロジェクトを実行して、このコードを使用して、ポイントを加えてください:
系列のAddメソッドには25個のオーバーロードメソッドがあります。このうち7番目のメソッドは値、テキストと色の引数を執拗とします。この場合のX軸のラベルは等間隔で表示されます。

[C#.NET]
private void button2_Click(object sender, System.EventArgs e)
        {
            Random rnd = new Random();
            if(bar1.Count > 0)
            {
                //X軸の値の増加と新しいランダムなポイントの追加
                bar1.Add((bar1.XValues.Last + rnd.Next(10)), ((bar1.YValues.Last/(bar1.YValues.Last - 1)) + rnd.Next(10)),"Lemons",Color.Yellow);
            }
            else
            {
                //新しいランダムなポイントの追加
                bar1.Add(1,rnd.Next(10),"Lemons",Color.Yellow);
            }
        }

[VB.NET]
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        Dim rnd As Random
        If (Bar1.Count > 0) Then
            'X軸の値の増加と新しいランダムなポイントの追加
            Bar1.Add((Bar1.XValues.Last + rnd.Next(10)), ((Bar1.YValues.Last / (Bar1.YValues.Last - 1)) + rnd.Next(10)), "Lemons", Color.Yellow)
        Else
            '新しいランダムなポイントの追加
            Bar1.Add(1, rnd.Next(10), "Lemons", Color.Yellow)
        End If
End Sub

系列の選択

最後のサンプルコードはランダムなX,Yの値を生成します。X軸のポイント間の値は一定ではなく、バーがオーバラップすることがあり、これはアプリケーションによっては良い場合もあれば、悪い場合もあります。チャートエディタを使用して、系列タイプを「リボン」系列に変更すると、他のスタイルで2つの変数のデータを表示します。もし3以上の変数のデータを表示する場合は、他に最適な系列のタイプがあります。


第2章 - チャートの表示プロパティ

第2章 - チャートの表示プロパティ

チャートの表示プロパティはチャートの外観を設定します。また、チャートの背景色やタイトル、位置、余白、枠、ベベル、背景のイメージ、フレームと軸の表示、ペンの色と大きさ、3D、壁などを設定するプロパティやメソッドがあります。
デザイン時や実行時にチャートエディタでほとんどのプロパティを設定することができます。また、実行時にプログラミングで設定することもできます。チャートの外観の設定は下記のグループに分類されます。

一般
軸
タイトル
凡例
パネル
ページ
壁
3D

この他にも、系列の色、マーカ、軸、グリッドの表示やラベルを設定するプロパティがありますが、これらについては別のチュートリアルで説明します。

一般的なチャートのプロパティ
フォームに新しいチャートを配置すると、背景がグレーで3Dのパネルが表示されます。また2つの壁（下側と左側）とフレーム（フレームはチャートの有効な表示領域です）やデフォルトのチャートのタイトル（TeeChart）が表示されます。
チャート上でマウスの右ボタンをクリックして「編集」を選択しチャートエディタを開いてください。最初のページは空の系列ページです（このページはここでは使用しません）。「一般」タブを選択してください。

一般

一般ページには、次の3つのセクションがあります。

ズーム
スクロール
カーソル

「ズーム」と「スクロール」については後のチュートリアルで説明します。

軸

軸の制御は後のチュートリアルで詳しく説明しますが、ここでは軸とフレームの基本的な表示について説明します。
チャートの「軸」タブを選択してください。

チャートには左、上、右、下、奥（右）、奥（上）の6つの軸があります。チャートフレームはチャートの描画領域の周りを表し、データの無い領域です。奥軸はデフォルトで非表示となっています。他の全ての軸は系列がチャートに追加されると表示されます（デフォルトでは左と下の軸）。カスタム軸は+、-ボタンで追加と削除ができ、これを表示するには(他の軸についても )、系列を軸に関連付けしなければなりません。
軸とフレームの表示に関する重要なプロパティを以下に説明します。

表示
このチェックボックスは全ての軸の表示あるいは非表示の設定を行います。背面のフレームが表示された状態では、軸が非表示になってもチャートの周囲は表示されたままです。スケールタブの表示プロパティは個々の軸の設定を行います。

一括して全軸の表示を行う例
 [C#.Net]
tChart1.Axes.Visible = true;

[VB.Net]
TChart1.Axes.Visible = True

個々の軸の表示を行う例
[C#.Net]
tChart1.Axes.Left.Visible = true;

[VB.Net]
TChart1.Axes.Left.Visible = True

タイトル

このタイトルのページではチャートのタイトルやヘッダ、フッターの設定を行います。

スタイル
タイトルのコンボボックスからタイトル、サブタイトル、フッター、サブフッターの1つを選択して、テキストボックスにテキストを入力してください（複数の行も入力できます）。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Header.Text = "My Header Text";

[VB.Net]
TChart1.Header.Text = "My Header Text"

配置
タイトルやフッターの配置はチャート全体のパネルに対してではなく、チャートの領域に対して設定されます。チャートの領域は、チャートの表示領域と軸のラベルと凡例からなっています。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Header.Alignment = StringAlignment.Far;

[VB.Net]
TChart1.Header.Alignment = StringAlignment.Far

位置
デフォルトの位置を変更する場合はカスタムにチェックを設定し、タイトルやフッターの位置を調整してください(チャートの左上からピクセル単位で設定します)。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Header.CustomPosition = true;
tChart1.Header.Top = tChart1.Header.Top + 10;

[VB.Net]
TChart1.Header.CustomPosition = True
TChart1.Header.Top = TChart1.Header.Top + 10

形式
色や枠、パターン等の設定を行います。
例えば、下記はタイトルの背景のパターンを設定するダイアログです。

尚、この背景のデフォル設定は透明になっているので、非表示です。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Header.Transparent = false;
tChart1.Header.Brush.Style = System.Drawing.Drawing2D.HatchStyle.Cross;

[VB.Net]
TChart1.Header.Transparent = False
TChart1.Header.Brush.Style = System.Drawing.Drawing2D.HatchStyle.Cross

テキスト
テキストの表示に関する設定を行います。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Header.Font.Name = "Verdana";
tChart1.Header.Font.Bold = true;

[VB.Net]
TChart1.Header.Font.Name = "Verdana"
TChart1.Header.Font.Bold = True

影
ヘッダやフッタの影の設定を行います。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Header.Shadow.Visible = true;
tChart1.Header.Shadow.Color = Color.Chartreuse;

[VB.Net]
TChart1.Header.Shadow.Visible = True
TChart1.Header.Shadow.Color = Color.Chartreuse
ベベル
ヘッダやフッタのベベルの設定を行います。

凡例

この凡例ページでは凡例の位置や色、フォント、フレーム、影など外観に関するを設定を行います。尚、凡例については後で詳しく説明します。

スタイル
表示、非表示の設定や、表示のスタイルに関する設定を行います。

実行時：
プログラムによる設定例です。
[C#.Net]
private void checkBox1_CheckedChanged(object sender, System.EventArgs e)
        {
            if(checkBox1.Checked)
            {tChart1.Legend.Visible = true;}
            else
            {tChart1.Legend.Visible = false;}
        }

[VB.Net]
Private Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
        If CheckBox1.Checked Then
            TChart1.Legend.Visible = True
        Else
            TChart1.Legend.Visible = False
        End If
End Sub
分割線
凡例の項目間の線の描画に関する設定を行います。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Legend.DividingLines.Visible = true;
tChart1.Legend.DividingLines.Color = Color.Blue;

[VB.Net]
TChart1.Legend.DividingLines.Visible = True
TChart1.Legend.DividingLines.Color = Color.Blue

位置
凡例をデフォルトの位置に設定したり、自由に設定することができます。また凡例の項目の表示順はその表示位置（上下左右）によって変わります。
例：ResizeChart
これは、凡例を描画する場合、チャートと凡例が重なって描画しないようにチャートを自動的にリサイズするかどうかを定義します。これにより凡例はチャート領域内に表示されます。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Legend.ResizeChart = true;

[VB.Net]
TChart1.Legend.ResizeChart = True

プログラムによる凡例の上位置の設定例です。

[C#.Net]
tChart1.Legend.CustomPosition = true;
tChart1.Legend.Top = 5;

[VB.Net]
TChart1.Legend.CustomPosition = True
TChart1.Legend.Top = 5

シンボル
凡例のシンボルを設定します。

幅
凡例の文字と併せて表示される四角形の幅を設定します。
実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
tChart1.Legend.Symbol.Width = 30;

[VB.Net]
TChart1.Legend.Symbol.WidthUnits = Steema.TeeChart.LegendSymbolSize.Pixels
TChart1.Legend.Symbol.Width = 30

形式
凡例の色や枠、パターン等の設定を行います。

テキスト
凡例のテキストの表示に関する設定を行います。

実行時：
プログラムによるフォントと色の設定例です。

[C#.Net]
private void button1_Click(object sender, System.EventArgs e)
        {
            Legend legend1;
            legend1 = tChart1.Legend;
            legend1.Color = Color.Blue;
            legend1.Font.Name = "Times New Roman";
            legend1.Font.Color = Color.Yellow;
        }

[VB.Net]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        With TChart1.Legend
            .Color = Color.Blue
            .Font.Name = "Times New Roman"
            .Font.Color = Color.Yellow
        End With
End Sub

グラデーション
凡例の表示領域にグラデーションを設定します。

影
凡例の表示領域に影を設定します。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Legend.Shadow.Color = Color.Cyan;
tChart1.Legend.Shadow.Width = 4;

[VB.Net]
TChart1.Legend.Shadow.Color = Color.Cyan
TChart1.Legend.Shadow.Width = 4
ベベル
内側や外側のベベルの色やサイズの設定を行います。

パネル

ここのページではチャートの外観を設定します。フルカラーのモニターがパネルのグラデーション効果を確認するために最適です。

枠
ベベルと枠線を一緒に設定すると、様々な3D効果が設定できます。

背景
色
色：設定した色でチャートの背景を塗りつぶします。背景のグラデーションや画像を設定するとこの背景の塗りつぶしは無効になります。また、背景色を設定するとチャートのフレームの中のパネルの色だけが変わります。

背景イメージ
背景イメージとしてビットマップファイルを選択することができます。背景イメージを選択するために、（パターンボタンから）ハッチブラシエディタを使用して、5つの異なったラップモードがあります。

実行時：
背景イメージを設定するプログラム例です。

[C#.Net]
tChart1.Panel.Brush.WrapMode = System.Drawing.Drawing2D.WrapMode.TileFlipXY;
tChart1.Panel.Brush.LoadImage(@"C:\...\MyImage.jpg");

[VB.Net]
TChart1.Panel.Brush.WrapMode = System.Drawing.Drawing2D.WrapMode.TileFlipXY
TChart1.Panel.Brush.LoadImage("C:\...\MyImage.jpg")
余白
余白は、チャート領域とチャート枠との間のサイズを定義します。これは、チャートパネルの全体サイズの割合として設定します。
余白ボックスのスピンボックスを使用して、各余白の変更した効果をデザイン時に確認することができます。

実行時：
HScrollbarを使用して左側余白を設定するプログラム例です。

TChart1.Panel.MarginTop
TChart1.Panel.MarginLeft
TChart1.Panel.MarginRight
TChart1.Panel.MarginBottom

[C#.Net]
private void Form1_Load(object sender, System.EventArgs e)
        {
            bar1.FillSampleValues(10);
            hScrollBar1.Value = Convert.ToInt32(tChart1.Panel.MarginLeft);
            hScrollBar1.Maximum = 80;
        }

private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
        {
            tChart1.Panel.MarginLeft = Convert.ToDouble(e.NewValue);
        }

[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Bar1.FillSampleValues(10)
        HScrollBar1.Value = TChart1.Panel.MarginLeft
        HScrollBar1.Maximum = 80
End Sub

Private Sub HScrollBar1_Scroll(ByVal sender As Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles HScrollBar1.Scroll
        TChart1.Panel.MarginLeft = e.NewValue
End Sub

グラデーション
グラデーションを設定するには、グラデーションの表示にチェックし、「開始色」、「中央色（任意）」と「終了色」および「方向」、「透明度」等を設定してください。グラデーションはチャートパネル全体に効果があります。

実行時：
プログラムによる設定例です。

[C#.Net]
tChart1.Panel.Gradient.Visible = true;
tChart1.Panel.Gradient.StartColor = Color.Red;
tChart1.Panel.Gradient.MiddleColor = Color.White;
tChart1.Panel.Gradient.EndColor = Color.Blue;
tChart1.Panel.Gradient.Direction = System.Drawing.Drawing2D.LinearGradientMode.ForwardDiagonal;

[VB.Net]
With TChart1.Panel
         .Gradient.Visible = True
         .Gradient.StartColor = Color.Red
         .Gradient.MiddleColor = Color.White
         .Gradient.EndColor = Color.Blue
         .Gradient.Direction = System.Drawing.Drawing2D.LinearGradientMode.ForwardDiagonal
End With

影
チャートのパネルのサイズ、色パターンや透明度を設定します。

ページ

チャート1ページあたりのポイント数を設定します。

壁

チャートの壁に関する設定を行います。壁には、左、右、下と背面の4つがあります。

壁の特性は、TChart1.Wallsプロパティをし用意してアクセスできます。

色
壁の色を設定します。

枠
壁の枠線を設定します。

各壁にたいして上記の項目が設定できます。

パターン
各壁を描画するブラシのパターンを設定します。

グラデーション
各壁のグラデーションを設定します。

3D

3次元には下記のように多くの機能があります。

3D
チャートを2次元または3次元に設定します。

3D %
3次元の深さを設定します。

実行時：
チェックボックスと水平のスクロールバーを使用した設定例です。

[C#.Net]
private void checkBox1_CheckedChanged(object sender, System.EventArgs e)
        {
            if(checkBox1.Checked)
            {
                tChart1.Aspect.View3D = true;
                hScrollBar1.Enabled = true;
            }
            else
            {
                tChart1.Aspect.View3D = false;
                hScrollBar1.Enabled = false;
            }
        }

private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
        {
            tChart1.Aspect.Chart3DPercent = e.NewValue;
        }

[VB.Net]
Private Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
        If CheckBox1.Checked Then
            TChart1.Aspect.View3D = True
            HScrollBar1.Enabled = True
        Else
            TChart1.Aspect.View3D = False
            HScrollBar1.Enabled = False
        End If
End Sub

Private Sub HScrollBar1_Scroll(ByVal sender As Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles HScrollBar1.Scroll
        TChart1.Aspect.Chart3DPercent = e.NewValue
End Sub

直交オプションを無効に設定すると、「Windows Native 3D」モードが有効になり、チャートを左右および上下方向に回転したり、移動したりできます。ズームオプションはチャート全体をズームイン、ズームアウトすることができます。データ系列のチャート内でのズームは実行時でも可能です。
遠近効果は、部屋の中を見るように距離感をセットすることができます。3Dオプションの詳細につきましては、第15章 - 3Dチャートを参照してください。


第3章 - チャートのページング

チャートのデータソースが、チャートのスクリーンに表示できない程大きなデータを含んでいる場合、チャートをページ単位に分割できます。この分割は、チャートエディタでの設定やプログラミングで行うことができます。

チャートエディタによるページング
コードによるページング

チャートエディタによるページング

ページのサイズはチャートエディタで定義できます。プロジェクトにページの設定ボタンを追加し、このボタンが押されたら、チャートエディタを有効にしてエディタによりページを変更することができます。

デザイン時にチャートエディタの「ページ」を選択してください。

「1ページのポイント数」ボックスにチャートの1ページに表示したい系列のポイント数を設定してください。実行時にチャートエディタが表示されると、ナビゲーションボタンはハイライトになります。尚、ADO.NETのデータソースに接続していると、デザイン時に、ページングの様子を確認できます。

プログラムによる設定例です。
実行時にチャートエディタで「ページ」プロパティにアクセスするには「ShowEditor」を利用してください。
[C#.NET]
tChart1.ShowEditor();

[VB.NET]
TChart1.ShowEditor()

コードによるページング

「Pageクラス」によって「ページ」プロパティとメソッドが有効になります。

チャートのページングを行うために必要な手順は

  • 1. 1ページあたりのポイントの設定

    • ページに表示されるポイント数を指定するには「MaxPointsPerPage」を設定してください。

    [C#.NET]
tChart1.Page.MaxPointsPerPage = 10;
[VB.NET]
TChart1.Page.MaxPointsPerPage = 10
  • 2. チャートのフォームにナビゲーションボタンを追加してください。

    • 最初のページ

    [C#.NET]
tChart1.Page.Current = 1;
[VB.NET]
TChart1.Page.Current = 1

ページの送り
    [C#.NET]
tChart1.Page.Next();
[VB.NET]
TChart1.Page.Next()

ページの戻り
    [C#.NET]
tChart1.Page.Previous();
[VB.NET]
TChart1.Page.Previous()

最後のページ
    [C#.NET]
tChart1.Page.Current = tChart1.Page.Count;
[VB.NET]
With TChart1
  .Page.Current = .Page.Count
End With
  • 3. 最後のページの動作の指定

    • 最後のページのスケーリングを選択できます。（最後のページのポイント数が少ない場合。）

    [C#.NET]
tChart1.Page.ScaleLastPage = false;   (default = true)
[VB.NET]
TChart1.Page.ScaleLastPage = False  (default = True)
  • 4. ページ番号の表示
    • [C#.NET]
private void Form1_Load(object sender, System.EventArgs e)
{
    Bar bar1 = new Bar();
    PageNumber pageNumber1 = new PageNumber();
    tChart1.Series.Add(bar1);
    tChart1.Tools.Add(pageNumber1);
    bar1.FillSampleValues(100);
    tChart1.Page.MaxPointsPerPage = 10;
}

private void button1_Click(object sender, System.EventArgs e)
{
    tChart1.Page.Previous();
}

private void button2_Click(object sender, System.EventArgs e)
{
    tChart1.Page.Next();
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Dim Bar1 As New Steema.TeeChart.Styles.Bar()
    Dim PageNumber1 As New Steema.TeeChart.Tools.PageNumber()
    TChart1.Series.Add(Bar1)
    TChart1.Tools.Add(PageNumber1)
    Bar1.FillSampleValues(100)
    TChart1.Page.MaxPointsPerPage = 10
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    TChart1.Page.Previous()
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
    TChart1.Page.Next()
End Sub


第4章 - 軸の制御

TeeChart Proには軸の設定に関する多くの機能があります。

軸の制御
スケール
増加量
タイトル
ラベル
目盛
軸の位置

軸の追加
軸のコピー
複数の軸

軸のイベント
OnClickAxis
OnGetAxisLabel
OnGetNextAxisLabel

軸の制御

Scales
系列データをチャートに追加すると軸のスケールは自動的に設定されます。軸プロパティを用いて、デザイン時や実行時にデフォルト値を変更できます。

非日付データ
新しい系列を追加すると、チャートエディタの軸ページのスケールセクションには「自動」が選択され、他のオプションはグレーで表示されます。また、全ての値は数値で表示されます。

日付データ
「系列」の「一般」ページで、系列が「日付書式」の場合、軸ページのスケールセクションには「自動」が選択され、他のオプションはグレーで表示されます。また、値は日時で表示されます。

「自動」はデータに合わせて一番最適な軸のスケールの範囲を設定します。「自動」の設定を解除すると、「軸」ページの「スケール」セクションのオプションの設定が有効になり、軸の値を変更できます。この時変更する軸のチェックボックスを選択しておく必要があります。尚、チェックボックスは、このページの左側にあります。

チャートに「リボン」を選択し、以下のコードを入力してください。
[C#.NET]
Random rnd = new Random();
for(int i = 0; i <= 40; ++i)
{line1.Add(Convert.ToDouble(i),rnd.Next(100),Color.Red);}

[VB.NET]
Dim i As Integer
For i = 0 To 40
   Line1.Add(Convert.ToDouble(i), Rnd() * 100, Color.Red)
Next i

40個の乱数の値をもつ直線の系列を表示するコードです。デザイン時にチャートエディタを実行し、「軸」ページの「スケール」セクションの「自動」の設定を解除してください。そうすると、軸スケールの最大値と最小値を設定できます。プログラムを再度実行すると設定した軸の値に応じて、値を表示します。マウスの右ボタンを押しながら、スクロールすれば残りの値を見ることができます。

コードによる軸スケールの設定例
このコードで実行時に最大値と最小値を変更できます。

[C#.NET]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Automatic = false;
bottomAxis.Maximum = 36;
bottomAxis.Minimum = 5;

[VB.NET]
With TChart1.Axes.Bottom
   .Automatic = False
   .Maximum = 36
   .Minimum = 5
End With

最大値と最小値の軸のスケール値を別々に「自動」に設定できます。
[C#.NET]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.AutomaticMaximum = true;
bottomAxis.AutomaticMinimum = false;
bottomAxis.Minimum = 5;

[VB.NET]
With TChart1.Axes.Bottom
   .AutomaticMaximum = True
   .AutomaticMinimum = False
   .Minimum = 5
End With

増加量
軸の間隔をカスタマイズすることができます。「軸」ページの「スケール」セクションの「増加量」を選択し増加量を設定してください。実行時には下記のコードで設定できます。
[C#.NET]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Increment = 20;

[VB.NET]
With TChart1.Axes.Bottom
   .Increment = 20
End With
日時データ

データが日時データの場合（「系列」の「一般」ページで系列を日時データに設定できます。）、チャートの「軸」ページの「スケール」セクションで日時の範囲が表示されます。「増加量」のコンボボックスから値を選択してください。

[C#.NET]
Random rnd = new Random();
DateTime today = DateTime.Today;
TimeSpan oneDay = TimeSpan.FromDays(1);
line1.XValues.DateTime = true;
for(int i = 1; i <= 25; ++i) {
     line1.Add(today,rnd.Next(100),Color.Red);
     today += oneDay;
}

[VB.NET]
Dim i As Integer
Dim Today As DateTime = DateTime.Today
Dim OneDay As TimeSpan = TimeSpan.FromDays(1)
Line1.XValues.DateTime = True
For i = 1 To 25
     Line1.Add(Today, Rnd() * 100, Color.Red)
     Today = Today.Add(OneDay)
Next

実行時での増加量の設定
[C#.NET]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Increment = Steema.TeeChart.DateTimeSteps.TwoDays;

[VB.NET]
With TChart1.Axes.Bottom
   .Increment = Steema.TeeChart.DateTimeSteps.TwoDays
End With

軸の日付ラベルの詳細は、「AxisLabels.ExactDateTime」プロパティを参照してください。

（ノート）
軸のラベルが多くなっても、TeeChartはラベルの「Separation」プロパティのセットによってオーバーラップしないように設定できます。これにより、ラベルの数が非常に多い場合、TeeChartは最適な表示を行います。ラベルの角度や区分を設定することにより、必要なラベルを表示できます。詳しくは「AxisTitle」クラスを参照してください。

タイトル
タイトルは「軸」ページの「タイトル」セクションで設定します。ここで、タイトルのテキストやフォント、影を設定できます。テキストの角度やサイズも設定できます。

ラベル
「AxisLabels」クラスを参照してください。

（ノート）
軸のラベルが多くなっても、TeeChartはラベルの「Separation」プロパティのセットによってオーバーラップしないように設定できます。これにより、ラベルの数が非常に多い場合、TeeChartは最適な表示を行います。ラベルの角度や区分を設定することにより、必要なラベルを表示できます。詳しくは「AxisLabels.Angle」プロパティを参照してください。

（ラベルのフォーマット）
軸ラベルには数値や日付のフォーマットを設定できます。「軸」ページの「ラベル」セクションには「値の書式」があります。データが日時データの場合、このフィールドの名前は「日付書式」に変更されます。

プログラムによる「値の書式」の設定例です。

[C#.NET]
tChart1.Axes.Bottom.Labels.ValueFormat = "#,##0.00;(#,##0.00)";

[VB.NET]
With TChart1.Axes.Bottom
   .Labels.ValueFormat = "#,##0.00;(#,##0.00)"
End With

プログラムによる「日付書式」の設定例です。

[C#.NET]
tChart1.Axes.Bottom.Labels.DateTimeFormat = "dddd/mmmm/yyyy";

[VB.NET]
With TChart1.Axes.Bottom
   .Labels.DateTimeFormat = "dddd/mmmm/yyyy"
End With

（複数行のラベル）

軸ラベルは1行表示の他に複数行の表示もできます。「LineSeparator」を用いて複数行にできます。

プログラムによる設定例です。

[C#.NET]
bar1.Add(1234, "New" + Steema.TeeChart.Texts.LineSeparator + "Cars", Color.Red);
bar1.Add(2000, "Old" + Steema.TeeChart.Texts.LineSeparator + "Bicycles", Color.Red);
tChart1.Panel.MarginBottom = 10;

[VB.NET]
Bar1.Add(1234, "New" + Steema.TeeChart.Texts.LineSeparator + "Cars", Color.Red)
Bar1.Add(2000, "Old" + Steema.TeeChart.Texts.LineSeparator + "Bicycles", Color.Red)
TChart1.Panel.MarginBottom = 10
（日時ラベルのサンプル）
下の例は下側の軸のラベルを2つの部分で表示し、最初の部分は月日を表し、次の部分は時間を表します。

Feb-28 Mar-1 ..
2003 2003 ..

[C#.NET]
bar1.Add(DateTime.Parse("28/2/2003"), 100, Color.Red);
bar1.Add(DateTime.Parse("1/3/2003"), 200, Color.Red);
bar1.Add(DateTime.Parse("2/3/2003"), 150, Color.Red);
bar1.XValues.DateTime = true;
tChart1.Axes.Bottom.Labels.DateTimeFormat = "mm/dd hh:mm";
tChart1.Axes.Bottom.Labels.MultiLine = true;
tChart1.Panel.MarginBottom = 10;

[VB.NET]
Bar1.Add(DateValue("28/2/2003"), 100, Color.Red)
Bar1.Add(DateValue("1/3/2003"), 200, Color.Red)
Bar1.Add(DateValue("2/3/2003"), 150, Color.Red)
Bar1.XValues.DateTime = True
TChart1.Axes.Bottom.Labels.DateTimeFormat = "mm/dd hh:mm"
TChart1.Axes.Bottom.Labels.MultiLine = True
TChart1.Panel.MarginBottom = 10
「Labels.MultiLine」をTrueにセットすると、軸はラベルを自動的に空白で区切って複数の行に設定します。

1行目　－　月/日
2行目　－　時:分

また、実行時には、「OnGetAxisLabel」イベントで、ラベルを複数行に設定できます。

[C#.NET]
private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e)
{
    string myLabelText = e.LabelText;
    tChart1.Axes.Bottom.Labels.SplitInLines(ref myLabelText, " ");
    e.LabelText = myLabelText;
}

[VB.NET]
Private Sub TChart1_GetAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetAxisLabelEventArgs) Handles TChart1.GetAxisLabel
    Dim myLabelText As String
    myLabelText = e.LabelText
    TChart1.Axes.Bottom.Labels.SplitInLines(myLabelText, " ")
    e.LabelText = myLabelText
End Sub

「SplitInLines」メソッドは「LabelText」のスペースをセパレータに設定します。

軸の「Labels.Angle」プロパティは複数行のラベルにも使用できます。

（軸ラベルのカスタマイズ）

軸のイベントを使用してラベルの制御ができます。このイベントで個々の軸をアクティブや非アクティブに設定することができます。下のサンプルは、個々のラベルの文字列「Period」にチャートのインデックス番号を付加します。

[C#.NET]
private void button1_Click(object sender, System.EventArgs e)
{
    bar1.FillSampleValues(20);
    tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Mark;
}

private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e)
{
    if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
    {e.LabelText = "Period " + Convert.ToString(e.ValueIndex);}
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Bar1.FillSampleValues(20)
    TChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Mark
End Sub

Private Sub TChart1_GetAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetAxisLabelEventArgs) Handles TChart1.GetAxisLabel
    If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
        e.LabelText = "Period " & e.ValueIndex
    End If
End Sub
軸イベントでのラベルのカスタマイズに付いての詳細は「Axis イベント」を参照してください。

（対数ラベル）

通常の対数ラベルは下記の方法で設定できます。

[C#.NET]
private void button1_Click(object sender, System.EventArgs e)
{
    Random rnd = new Random();
    Steema.TeeChart.Axis leftAxis = tChart1.Axes.Left;
    tChart1.Aspect.View3D = false;
    bar1.Marks.Visible = false;
    for(int i = 0; i <= 100; ++i)
    {bar1.Add(rnd.Next(100) * i);}
    leftAxis.LogarithmicBase = 10;
    leftAxis.Logarithmic = true;
    leftAxis.SetMinMax(0, 10000);
    leftAxis.Labels.ValueFormat = "#e+0"; //exponential format
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim i As Integer
    TChart1.Aspect.View3D = False
    Bar1.Marks.Visible = False
    For i = 0 To 10000 Step 100
        Bar1.Add(Rnd() * i)
    Next
    With TChart1.Axes.Left
        .LogarithmicBase = 10
        .Logarithmic = True
        .SetMinMax(0, 10000)
        .Labels.ValueFormat = "#e+0" ' exponential format
    End With
End Sub
ラベルは対数（デフォルトは10）に従ってセットされ、この場合ラベルは1,10,100,1000,10000となります。

目盛

3つの目盛と2つのグリッドがあります。目盛やグリッドの長さ、幅、色を変更できます。目盛の幅を1にセットすると（デフォルト）目盛の線種を点線、鎖線などに設定できます。1より大きい値をセットすると線種は実線（塗りつぶし）のみとなります。

[C#.NET]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Ticks.Length = 7;
bottomAxis.Ticks.Color = Color.Green;
bottomAxis.MinorTickCount = 10;

[VB.NET]
With TChart1.Axes.Bottom
   .Ticks.Length = 7
   .Ticks.Color = Color.Green
   .MinorTickCount = 10
End With

軸の位置
プロパティによって軸の表示位置を指定できます。この例では、軸はチャートの幅の50%の位置に移動します。（チャートの中央に表示されます。）
[C#.NET]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.PositionPercent = 50;

[VB.NET]
With TChart1.Axes.Bottom
   .PositionPercent = 50
End With

軸の追加

軸のコピー
TeeChartにはデータ系列に関連づけられる5つの軸（左側、上側、下側、右側、奥側）があります。チャートに新しい系列を追加するときは、軸を関連づける必要があります。「Axis Customdraw」メソッドを利用することにより、チャートに軸（左側、上側、下側、右側）を追加することができます。

プログラムによる設定例です。

[C#.NET]
private void Form1_Load(object sender, System.EventArgs e)
{
    Random Rnd = new Random();
    tChart1.Aspect.View3D = false;
    tChart1.Panel.Gradient.Visible = true;
    for(int t = 0; t <= 20; ++t)
    {line1.Add(t, ((Rnd.Next(100)) + 1) - ((Rnd.Next(70)) + 1), Color.Red);}

}

private void TChart1_BeforeDrawValues(object sender, Steema.TeeChart.Canvas.Graphics3D g)
{
    int posAxis = 0;
    if(tChart1.Axes.Left.Maximum > 0)
    {
        tChart1.Axes.Left.Draw(g.ChartXCenter - 10,g.ChartXCenter - 20,g.ChartXCenter,true);
        posAxis = tChart1.Axes.Left.CalcYPosValue(10);
        tChart1.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, true);
    }
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Dim t As Integer
    TChart1.Aspect.View3D = False
    TChart1.Panel.Gradient.Visible = True
    For t = 0 To 20
        Line1.Add(t, ((Rnd() * 100) + 1) - ((Rnd() * 70) + 1), Color.Red)
    Next
End Sub

Private Sub TChart1_BeforeDrawValues(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles Line1.BeforeDrawValues
    Dim posAxis As Integer
    If TChart1.Axes.Left.Maximum > 0 Then
        TChart1.Axes.Left.Draw(g.ChartXCenter - 10, g.ChartXCenter - 20, g.ChartXCenter, True)
        posAxis = TChart1.Axes.Left.CalcYPosValue(10)
        TChart1.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, True)
    End If
End Sub

（カスタム軸）

このサンプルでは、チャートの中心に新しく水平軸と垂直軸を追加します。チャートをスクロールすると（マウスの右ボタンを押してドラッグする）、新しい垂直軸はチャートの中心から移動せず、新しい水平軸は上下に移動します。新しい軸はデフォルトの軸のコピーです。

複数の軸
「PositionPercent」と「Stretching」プロパティにより、チャートのどこにでも軸を設定することができます。スクロール、ズームと軸のヒット検出は独自に作成した軸にも適用されます。

（チャートエディタでの軸の作成）

最初に、チャートエディタの「軸」タブをクリックし、"+"を押してカスタム軸を追加してください。次に「位置」タブを選択してください。このページの「水平線」のチェックボックスを設定すると新しいカスタム軸を水平の軸として定義し、デフォルトの縦軸とします。このカスタム軸を使用するには、「系列」ページの「一般」タブを選択し、水平軸、垂直時でカスタム軸を設定してください。

（コーディングでの作成）

[C#.NET]
private void Form1_Load(object sender, System.EventArgs e)
{
Line line1 = new Line();
Line line2 = new Line();

tChart1.Aspect.View3D = false;
tChart1.Panel.Gradient.Visible = true;
tChart1.Header.Text = "TeeChart Multiple Axes";
tChart1.Series.Add(line1);
tChart1.Series.Add(line2);

for(int t = 0; t <= 10; ++t)
{
line1.Add(Convert.ToDouble(t), Convert.ToDouble(10 + t), Color.Red);
if(t > 1)
{line2.Add(Convert.ToDouble(t), Convert.ToDouble(t), Color.Green);}
}

Axis leftAxis = tChart1.Axes.Left;

leftAxis.StartPosition = 0;
leftAxis.EndPosition = 50;
leftAxis.AxisPen.Color = Color.Red;
leftAxis.Title.Font.Color = Color.Red;
leftAxis.Title.Font.Bold = true;
leftAxis.Title.Text = "1st Left Axis";

// 「StartPosition」と「EndPosition」プロパティを使用して、チャート上の新しい位置に軸を設定することができます。
//
// StartPosition=50
// EndPosition=100
//
// チャートをその矩形の大きさが0%（最上位）から50%（中間位置）の間にチャートを表示します。（つまり、チャートの上半分の領域に表示します。）
// これらのプロパティを標準の軸に適用することにより、チャートの中に「サブチャート」を作成することができます。（この場合チャートの下半分に別系列のデータを表示することができます。）

Axis axis1 = new Axis(false, false, tChart1.Chart);

tChart1.Axes.Custom.Add(axis1);

line2.CustomVertAxis = axis1;

axis1.StartPosition = 50;
axis1.EndPosition = 100;
axis1.AxisPen.Color = Color.Green;
axis1.Title.Font.Color = Color.Green;
axis1.Title.Font.Bold = true;
axis1.Title.Text = "Extra Axis";
axis1.PositionPercent = 20;
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim Line1 As New Steema.TeeChart.Styles.Line()
Dim Line2 As New Steema.TeeChart.Styles.Line()
Dim t As Integer

TChart1.Aspect.View3D = False
TChart1.Panel.Gradient.Visible = True
TChart1.Header.Text = "TeeChart Multiple Axes"
TChart1.Series.Add(Line1)
TChart1.Series.Add(Line2)

For t = 0 To 10
Line1.Add(t, 10 + t, Color.Red)
If (t > 1) Then
Line2.Add(t, t, Color.Green)
End If
Next

With TChart1.Axes.Left
.StartPosition = 0
.EndPosition = 50
.AxisPen.Color = Color.Red
.Title.Font.Color = Color.Red
.Title.Font.Bold = True
.Title.Text = "1st Left Axis"
End With

'StartPosition」と「EndPosition」プロパティを使用して、チャート上の新しい位置に軸を設定することができます。

' StartPosition = 50
' EndPosition = 100

'チャートをその矩形の大きさが０％（最上位）から５０％（中間位置）の間にチャートを表示します。（つまり、チャートの上半分の領域に表示します。）
'これらのプロパティを標準の軸に適用することにより、チャートの中に「サブチャート」を作成することができます。（この場合チャートの下半分に別系列のデータを表示することができます。）

Dim Axis1 As New Steema.TeeChart.Axis(False, False, TChart1.Chart)

TChart1.Axes.Custom.Add(Axis1)

Line2.CustomVertAxis = Axis1

Axis1.StartPosition = 50
Axis1.EndPosition = 100
Axis1.AxisPen.Color = Color.Green
Axis1.Title.Font.Color = Color.Green
Axis1.Title.Font.Bold = True
Axis1.Title.Text = "Extra Axis"
Axis1.PositionPercent = 20
End Sub

（複数の軸）

カスタム軸を使用することにより、この様に簡単に新しい軸でチャートを描画することができます。

軸のイベント

実行時において軸のクリック（Axis Clicks）時に軸のラベルやユーザインターフェイスを、変更するのに利用できます。下記にプログラム例を記述します。

OnClickAxis

[C#.NET]
private void tChart1_ClickAxis(object sender, System.Windows.Forms.MouseEventArgs e)
{
    if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
    {
        MessageBox.Show("Clicked Bottom Axis at: " + line1.XScreenToValue(e.X));
    }
}

[VB.NET]
Private Sub TChart1_ClickAxis(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles TChart1.ClickAxis
    If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
        MsgBox("Clicked Bottom Axis at: " & Line1.XScreenToValue(e.X))
    End If
End Sub

OnGetAxisLabel

[C#.NET]
private void button1_Click(object sender, System.EventArgs e)
{
    bar1.FillSampleValues(20);
    tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Mark;
}

private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e)
{
    if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
    {e.LabelText = "Period " + Convert.ToString(e.ValueIndex);}
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Bar1.FillSampleValues(20)
    TChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Mark
End Sub

Private Sub TChart1_GetAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetAxisLabelEventArgs) Handles TChart1.GetAxisLabel
    If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
        e.LabelText = "Period " & e.ValueIndex
    End If
End Sub

OnGetNextAxisLabel
[C#.NET]
private void Form1_Load(object sender, System.EventArgs e)
{
    line1.FillSampleValues(20);
}

private void tChart1_GetNextAxisLabel(object sender, Steema.TeeChart.TChart.GetNextAxisLabelEventArgs e)
{
    if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
    {
        e.Stop = false;
        switch(e.LabelIndex)
        {
            case 0: e.LabelValue = 5; break;
            case 1: e.LabelValue = 13; break;
            case 2: e.LabelValue = 19; break;
            default: e.Stop = true; break;
        }
    }
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
nbsp;   Line1.FillSampleValues(20)
End Sub

Private Sub TChart1_GetNextAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetNextAxisLabelEventArgs) Handles TChart1.GetNextAxisLabel
    If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
        e.Stop = False
        Select Case e.LabelIndex
            Case 0 : e.LabelValue = 5
            Case 1 : e.LabelValue = 13
            Case 2 : e.LabelValue = 19
            Case Else : e.Stop = True
        End Select
    End If
End Sub


第5章 - 凡例のデザイン

凡例の制御
スタイルタブ
位置 タブ
シンブル タブ
形式 タブ
テキスト タブ
グラデーション タブ
影 タブ
Bevel タブ

凡例のカスタマイズ
OnGetLegendRect　イベント
OnGetLegendPos 　イベント
OnGetLegendText 　イベント

凡例の制御

凡例は下記のチャートエディタで設定できます。

凡例のパラメータの詳細について凡例クラスのヘルプをご覧ください。

スタイルタブ

（凡例の形式）

チャートにの系列が1つの場合、凡例の形式がデフォルト（自動）であると系列のポイント値が凡例に表示されます。チャートに2つ以上の系列がある場合は、デフォルトの凡例は系列の名前を凡例に表示します。デフォルト以外に設定する場合、凡例の形式のコンボボックスから別の項目を選択してください。「凡例の形式」が値を表示する設定で、系列が2つ以上の場合、最初の系列の値が凡例に表示されます。凡例の表示オプションの詳細について「凡例のカスタマイズ」をご覧ください。

凡例に系列の最後の値を表示

[C#]
tChart1.Legend.LegendStyle = LegendStyles.LastValues;

[VB.NET]
TChart1.Legend.LegendStyle = Steema.TeeChart.LegendStyles.LastValues

（テキストの形式）

凡例のテキストスタイルのリストについてTextStyleプロパティを参照してください。

（垂直方向のスペース）

凡例の項目間の間隔を設定します。

（分割線）

凡例の項目間の分割線の設定を行います。

（表示）

凡例の表示/非表示の設定を行います。

（反転）

凡例の項目の表示順を反転します。

（チェックボックス）

凡例の項目にチェックボックスを追加します。

（フォントを系列色に）
凡例のテキスト文字列の色を系列と同じに設定します。

位置タブ

（位置）
位置プロパティを使用することにより、凡例の位置を4ヶ所（上、下、左、右）の内のいずれかに設定できます。デフォルトの位置は右です。また、凡例のデフォルトの位置はチャートの外側です。凡例の位置の詳細については「凡例のカスタマイズ」をご覧ください。

（位置合わせ）
位置合わせプロパティを無効にすると、チャートのフレーム領域に凡例を描画します。（凡例の領域を無視します。）

（余白）
凡例の「上端の位置」や 「位置の余白」プロパティを使用することにより位置を細かく制御できます。

（位置のオフセット）
凡例の表示位置をチャートキャンバスの右端あるいは上端からのパーセントで設定します。左右の凡例は上下の位置を設定し、上下の凡例は左右の位置を設定します。

（カスタム）
位置合わせを無効に表示位置を自由に設定できます。

シンボル
（幅）
色の塗りつぶされている四角形（シンボル）の幅のサイズを設定します。

（幅の単位）
シンボルの幅を設定する時の単位系を指定します。

（位置）
色の塗りつぶされている四角形（シンボル）の位置を設定します。

（連続）
異なる凡例の系列の色の塗りつぶされている四角形（シンボル）を結合して表示します。

形式タブ
（色）
凡例の色の設定を行います。

（枠）
凡例の枠の設定を行います。

（パターン）
凡例の色の塗りつぶしパターンの設定を行います。

（枠の角を丸くする）
凡例の枠の角を丸く設定を行います。

（透明）
凡例の色の塗りつぶしの透明の設定を行います。

（透明）
凡例の色の塗りつぶしの透明度の設定を行います。

テキストタブ
凡例のテキストの色、フォント等の設定を行います。

グラデーションタブ
凡例の色の塗りつぶしのグラデーションの設定を行います。

影タブ
凡例の影の設定を行います。

Bevelタブ
凡例のベベルの設定を行います。

凡例のカスタマイズ

凡例のイベントを使用することにより凡例の外観とその内容を定義することができます。

OnGetLegendRect イベント
凡例のイベントを使用することにより凡例の外観とその内容を定義することができます。
[C#]
private void tChart1_GetLegendRect(object sender, Steema.TeeChart.TChart.GetLegendRectEventArgs e)
{
    e.Rectangle=new Rectangle(e.Rectangle.Left-100,e.Rectangle.Top,e.Rectangle.Width,e.Rectangle.Height);
}

[VB.NET]
Private Sub TChart1_GetLegendRect(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetLegendRectEventArgs) Handles TChart1.GetLegendRect
    e.Rectangle = New Rectangle(e.Rectangle.Left - 100, e.Rectangle.Top, e.Rectangle.Width, e.Rectangle.Height)
End Sub

OnGetLegendPos イベント
凡例の内容の位置を設定します。下のコードを上の例とともに使用することにより、新しい凡例の矩形領域に凡例の内容を移動することができます。
[C#]
private void tChart1_GetLegendPos(object sender, Steema.TeeChart.TChart.GetLegendPosEventArgs e)
{
    e.X = e.X-100;
    e.XColor = e.XColor-100;
}

[VB.NET]
Private Sub TChart1_GetLegendPos(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetLegendPosEventArgs) Handles TChart1.GetLegendPos
    e.X = e.X - 100
    e.XColor = e.XColor - 100
End Sub

OnGetLegendText イベント
凡例内容のテキストを設定します。
[C#]
private void tChart1_GetLegendText(object sender, Steema.TeeChart.TChart.GetLegendTextEventArgs e)
{
    if(e.Index == 3)
    {e.Text = e.Text + " Index no.:" + e.Index.ToString();}
}

[VB.NET]
Private Sub TChart1_GetLegendText(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetLegendTextEventArgs) Handles TChart1.GetLegendText
    If e.Index = 3 Then
        e.Text = e.Text + " Index no.:" + e.Index.ToString
    End If
End Sub
チャートの矩形領域には凡例が最初に描画され、その上に系列、軸が描画されます。


第6章 - 系列について

項目

系列のタイプ
系列のクラスの構造
系列のタイプの選択
系列へデータを追加
系列からデータポイントを削除
系列へヌルポイントを追加

チャート上での複数の系列タイプの使用
新しい系列の追加
系列の軸の選択
系列の接続
系列の順番の変更

系列データのリスト
系列の値のアクセス
値を設定るサンプル

系列のイベント
OnClickSeries
OnGetSeriesPointerStyle
OnGetSeriesMark

系列のタイプ

TChart系列クラスは全ての系列タイプの共通の基本クラスです。

系列のクラスの構造
下の図はTeeChartの系列（Series）のクラスの構造を表しています。全てのクラスは一般的な系列（Series）のクラスから派生し、系列（Series）のプロパティとメソッドを使用します。いくつかの抽象クラスは、系列（Custom3DSeries, CustomBarSeries and CircledSeries）から派生し、下図ではグレー色で表示されています。、これらのインターフェイスは、プログラミングで直接アクセスすることはできません。これらの特性は、派生する系列のタイプに継承されます。またオレンジ色で表示されている派生系列はチャートエディタでアクセス可能です。

実行時に系列を追加するプログラム例

[C#]
private void button1_Click(object sender, System.EventArgs e)
{
    Steema.TeeChart.Styles.Area tmpAreaSeries = new Steema.TeeChart.Styles.Area(tChart1.Chart);
    tmpAreaSeries.FillSampleValues(4);
    //Or
    //Steema.TeeChart.Styles.Area tmpAreaSeries = new Steema.TeeChart.Styles.Area();
    //tChart1.Series.Add(tmpAreaSeries);
    //tmpAreaSeries.FillSampleValues(4);
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
     Dim tmpAreaSeries As New Steema.TeeChart.Styles.Area(TChart1.Chart)
    tmpAreaSeries.FillSampleValues(4)
    'Or
    'Dim tmpAreaSeries As New Steema.TeeChart.Styles.Area()
    'TChart1.Series.Add(tmpAreaSeries)
    'tmpAreaSeries.FillSampleValues(4)
End Sub

下記は１つのチャートに違う複数の系列タイプを使用する例です。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
{
    //You could add the Series at runtime
    Steema.TeeChart.Styles.Area area1 = new Steema.TeeChart.Styles.Area(tChart1.Chart);
    Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
    Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart);

    //Use Series common properties
    tChart1.Series[0].FillSampleValues(10);
    tChart1.Series[1].FillSampleValues(10);
    tChart1.Series[2].FillSampleValues(10);
    tChart1.Series[1].Marks.Visible = false;
    tChart1.Series[2].Marks.Visible = false;

    //Modify Bar specific properties
    bar1.BarStyle = Steema.TeeChart.Styles.BarStyles.Pyramid; //Change Bar type
    bar1.Pen.Color = Color.Yellow; //Bar bounding lines colour

    //Modify Line specific properties
    line1.Stairs = true; //Set line to Stairs
    line1.LinePen.Color = Color.Blue; //LineSeries bounding lines colour

    //Modify Area specific properties
    area1.AreaBrush.Style = System.Drawing.Drawing2D.HatchStyle.Cross; //Area fill pattern
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    'You could add the Series at runtime
    Dim Area1 As New Steema.TeeChart.Styles.Area(TChart1.Chart)
    Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
    Dim Line1 As New Steema.TeeChart.Styles.Line(TChart1.Chart)

    'Use Series common properties
    TChart1.Series(0).FillSampleValues(10)
    TChart1.Series(1).FillSampleValues(10)
    TChart1.Series(2).FillSampleValues(10)
    TChart1.Series(1).Marks.Visible = False
    TChart1.Series(2).Marks.Visible = False

    'Modify Bar specific properties
    Bar1.BarStyle = Steema.TeeChart.Styles.BarStyles.Pyramid 'Change Bar type
    Bar1.Pen.Color = Color.Yellow 'Bar bounding lines colour

    'Modify Line specific properties
    Line1.Stairs = True 'Set line to Stairs
    Line1.LinePen.Color = Color.Blue 'LineSeries bounding lines colour

    'Modify Area specific properties
    Area1.AreaBrush.Style = System.Drawing.Drawing2D.HatchStyle.Cross 'Area fill pattern
End Sub

系列のタイプの選択

下記のテーブルは、各系列タイプによって使用できる変数の数を表しています。

系列タイプ | 変数の数 | データソースのプロパティ
標準 |  |
ガント | 3 | StartValues, EndValues, AY （Y軸レベル）, AXLabel （ラベルは任意でY軸あるいはマーカとして表示します）
シェープ | 4 | X0 （上）, Y0 （下）, X1 （左）, Y1 （右）
泡 | 3 | XValues, YValues, XLabel, RadiusValues
リボン | 2 | XValues, YValues, XLabel
縦棒 | 2 | XValues, YValues （棒）, XLabel
横棒 | 2 | XValues, YValues （棒）, XLabel
面 | 2 | XValues, YValues, XLabel
散布図 | 2 | Xvalues, YValues, XLabel
円 | 1 | PieValues, XLabel
折れ線 | 2 | XValues, YValues, XLabel
横リボン | 2 | XValues, YValues, YLabel
横面 | 2 | XValues, YValues, YLabel
3D |  |
サーフェス | 3 | XValues, YValues, XLabel, ZValues
等高線 | 3 | XValues, YValues, XLabel, ZValues
ウォーターフォール | 3 | XValues, YValues, XLabel, ZValues
カラーグリッド | 3 | XValues, YValues, XLabel, ZValues
ベクタ 3D | 3 | XValues, YValues, XLabel, ZValues
タワー | 3 | XValues, YValues, XLabel, ZValues
3D 散布 | 3 | XValues, YValues, XLabel, ZValues
サーフェス(三角) | 3 | XValues, YValues, XLabel, ZValues
その他 |  |
3D バー | 3 | XValues, YValues, YStartPoint, XLabel
イメージバー | 2 | XValues, YValues, XLabel
風向図 | 2 | Angle, YValues, Labels
時計 | 2 | Angle, YValues, Labels
ラインポイント | 2 | XValues, YValues, XLabel
バージョイン | 2 | XValues, YValues, XLabel
カレンダー | 2 | XValues, YValues, Labels
ビッグキャンドル | 5 | OpenValues, CloseValues, HighValues, LowValues, DateValues
イメージポイント | 2 | XValues, YValues, XLabel
デルタポイント | 2 | XValues, YValues, XLabel
拡張 |  |
極 | 2 | XValues, YValues, Labels （極は、角度と半径を持っています）
レーダー | 2 | XValues, YValues, Labels （レーダーは、角度と半径を持っています）
矢印 | 4 | StartXValues, StartYValues, XLabel, EndXValues, EndYValues
ベジェ | 2 | XValues, YValues, XLabel
ドーナツ | 2 | Angle, YValues, Labels
スミス | 2 | Resistance, Reactance, Labels
ピラミッド | 2 | XValues, YValues, XLabels
マップ | 3 | XValues, YValues, Polygons, Labels
ゲージ | 1 | YValues
金融 |  |
キャンドル | 5 | OpenValues, CloseValues, HighValues, LowValues, DateValues
ボリューム | 2 | XValues, YValues (VolumeValues), XLabel
ﾎﾟｲﾝﾄ&ﾌｨｷﾞｭｱ | 5 | OpenValues, CloseValues, HighValues, LowValues, DateValues
統計 |  |
エラー | 3 | XValues, YValues, XLabel, StdErrorValues
エラーバー | 3 | XValues, YValues, XLabel, ErrorValues
High-Low | 3 | XValues, YValues, LowValues, XLabel
ヒストグラム | 2 | XValues, YValues, XLabel
縦ボックスプロット | 2 | XValues, SamplesValues, Label
横ボックスプロット | 2 | XValues, SamplesValues, Label
ファネル | 3 | XValues, QuoteValues, OpportunityValues, XLabel

ラベリングを上手く使用することにより、2つの変数を使用する系列タイプを拡張することができます。

例

縦棒系列の使用

生産コード 月 生産量
10 Jan 300
10 Feb 325
10 Mar 287
12 Jan 175
12 Feb 223
12 Mar 241
14 Jan 461
14 Feb 470
14 Mar 455

月別にグループ化

コード：

[C#]
foreach(Steema.TeeChart.Styles.Series tSeries in tChart1.Series)
{tSeries.Marks.Visible = false;}
tChart1.Header.Text = "Production results";

bar1.Add(300,"Jan");
bar1.Add(325,"Feb");
bar1.Add(287,"Mar");
bar1.Title = "Product10";

bar2.Add(175,"Jan");
bar2.Add(223,"Feb");
bar2.Add(241,"Mar");
bar2.Title = "Product12";

bar3.Add(461,"Jan");
bar3.Add(470,"Feb");
bar3.Add(455,"Mar");
bar3.Title = "Product14";

[VB.NET]
Dim TSeries As Steema.TeeChart.Styles.Series
For Each TSeries In TChart1.Series
    TSeries.Marks.Visible = False
Next
TChart1.Header.Text = "Production results"

Bar1.Add(300, "Jan")
Bar1.Add(325, "Feb")
Bar1.Add(287, "Mar")
Bar1.Title = "Product10"

Bar2.Add(175, "Jan")
Bar2.Add(223, "Feb")
Bar2.Add(241, "Mar")
Bar2.Title = "Product12"

Bar3.Add(461, "Jan")
Bar3.Add(470, "Feb")
Bar3.Add(455, "Mar")
Bar3.Title = "Product14"

製品別にグループ化

コード：
[C#]
foreach(Steema.TeeChart.Styles.Series tSeries in tChart1.Series)
{tSeries.Marks.Visible = false;}
tChart1.Header.Text = "Production results";

bar1.Add(300,"Product10");
bar1.Add(175,"Product12");
bar1.Add(461,"Product14");
bar1.Title = "Jan";

bar2.Add(325,"Product10");
bar2.Add(223,"Product12");
bar2.Add(470,"Product14");
bar2.Title = "Feb";

bar3.Add(287,"Product10");
bar3.Add(241,"Product12");
bar3.Add(455,"Product14");
bar3.Title = "Mar";

[VB.NET]
Dim TSeries As Steema.TeeChart.Styles.Series
For Each TSeries In TChart1.Series
    TSeries.Marks.Visible = False
Next
TChart1.Header.Text = "Production results"

Bar1.Add(300, "Product10")
Bar1.Add(175, "Product12")
Bar1.Add(461, "Product14")
Bar1.Title = "Jan"

Bar2.Add(325, "Product10")
Bar2.Add(223, "Product12")
Bar2.Add(470, "Product14")
Bar2.Title = "Feb"

Bar3.Add(287, "Product10")
Bar3.Add(241, "Product12")
Bar3.Add(455, "Product14")
Bar3.Title = "Mar"

上記のデータに在庫（Stock）を追加

生産コード 月 生産量 在庫量
10 Jan 300 600
10 Feb 325 715
10 Mar 287 676
12 Jan 175 245
12 Feb 223 270
12 Mar 241 315
14 Jan 461 800
14 Feb 470 755
14 Mar 455 835

テーブル内の在庫の値は、月の生産量より高いので次のチャートのように表示されます（2D）。在庫（Stock）は、リボン系列で表されています。

コード：

下記のコードを前記のコードの先頭部分に付加してください。

[C#]
line1.Add(600,"Jan");
line1.Add(715,"Feb");
line1.Add(676,"Mar");
line1.Title = "Product10 Stock";
line1.Color = bar1.Color;

line2.Add(245,"Jan");
line2.Add(270,"Feb");
line2.Add(315,"Mar");
line2.Title = "Product10 Stock";
line2.Color = bar2.Color;

line3.Add(800,"Jan");
line3.Add(755,"Feb");
line3.Add(835,"Mar");
line3.Title = "Product10 Stock";
line3.Color = bar3.Color;

[VB.NET]
Line1.Add(600, "Jan")
Line1.Add(715, "Feb")
Line1.Add(676, "Mar")
Line1.Title = "Product10 Stock"
Line1.Color = Bar1.Color

Line2.Add(245, "Jan")
Line2.Add(270, "Feb")
Line2.Add(315, "Mar")
Line2.Title = "Product10 Stock"
Line2.Color = Bar2.Color

Line3.Add(800, "Jan")
Line3.Add(755, "Feb")
Line3.Add(835, "Mar")
Line3.Title = "Product10 Stock"
Line3.Color = Bar3.Color

系列へデータを追加
ほとんどの系列（第7章と第8章以外の場合）では、Addメソッドの24個のオーバーロードメソッドを使用してデータを追加します。（しかし、いくつかの例外があります）。

系列タイプ | 系列ポイントの追加 | 系列ポイントの削除
標準 |  |
ガント | GanttSeries.AddGantt GanttSeries.AddGanttColor | Series.Delete Series.DeleteRange
シェープ | ShapeSeries.X0, ShapeSeries.Y0, ShapeSeries.X1, ShapeSeries.Y1 | TChart.RemoveSeries （各シェープは、独自の系列です）
泡 | BubbleSeries.AddBubble | Series.Delete Series.DeleteRange
リボン | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
縦棒 | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
横棒 | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
面 | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
散布図 | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
円 | Series.Add Series.AddNull Series.AddArray | Series.Delete Series.DeleteRange
折れ線 | FastLineSeries.AddRealTime Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
横リボン | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
横面 | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
3D |  |
サーフェス | SurfaceSeries.AddXYZ SurfaceSeries.AddArrayXYZ SurfaceSeries.AddArrayGrid | Series.Delete Series.DeleteRange
等高線 | ContourSeries.AddXYZ ContourSeries.AddArrayXYZ ContourSeries.AddArrayGrid | Series.Delete Series.DeleteRange
ウォーターフォール | Waterfall.AddXYZ Waterfall.AddArrayXYZ Waterfall.AddArrayGrid | Series.Delete Series.DeleteRange
カラーグリッド | ColorGrid.AddXYZ ColorGrid.AddArrayXYZ ColorGrid.AddArrayGrid | Series.Delete Series.DeleteRange
ベクタ 3D | Vector3D.AddVector Vector3D.AddXYZ Vector3D.AddArrayXYZ Vector3D.AddArrayGrid | Series.Delete Series.DeleteRange
タワー | Tower.AddXYZ Tower.AddArrayXYZ Tower.AddArrayGrid | Series.Delete Series.DeleteRange
3D 散布 | Point3DSeries.AddXYZ | Series.Delete Series.DeleteRange
サーフェス(三角) | TriSurface.AddXYZ TriSurface.AddArrayXYZ TriSurface.AddArrayGrid | Series.Delete Series.DeleteRange
その他 |  |
3D バー | Bar3D.AddBar Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
イメージバー | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
風向図 | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
時計 | なし | なし
ラインポイント | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
バー ジョイン | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
カレンダー | Calendar.Date | なし
ビッグキャンドル |  |
イメージポイント | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
デルタポイント | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
拡張 |  |
極 | PolarSeries.AddPolar | Series.Delete Series.DeleteRange
レーダー | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
矢印 | ArrowSeries.AddArrow | Series.Delete Series.DeleteRange
ベジェ | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
ドーナツ | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
スミス | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
ピラミッド | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
マップ | Map.Shapes.Add | Series.Delete Series.DeleteRange
ゲージ | Gauge.Value | なし
金融 |  |
キャンドル | CandleSeries.AddCandle | Series.Delete Series.DeleteRange
ボリューム | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
ﾎﾟｲﾝﾄ&ﾌｨｷﾞｭｱ | PointFigure.AddOHLC | Series.Delete Series.DeleteRange
統計 |  |
エラー | ErrorSeries.AddErrorBar | Series.Delete Series.DeleteRange
エラーバー | ErrorBarSeries.AddErrorBar | Series.Delete Series.DeleteRange
High-Low | HighLow.AddHighLow | Series.Delete Series.DeleteRange
ヒストグラム | Series.Add Series.AddXY Series.AddNull Series.AddNullXY Series.AddArray | Series.Delete Series.DeleteRange
縦ボックスプロット | BoxPlot.Median BoxPlot.Quartile1 BoxPlot.Quartile3 BoxPlot.InnerFence1 BoxPlot.InnerFence3 BoxPlot.OuterFence1 BoxPlot.OuterFence3 | TChart.RemoveSeries （各縦ボックスプロットは、独自の系列です）
横ボックスプロット | BoxPlot.Median BoxPlot.Quartile1 BoxPlot.Quartile3 BoxPlot.InnerFence1 BoxPlot.InnerFence3 BoxPlot.OuterFence1 BoxPlot.OuterFence3 | TChart.RemoveSeries （各横ボックスプロットは、独自の系列です）
ファネル | Funnel.AddSegment | Series.Delete Series.DeleteRange

（色）
ポイントを追加する際にポイント毎に色を設定できます。

プログラム例

[C#]
bar1.Add(50,"Tomatoes",Color.Tomato);
[VB.NET]
Bar1.Add(50, "Tomatoes", Color.Tomato)
ColorEach = Trueとすることにより、19色を最大としたユニークな未使用の色が各系列に設定されます。
[C#]
Random rnd = new Random();
bar1.ColorEach = true;
for(int i = 0; i < 19; ++i)
{
     int higher = i + 65;
     char letter = (char) higher;
     bar1.Add(rnd.Next(100),letter.ToString());
}
[VB.NET]
Dim i As Integer
Bar1.ColorEach = True
For i = 0 To 19
    Bar1.Add(Rnd() * 100, Chr(i + 65))
Next

また、下記のようにすると、透明の系列が表示されます。
[C#]
bar1.Add(45, "My Transparent Bar", Color.Transparent);
[VB.NET]
Bar1.Add(45, "My Transparent Bar", Color.Transparent)

系列からデータポイントを削除
系列からポイントを削除する時は、「Series.Delete」を使用してください。尚、「Series.Delete」には2つのオーバーロードメソッドがあります。

public Void Delete(System.Int32)
系列の引数番目のデータポイントを削除。

public Void Delete(System.Int32, System.Int32)
系列のn番目のデータポイント（第1引数番目）からm個分のデータポイント（第2引数番目）を削除。

プログラム例

7番目と8番目のデータポイントを削除

[C#]
bar1.Delete(7,2);
[VB.NET]
Bar1.Delete(7, 2)
また、系列全体を削除する場合は、「Series.Clear」メソッドを使用してください。

系列へヌルポイントを追加
Series.Addには系列にヌルポイントを追加する3つのオーバーロードメソッドがあります。

新しくヌルポイントを追加
public Int32 Add()

テキストを指定して新しくヌルポイントを追加
public Int32 Add(System.String)

X軸とテキストを指定して新しくヌルポイントを追加
public Int32 Add(System.Double, System.String)

プログラム例
[C#]
line1.Add("Null Point");
[VB.NET]
Line1.Add("Null Point")

チャート上での複数の系列タイプの使用

TeeChartは、空のチャートキャンバスをデータ系列の背景として保持しています。従って最初にチャートのタイプを決定する必要が有りません。後で、表示したい複数の系列タイプを混ぜて、チャートを定義することができます。しかし、系列タイプによっては1つのチャートで別々の系列タイプを混ぜて設定することが現実的でないことがあります。系列を設定する時、チャートギャラリではデータに合わない系列はグレーの色で表示されます。実質的に、1つのチャートで設定できる系列の数に制限はありません。

新しい系列の追加

系列は、チャートエディタ（第1章を参照してください）やコードで追加できます。

プログラム例

[C#]
private void button1_Click(object sender, System.EventArgs e)
{
    Bar bar1 = new Bar(tChart1.Chart);
    bar1.FillSampleValues(10);
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
    Bar1.FillSampleValues(10)
End Sub
系列は、インデックス（最初の系列が0から始まるTChart1.Series(index)）を指定してアクセスできる系列リストに追加されます。TeeChartは、デフォルトで系列の名称を設定します（Series1, Series2など）。また、「Series.Title」プロパティを使用して名称を変更することができます。

系列の軸の選択

チャートに追加される系列には、自動的に左側と下側の軸が設定されます。系列に関連付ける軸は、チャートエディタの「系列」タブの「一般」タブで、設定することができます。また、下記のようにコードでも変更できます。

プログラム例

[C#]
bar1.Steema.TeeChart.Styles.VerticalAxis.Right;
bar1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;
[VB.NET]
Bar1.VertAxis = Steema.TeeChart.Styles.VerticalAxis.Right
Bar1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top

複数の系列にも、それぞれの軸の設定ができます。TeeChartは、系列に合った最適な軸のスケーリングを設定しますが、変更することもできます（第4章-軸の制御を参照してください）。チャートの上下左右以外でも軸は追加できますが、この軸は最初の4つの軸（上下左右にある軸）からコピーされます（軸の追加を参照してください）。

系列の接続

系列を他の系列のデータソースとして使用することができます。これはチャートエディタで2番目の系列のデータソースを設定することができます。「系列」タブの「データソース」タブを選択してください。そしてデータソースのタイプとして「関数」を選択してください。そうすると、2の「選択可能」と「選択中」のリストボックスが表示されます。「選択可能」リストボックスから現在の系列のためのデータソースとして使用したい系列を選択してください。次に、上の関数のコンボボックスから関数タイプとして「コピー」を選択してください。このようにして、どんな系列も他の系列の関数として定義できます。また、関数タイプは関数のコンボボックスから選択できます。これをコードで設定すると次のようになります。

[C#]
Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average();
line1.Function = average1;
line1.DataSource = bar1;
bar1.FillSampleValues(10);
line1.CheckDataSource();

[VB.NET]
Dim Average1 As New Steema.TeeChart.Functions.Average()
Line1.Function = Average1
Line1.DataSource = Bar1
Bar1.FillSampleValues(10)
Line1.CheckDataSource()
関数については、第7章を参照してください

系列の順番の変更

チャートエディタで系列の順番を簡単に変更できます。エディタの最初のページを選択して、移動する系列を選択します。そして矢印ボタンで系列を移動してください。系列の順番で、チャート上での系列の相対的な表示位置が決まります。「TChart1.Series(0).Active=False」と設定すると、その系列は表示されませんがデータは残っています。
コードで系列の順番を変更する場合は次のように行ってください。

Series(0)とSeries(1)の順番の変更

[C#]
tChart1.Series.Exchange(0, 1);  //Change Series(0) with Series(1) in the index order
[VB.NET]
TChart1.Series.Exchange(0, 1) 'Change Series(0) with Series(1) in the index order
メモ:

系列を変更すると、系列のインデックスも変更されます。

系列データのリスト

TeeChartの系列はその値を「Valuelist」に保存し、ValueListクラスを使用して、そのデータにアクセスしたり修正したりできます。

系列の値のアクセス

値をアクセスするプログラム例

縦棒系列の4番目（0から始まるインデックス）のポイント値を表示

[C#]
MessageBox.Show(bar1.YValues[3].ToString());
[VB.NET]
MsgBox(Bar1.YValues(3))

[C#]
for(int i = 0; i < bar1.Count; ++i)
{
    if(bar1.YValues[i] > 500)
    {
        MessageBox.Show("Value: (" + bar1.XValues[i] + ", " + bar1.YValues[i] + ") exceeds limit");
    }
}
[VB.NET]
Dim i As Integer
For i = 0 To Bar1.Count
    If Bar1.YValues(i) > 500 Then
        MsgBox("Value: (" & Bar1.XValues(i) & ", " & Bar1.YValues(i) & ") exceeds limit")
    End If
Next

下記のように、同じ値は系列のメソッドやチャートのイベントを使用してValueIndexから取得できます。
[C#]
private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
{
    if(s.Equals(bar1))
    {
        MessageBox.Show("ValueIndex is: " + valueIndex.ToString());
        MessageBox.Show("Point's YValue is " + bar1.YValues[valueIndex].ToString());
    }
}

[VB.NET]
Private Sub TChart1_ClickSeries(ByVal sender As Object, ByVal s As Steema.TeeChart.Styles.Series, ByVal valueIndex As Integer, ByVal e As System.Windows.Forms.MouseEventArgs) Handles TChart1.ClickSeries
    If s Is Bar1 Then
        MsgBox("ValueIndex is: " & valueIndex)
        MsgBox("Point's YValue is " & Bar1.YValues(valueIndex))
    End If
End Sub

値を設定するサンプル

次の例は、マウスのクリックに応じて縦棒系列の棒の値を変更します。

[C#]
private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
{
    UpDatePoint(valueIndex,tChart1.Axes.Left.CalcPosPoint((e.Y)));
}

[VB.NET]
Private Sub TChart1_ClickSeries(ByVal sender As Object, ByVal s As Steema.TeeChart.Styles.Series, ByVal valueIndex As Integer, ByVal e As System.Windows.Forms.MouseEventArgs) Handles TChart1.ClickSeries
    UpDatePoint(valueIndex, TChart1.Axes.Left.CalcPosPoint(e.Y))
End Sub

縦棒系列の値を更新するためUpdatePoint処理をコールしてください。
[C#]
private void UpDatePoint(int Bar, double Y)
{
    if(Bar < tChart1.Series[0].Count)
    {
        tChart1.Series[0].YValues[Bar] = Y;
        tChart1.Draw(tChart1.Graphics3D.Graphics);
    }
}

[VB.NET]
Private Sub UpDatePoint(ByVal Bar As Integer, ByVal Y As Double)
    If Bar < TChart1.Series(0).Count Then
        TChart1.Series(0).YValues(Bar) = Y
        TChart1.Draw(TChart1.Graphics3D.Graphics)
    End If
End Sub

系列のイベント

OnClickSeries

系列の情報を取得する場合は、このイベントが使用できます。

次の例は、日時データを扱います

[C#]
private void button1_Click(object sender, System.EventArgs e)
{
    Random rnd = new Random();
    line1.XValues.DateTime = true;
    line1.Pointer.Visible = true;
    line1.Add(DateTime.Parse("25/12/2002 10:30:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("25/12/2002 22:30:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("26/12/2002 09:20:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("26/12/2002 23:30:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("27/12/2002 11:10:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("27/12/2002 20:15:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("28/12/2002 08:15:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("28/12/2002 21:45:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("29/12/2002 12:45:00"),rnd.Next(100),"", Color.Red);
    line1.Add(DateTime.Parse("29/12/2002 22:05:00"),rnd.Next(100),"", Color.Red);

    line1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;
}

private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
{
    //以下は、軸の値ではなくマウスポインタに近い系列のポイント値を表示します。
    MessageBox.Show("Date is: " + DateTime.FromOADate(line1.XValues[valueIndex])
    + " Value is: " + line1.YValues[valueIndex]);
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim rnd As New Random()
    Line1.XValues.DateTime = True
    Line1.Pointer.Visible = True
    Line1.Add(DateTime.Parse("25/12/2002 10:30:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("25/12/2002 22:30:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("26/12/2002 09:20:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("26/12/2002 23:30:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("27/12/2002 11:10:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("27/12/2002 20:15:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("28/12/2002 08:15:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("28/12/2002 21:45:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("29/12/2002 12:45:00"), rnd.Next(100), "", Color.Red)
    Line1.Add(DateTime.Parse("29/12/2002 22:05:00"), rnd.Next(100), "", Color.Red)

    Line1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top
End Sub

Private Sub TChart1_ClickSeries(ByVal sender As Object, ByVal s As Steema.TeeChart.Styles.Series, ByVal valueIndex As Integer, ByVal e As System.Windows.Forms.MouseEventArgs) Handles TChart1.ClickSeries
    '以下は、軸の値ではなくマウスポインタに近い系列のポイント値を表示します。
    MsgBox("Date is: " & DateTime.FromOADate(Line1.XValues(valueIndex)) _
          & " Value is: " & Line1.YValues(valueIndex))
End Sub

OnGetSeriesPointerStyle

このイベントを使用してチャートのポインタを変更できます。

次の例は、データポイントが前のデータポイントより大きければ▲が表示され、そうでないときは▼が表示されます

[C#]
private void line1_GetPointerStyle(Steema.TeeChart.Styles.CustomPointSeries series, Steema.TeeChart.Styles.CustomPointSeries.GetPointerStyleEventArgs e)
{
    if(e.ValueIndex > 0)
    {
        if(line1.YValues[e.ValueIndex] > line1.YValues[e.ValueIndex - 1])
        {
            e.Style = Steema.TeeChart.Styles.PointerStyles.Triangle;
        }
        else if(line1.YValues[e.ValueIndex] < line1.YValues[e.ValueIndex - 1])
        {
            e.Style = Steema.TeeChart.Styles.PointerStyles.DownTriangle;
        }
        else
        {
            e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond;
        }
    }
    else
    {
        e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond;
    }
}

[VB.NET]
Private Sub Line1_GetPointerStyle(ByVal series As Steema.TeeChart.Styles.CustomPointSeries, ByVal e As Steema.TeeChart.Styles.CustomPointSeries.GetPointerStyleEventArgs) Handles Line1.GetPointerStyle
    If e.ValueIndex > 0 Then
        If (Line1.YValues(e.ValueIndex) > Line1.YValues(e.ValueIndex - 1)) Then
            e.Style =  Steema.TeeChart.Styles.PointerStyles.Triangle
        ElseIf (Line1.YValues(e.ValueIndex) < Line1.YValues(e.ValueIndex - 1)) Then
            e.Style = Steema.TeeChart.Styles.PointerStyles.DownTriangle
        Else
            e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond
        End If
    Else
        e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond
    End If
End Sub

OnGetSeriesMark

実行時にマーカの内容や矢印の長さを変更する時には、このイベントを使用してください

[C#]
private void line1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e)
{
    if(e.ValueIndex > 0)
    {
        if(line1.YValues[e.ValueIndex] > line1.YValues[e.ValueIndex - 1])
        {
            e.MarkText = e.MarkText + " (Up)";
        }
        else if(line1.YValues[e.ValueIndex] < line1.YValues[e.ValueIndex - 1])
        {
            e.MarkText = e.MarkText + " (Down)";
        }
        else
        {
            e.MarkText = e.MarkText + " (No Change)";
        }
    }
}

[VB.NET]
Private Sub Line1_GetSeriesMark(ByVal series As Steema.TeeChart.Styles.Series, ByVal e As Steema.TeeChart.Styles.GetSeriesMarkEventArgs) Handles Line1.GetSeriesMark
    If (e.ValueIndex > 0) Then
        If (Line1.YValues(e.ValueIndex) > Line1.YValues(e.ValueIndex - 1)) Then
            e.MarkText = e.MarkText + " (Up)"
        ElseIf (Line1.YValues(e.ValueIndex) < Line1.YValues(e.ValueIndex - 1)) Then
            e.MarkText = e.MarkText + " (Down)"
        End If
    Else
        e.MarkText = e.MarkText + " (No Change)"
    End If
End Sub
下図のような結果になります。


第7章 - 関数について

項目

関数の種類
関数の特性
関数の追加
データソースの定義
関数の範囲
範囲のスタイル
カスタム関数

関数の種類

関数の特性

TeeChartの関数は系列であり、またその系列のタイプは何でも構いません。代数式の関数は系列に適用され、データソースとは別の系列になります。

全ての関数は、Steema.TeeChart.Functions 名前空間の関数クラスから派生し、TeeFunction関数のPeriodプロパティを継承します。TeeChartには以下の定義された関数があります。

関数型 | 入力数 | 説明
標準 |  |
和 | 制限なし | 入力データの合計
差分 | 制限なし | 2つの入力系列間の差分
積 | 制限なし | 2つの入力系列の積
商 | 制限なし | 2つの入力系列の商
最大 | 制限なし | 入力データの最大のポイントを描画
最小 | 制限なし | 入力データの最小のポイントを描画
平均値 | 制限なし | 範囲のポイントからグループの平均を計算
Y=F(X) | None | ユーザ定義関数を描画
計算 | 制限なし | チャート内のポイント数を計算
拡張 |  |
スムーズ | 1 | ソース系列からポイントを連結する平滑化（スムージング）の線を描画
指数平均値 | 1 | 重み付けを基にした指数平均
標準偏差 | 1 | 範囲ポイントのグループ毎の標準偏差（あるいは完全標準偏差）を描画
誤差の2乗 | 1 | (RMS) Result = Sqrt( Sum( Square(Value) ) ) / NumValues )
クロスポイント | 制限なし | 2つのソース系列のポイントがクロスする位置を描画
パフォーマンス | 1 | ソース系列の最初のポイントとの差をパーセントで計算
系列組み合わせ | 1 | 「TypeFitting」プロパティの式を使用して系列のポイントに基づく線を描画
トレンド | 1 | 関数の元となる系列ポイントのトレンドを示す線を描画
指数トレンド | 1 | 指数の重み付けされたトレンドを描画
累積 | 制限なし | データポイントの累積な値の線を描画
金融 |  |
ADX | 1 | （Average Directional Index）相場のトレンドを検証するために使用されます
R.S.I. | 1 | RSI = 100.0 - ( 100.0 / ( 1.0 + Abs( Ups / Downs ) ) )
移動平均値 | 1 | 範囲ポイントのグループ毎のシンプルあるいは重み付けされた平均値を計算
指数移動平均値 | 1 | 次の式を使用します：FP = 2 / ( Period + 1 )
運動量 | 1 | 各Y値は、指定した範囲毎の最後のポイント－（マイナス）最初のポイントを計算
商運動量 | 1 | 前の「ｎ番目」の値と比較した比率を描画
MACD | 1 | （Moving Average Convergence Divergence）移動平均収束拡散法と呼ばれる分析手法
確率 | 1 | 次の式を使用します：value = (close - lowest ) / ( highest - lowest )
ボリンジャー | 1 | 移動平均値や標準偏差を使用します
ｺﾝﾌﾟﾚｯｼｮﾝ | 1 | 指定した範囲毎のソース系列の最高値と最低値を計算
CLV | 1 | 次の式を使用します：CLV = ( (Close-Low)-(High-Close))/(High-Low)
OBV | 1 | OHLC系列内の各ポイントについて、終値は始値と比較されます。 終値が高い場合、そのポイントにボリューム値を足します。 終値が低い場合、そのポイントからボリューム値を引きます。
CCI | 1 | 株式の統計的な平均値と比べて、どのくらい高いか安いかを計算します
PVO | 1 | 2つの指数移動平均値（a - b）の差を計算します

いくつかの関数は1つの入力系列をサポートします。しかし関数のリンクは可能でたとえば、チャートの複数の系列から平均関数の系列を作成し、これをトレンド系列のデータソースとすることができます。

関数の追加
チャートエディタの最初のページで「追加」ボタンを押して、新しい系列を追加してください。TeeChartギャラリで「関数」タブを選択して、必要な関数を選択してください。全ての関数はリボン系列で表示されていますが、後でチャートエディタの最初のページの「変更」ボタンで好きなタイプに変更できます。関数の定義は、後で関数系列のデータソースのページで簡単に変更できます。勿論、ここでチャートに追加した通常の系列を関数に変更することもできます。（関数はデータソースの定義であり、系列タイプの定義ではありません。）

下の図は関数を編集するデータソースのページです。リボン系列（名称：Line1 関数：平均値）が定義されています。また、データソースページの左下にあるリストボックスには、チャート内の選択可能な入力系列が表示されます。

空のチャートから、下のコードを使用して簡単な関数を作成します。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        {
            //系列を追加
            Line line1 = new Line(tChart1.Chart);

            //ランダムデータをセット
            line1.FillSampleValues(10);

            //平均値関数を追加するために系列を追加
            Line line2 = new Line(tChart1.Chart);

            //新しい系列の関数タイプを設定
            Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average();
            line2.Function = average1;

            //新しい関数系列のデータソースを定義
            line2.DataSource = line1;

            //注意 - 手動で系列にデータを設定する場合は、Checkdatasourceメソッドを使用してください。
            //関数の範囲（ピリオド）を2に設定
            line2.Function.Period = 2;
            line2.CheckDataSource();
        }

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '系列を追加
        Dim Line1 As New Steema.TeeChart.Styles.Line(TChart1.Chart)

        'ランダムデータをセット
        Line1.FillSampleValues(10)

        '平均値関数を追加するために系列を追加
        Dim Line2 As New Steema.TeeChart.LineSeries(TChart1.Chart)

        '新しい系列の関数タイプを設定
        Dim Average1 As New Steema.TeeChart.Functions.Average()
        Line2.Function = Average1

        '新しい関数系列のデータソースを定義
        Line2.DataSource = Line1

        '注意 - 手動で系列にデータを設定する場合は、Checkdatasourceメソッドを使用してください。
        '関数の範囲（ピリオド）を2に設定
        Line2.Function.Period = 2
        Line2.CheckDataSource()
End Sub

前の関数から他の関数を定義します。
[C#]
private void button1_Click(object sender, System.EventArgs e)
        {
            //2Dの表示に設定
            tChart1.Aspect.View3D = false;
            //2つ目の関数として系列を追加
            Line line3 = new Line(tChart1.Chart);
            //新しく関数タイプの設定
            Steema.TeeChart.Functions.High high1 = new Steema.TeeChart.Functions.High();
            line3.Function = high1;
            //新しい系列のデータソースを設定
            //入力として存在する関数(Series2)を使用
            line3.DataSource = tChart1.Series[1];
            //この関数は、平均値関数の最大値を取得します
        }

[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        '/2Dの表示に設定
        TChart1.Aspect.View3D = False
        '2つ目の関数として系列を追加
        Dim Line3 As New Steema.TeeChart.LineSeries(TChart1.Chart)
        '新しく関数タイプの設定
        Dim High1 As New Steema.TeeChart.Functions.High()
        Line3.Function = High1
        '新しい系列のデータソースを設定
        '入力として存在する関数(Series2)を使用
        Line3.DataSource = TChart1.Series(1)
        'この関数は、平均値関数の最大値を取得します
End Sub

データソースの定義
上記のセクションでは、コードによる関数のデータソース設定を説明しました。系列は、関数の入力を定義するため、あるいは系列のADO.NETデータソースを定義するためにデータソースを使用します（詳細についてはデータベースのアクセスに関するチュートリアルを参照してください）。

チャートエディタを使用して、関数を追加した後に関数系列のデータソースのページには選択可能な系列のリストが表示されます。ここで、選択した系列は関数のデータソースになります（左側のリストボックスは関数のデータソースとして設定可能な系列を表し、右側のリストボックスは関数系列のデータソースとして設定されている系列を表しています）。関数のタイプはコンボボックスにより変更できます。

コードによりデータソースを設定するには、「Series.Datasource」プロパティを使用します。

プログラム例

以下のコードを実行する場合には、あらかじめチャートに2つのデータ系列を追加してください。その2つの系列の平均値を求める関数の追加。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        {
            tChart1.Aspect.View3D = false;
            bar1.FillSampleValues(10);
            bar2.FillSampleValues(10);
        }

        private void button1_Click(object sender, System.EventArgs e)
        {
            ArrayList dataSource = new ArrayList();

            dataSource.Add(bar1);
            dataSource.Add(bar2);

            Line line1 = new Line(tChart1.Chart);
            Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average();

            line1.Function = average1;
            line1.DataSource = dataSource;
        }

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        TChart1.Aspect.View3D = False
        Bar1.FillSampleValues(10)
        Bar2.FillSampleValues(10)
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim DataSource As New ArrayList()

        DataSource.Add(Bar1)
        DataSource.Add(Bar2)

        Dim Line1 As New Steema.TeeChart.Styles.Line(TChart1.Chart)
        Dim Average1 As New Steema.TeeChart.Functions.Average()

        Line1.Function = Average1
        Line1.DataSource = DataSource
End Sub

2つの系列にポイントを追加

[C#]
private void button2_Click(object sender, System.EventArgs e)
        {
            Random rnd = new Random();
            for(int i = 0; i < 10; ++i)
            {
                bar1.Add(rnd.Next(500));
                bar2.Add(rnd.Next(500));
            }
        }

[VB.NET]
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        Dim rnd As New Random()
        Dim i As Integer
        For i = 0 To 10
            Bar1.Add(rnd.Next(500))
            Bar2.Add(rnd.Next(500))
        Next
End Sub

（注意）この関数は新しく追加されたポイントの平均値を表示しません。追加したポイントを読み込むには、「Series.CheckDatasource」メソッドを使用してください。

[C#]
tChart1.Series[2].CheckDataSource();
[VB.NET]
TChart1.Series(2).CheckDataSource()

下記は関数の定義を変更する例です。
[C#]
private void button3_Click(object sender, System.EventArgs e)
        {
            Steema.TeeChart.Functions.Cumulative cumulative1 = new Steema.TeeChart.Functions.Cumulative();
            tChart1.Series[2].Function = cumulative1;
        }

[VB.NET]
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
        Dim Cumulative1 As New Steema.TeeChart.Functions.Cumulative()
        TChart1.Series(2).Function = Cumulative1
End Sub

関数の範囲

関数系列を使用するときには、範囲の設定が重要となります。

プログラム例

以下の6つの値を設定します（縦棒系列）。
3, 8, 6, 2, 9 and 12

平均値関数系列を定義すると（デフォルト範囲は0）以下のような結果になります。
6.667

範囲を2に設定した場合、3つの平均値を返します。

5.5, 4 and 10.5

これらの平均値はその範囲の中心に表示されます。たとえば最初の平均値は1番目と2番目の縦棒の間になり、2番目の平均値は3番目と4番目の縦棒の間になります。

チャートエディタでは、系列ページのデータソースページの「オプション」タブで関数の範囲が設定できます。また、実行時には「FunctionType.Period」プロパティで関数の範囲が設定できます。

以下は、関数の範囲を2に設定します。

[C#]
line1.Function.Period = 2;
[VB.NET]
Line1.Function.Period = 2

下記は、異なる範囲を設定した2つのチャート例です。

範囲のスタイル

これは日時系列の場合に非常に便利です。関数の範囲を「1月」あるいは「1日」に設定する場合、「PeriodStyle」プロパティを使用します。

たとえば、通常の平均値関数を使用することにより、範囲を「1月」に設定すると月間平均売り上げを表示することができます。またこのときデータソースとして日時の系列を設定する必要があります。

プログラム例

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
            //実行時に、縦棒系列と平均関数を追加
            Random rnd = new Random();
            tChart1.Aspect.View3D = false;

            TimeSpan month = new TimeSpan(30,0,0,0);
            DateTime today = DateTime.Today;

            bar1.Marks.Visible = false;
            bar1.XValues.DateTime = true;
            tChart1.Axes.Bottom.Labels.Angle = 90;

            for(int i = 0; i < 60; ++i) {
                today = today.AddDays(5);
                bar1.Add(today, rnd.Next(100),"",Color.Red);
            }

            average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First;
            average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range;
            average1.Period = month.TotalDays;
            line1.DataSource = bar1;
            line1.CheckDataSource();
        }

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '実行時に、縦棒系列と平均関数を追加
        TChart1.Aspect.View3D = False

        Dim Month As New TimeSpan(30, 0, 0, 0)
        Dim Today As DateTime = DateTime.Today
        Dim i As Integer

        Bar1.Marks.Visible = False
        Bar1.XValues.DateTime = True
        TChart1.Axes.Bottom.Labels.Angle = 90

        For i = 0 To 60
            Today = Today.AddDays(5)
            Bar1.Add(Today, Rnd() * 100, "", Color.Red)
        Next

        Average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First
        Average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range
        Average1.Period = Month.TotalDays
        Line1.DataSource = Bar1
        Line1.CheckDataSource()
End Sub
縦棒系列内のデータの各月単位の平均値を表示します。
日時範囲の関数を計算する場合、関数のソースとなる系列は日付でソートされます。
日時系列以外にも下記のように設定できます。
[C#]
for(int i = 0; i < 60; ++i) {
     bar1.Add(Convert.ToDouble(i), rnd.Next(100),"",Color.Red);
}
average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First;
average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range;
average1.Period = 6;

[VB.NET]
For i = 0 To 60
            Bar1.Add(i, Rnd() * 100, "", Color.Red)
Next
Average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First
Average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range
Average1.Period = 6
これは各範囲を6単位で平均値を計算します。
（尚、Xの範囲は、X >=6, X<6、 X >=6, X<12、…となります。）
6ポイント毎の平均値を計算することとは異なるので注意してください。

「PeriodAlign」プロパティを使用することにより、関数の計算値の表示位置を設定することができます（関数の元となっている系列ポインタの範囲内での位置）。以下の例は、月毎の範囲の終わりに関数ポイントを表示します。

[C#]
average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First;
average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range;
average1.Period = month.TotalDays;

[VB.NET]
Average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First
Average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range
Average1.Period = Month.TotalDays

Period = Month.TotalDays and PeriodAligns.First
以下のチャートは、月の終わり位置に「平均値」を表示します。

Period = Month.TotalDays and PeriodAligns.Last
以下のチャートは、月の始め位置に「平均値」を表示します。

カスタム関数
新しく関数コンポーネントを作成することは、関数クラスから派生した新しいコンポーネントを単に作成することです（現存の関数クラスから派生することもできます）。新しい関数タイプを作成するためオーバーライドされる関数には2つの重要な仮想メソッドがあります。

1) Calculate 関数: public virtual double Calculate(Series Source,int First,int Last)
2) CalculateMany 関数: public virtual double CalculateMany(ArrayList SourceSeries, int ValueIndex)

1つの系列がデータソースとして使用される場合はCalculateメソッドが関数の計算に使用され、複数の系列がデータソースとして使用される場合はCalculateManyメソッドが関数の計算に使用されます。

新しくSquareSum関数を作成するプログラム例

[C#]
public class SquareSum : Steema.TeeChart.Functions.Function {
        public SquareSum(): base() {}
        public SquareSum(Steema.TeeChart.Chart c): base(c) {}

        public override double Calculate(Series SourceSeries,int FirstIndex,int LastIndex) {
            ValueList v=ValueList(SourceSeries);
            if ( FirstIndex==-1 ) return v.Total;
            else {
                double result=0;
                for (int t=FirstIndex; t<=LastIndex; t++) {
                    result+=Math.Sqrt(v[t]);}
                return result;
            }
        }

        public override double CalculateMany(ArrayList SourceSeriesList,int ValueIndex) {
            ValueList v;
            double result=0;

            for (int t=0; t<SourceSeriesList.Count; t++) {
                v=ValueList((Series)SourceSeriesList[t]);
                if ( v.Count>ValueIndex ) {
                    result+=Math.Sqrt(v[ValueIndex]);}
            }
            return result;
        }
}

[VB.NET]
 Public Class SquareSum
        Inherits Steema.TeeChart.Functions.Function

        Public Sub New()
            MyBase.New()
        End Sub

        Public Sub New(ByVal c As Steema.TeeChart.Chart)
            MyBase.New(c)
        End Sub

        Public Overrides Function Calculate(ByVal Source As Steema.TeeChart.Series, ByVal First As Integer, ByVal Last As Integer) As Double
            Dim v As Steema.TeeChart.ValueList
            Dim t As Integer
            v = ValueList(Source)

            If First = -1 Then
                Return v.Total
            Else
                Dim Result As Double = 0
                For t = First To t < Last
                    Result += Math.Sqrt(v(t))
                Next
                Return Result
            End If
        End Function

        Public Overrides Function CalculateMany(ByVal SourceSeries As System.Collections.ArrayList, ByVal ValueIndex As Integer) As Double
            Dim v As Steema.TeeChart.ValueList
            Dim Result As Double = 0
            Dim t As Integer

            For t = 0 To t < SourceSeries.Count
                v = ValueList(CType(SourceSeries(t), Steema.TeeChart.Series))
                If v.Count > ValueIndex Then
                    Result += Math.Sqrt(v(ValueIndex))
                End If
            Next

            Return Result
        End Function
End Class
FirstIndex と EndIndex の値は2乗値の合計を計算するために全ての SourceSeries のポイントをループするのに使用されます。

YValuesでなくXValuesが値を保持している横棒系列のような系列とともに実行するカスタム関数のクラスを実行するためにValueList メソッドが使用されます。

カスタム関数のデータソースが1つの系列の場合Calculateメソッドが使用され、データソースが複数のときはCalculateManyメソッドが使用されます。

元の系列の各ポイントでCalculateManyが呼ばれますが、系列毎にポイント数が違う場合、0番目のポイントから全系列中の最小のポイント数まで呼ばれます。


第8章 - ADO.NETのアクセス

はじめに

デザイン時でのADO.NETデータソースの接続
データアダプタ
単一レコード

実行時でのADO.NETデータソースの接続
データアダプタ
単一レコード

ASP.NETでのADO.NETの使用

はじめに

TeeChartをADO.NETデータベースに接続する方法は、デザイン時にチャートエディタで行う方法と実行時にコードの記述による方法があります。

どんな系列でもチャートエディタでADO.NETのテーブルやクエリーに接続でき、また全ての系列はいろいろなADO.NETデータベースを使用してあらゆるテーブルに接続できます。これにより柔軟にデータベースをチャートで使用できます。

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

デザイン時でのADO.NETデータソースの接続

データアダプタ

データアダプタの設定は第1章の系列のデータのセットを参照してください。

単一レコード

単一レコードのチャートはTeeChartの一つのデータベースのレコードを表示することができます。例えば月単位のデータ（'JAN','FEB','MAR'..など）から構成されている年間の売り上げデータの表示を月から年にする場合に便利です。

単一レコードのチャートはデータセット、テーブルやデータビューをサポートします。チャートエディタを使用して、チャート系列のデータソース型を単一レコードにしてください。

単一レコードのデータに接続するために必要なステップのほとんどは、チャートエディタを使用して設定できます。データソースをナビゲートしたり、チャートを更新するには、Windows.FormのCurrencyManagerを使用して数行のコードが必要になります。使用例についてはここのセクションを参照してください。

実行時でのADO.NETデータソースの接続

データアダプタ

前記と同様にデータアダプタの設定は第1章の系列のデータのセットを参照してください。その後以下のようにプログラミングを行います。

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

新しいプロジェクトで新しいフォームに新しいTeeChart Pro .NETをドラッグしてください。

[C#]
using System.Data;
using System.Data.OleDb;
using System.Security;
using System.Security.Permissions;

private void Form1_Load(object sender, System.EventArgs e) {
        DataSet masterDataSet = new DataSet();
        Bar bar1 = new Bar(tChart1.Chart);
        try {
            OpenConnWithJet40(ref masterDataSet);
            DataTable employeeTable = masterDataSet.Tables["Employee"];
            bar1.YValues.DataMember = employeeTable.Columns["SALARY"].ToString();
            bar1.LabelMember = employeeTable.Columns["LASTNAME"].ToString();
            bar1.DataSource = employeeTable;
        }
        catch (SecurityException) {
            MessageBox.Show("The calling method has not been granted sufficient permission to access the Microsoft Jet 4.0 OLE DB Provider.");
        }
}

[OleDbPermissionAttribute(SecurityAction.Demand, Provider="Microsoft.Jet.OLEDB.4.0")]
private void OpenConnWithJet40(ref DataSet MasterDataSet) {
        OleDbConnection testConn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;" +
            @"Data Source=C:\Program Files\Steema Software\TeeChart for .NET v1\Sample data\TeeChart.mdb;");

        testConn.Open();
        string strCom = "SELECT * FROM Employee" ;
        OleDbDataAdapter myCommand = new OleDbDataAdapter(strCom,testConn);
        myCommand.Fill(MasterDataSet,"Employee") ;
        testConn.Close();
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Dim MasterDataSet As New DataSet()
            Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
            Try
                OpenConnWithJet40(MasterDataSet)
                Dim employeeTable As DataTable = MasterDataSet.Tables("Employee")
                Bar1.YValues.DataMember = employeeTable.Columns("SALARY").ToString()
                Bar1.LabelMember = employeeTable.Columns("LASTNAME").ToString()
                Bar1.DataSource = employeeTable
            Catch ex As Exception
                MessageBox.Show("Microsoft Jet 4.0 OLE DB Provider problem: " & ex.Message)
            End Try
End Sub

Private Sub OpenConnWithJet40(ByRef MasterDataSet As DataSet)
            Dim TestConn As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=C:\Program Files\Steema Software\TeeChart for .NET v1\Sample data\TeeChart.mdb;")
            TestConn.Open()

            Dim StrCom As String = "SELECT * FROM Employee"
            Dim MyCommand As New OleDbDataAdapter(StrCom, TestConn)
            MyCommand.Fill(MasterDataSet, "Employee")
            TestConn.Close()
        End Sub
End Class

データベースの値が変更され、チャートを更新したい場合は、「CheckDataSource」メソッドを使用してください。
全ての系列には、「XValues.ValueSource」プロパティがあります。このプロパティは、XYチャート（各ポイントのX座標をもつ場合）のみ使用されます。

単一レコード

テーブルに接続
チャートエディタを使用すると、フォームの初期化で次のコードを作成します。新しい単一レコードのデータソースを作成して接続するために、同様にコードを、実行時に使用できます。

（テーブル「sourceTable」を備えた「sourceTableSet」と呼ばれるDataSetと仮定）
this.singleRecordSource1 = new Steema.TeeChart.Data.SingleRecordSource();
this.sourceTableSet.DataSetName = "NewDataSet";
this.sourceTableSet.Tables.AddRange(new System.Data.DataTable[] {this.sourceTable});
this.singleRecordSource1.DataSource = this.sourceTableSet;
this.singleRecordSource1.ValueMembers = new string[] {
                                                             "JAN",
                                                             "FEB",
                                                             "MAR"};

this.bar1 = new Steema.TeeChart.Styles.Bar();
this.bar1.DataSource = this.singleRecordSource1;

テーブルのナビゲーション
TeeChartの単一レコードは、データベースのテーブルをナビゲートして、チャートを更新するために「CurrencyManager」コンポーネントを使用します。テーブルレコードを変更した後にチャートを更新するためには「CheckDatasource」メソッドを使用してください。

例
private CurrencyManager myCurrencyManager;

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

テーブル（やチャート）は、「CurrencyManager」コンポーネントを使用してナビゲートできます。

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

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

ASP.NETでのADO.NETの使用

ASP.NETでは、Web フォームでTeeChartのWebChartコンポーネントを使用します。WinFormでTeeChartコンポーネントと同様の使用法でWebChartコンポーネントをデータソースに接続できます。ASP.NETの詳細については、ASP.NET アプリケーションチュートリアルを参照してください。


第9章 - ASP.NET アプリケーション

第9章 - TeeChartとWebChartおよびASP.NET

Webフォーム
フォームにチャートを追加
チャートエディタを使用してのデザインとプロパティのオプション
イメージフォーマット (PictureFormatプロパティ)
TempChartプロパティ - ファイル、Session、キャッシュあるいはHTTPハンドラ
インタラクティブチャートイベントの使用 (AutoPostbackプロパティ)
イベントの例
セキュリティについて

スクリプト言語のTeeChart
スクリプトにチャートを追加
処理フロー
TeeChartのコーディング
チャートを取得するための大切なポイント
イベントの追加

WebChartのツール
ホットスポットツール
スクロールツール
ズームツール

Webフォーム

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

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

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

    チャートエディタを使用してのデザインとプロパティのオプション

    チャートエディタは実行時におけるチャートのほとんどの項目を設定できます。設定はWebフォームに保存されます。チャートエディタの一般的な使い方については、チュートリアル1と2を参照してください。WebChartのエディタの使い方は、Windowsフォーム用のチャートとすべての点で同じです。

    イメージフォーマット (PictureFormatプロパティ)
    WebChartがWebフォームにイメージとしてレンダリングされる場合、デフォルトのフォーマットはPNGですが、プロパティウィンドウのPictureFormatプロパティで変更できます。Bitmapはインターネットエクスプローラのブラウザでサポートされますが、Webページとの互換性のため、PNG、JPEGあるいはGIFフォーマットの使用をお勧めいたします。

    GIFイメージフォーマットの使用
    GIFは256色を使用します。フルカラーで保存する場合は、他のイメージフォーマットを使用してください。

    TempChartプロパティ - File, Session, キャッシュあるいはHttpハンドラ

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

    File
    デフォルトではTeeChartをインストールすると、テンポラリファイルの位置および同等な仮想フォルダ名を備えたレジストリキーを作成します。キーは以下のとおりです:
    [HKEY_LOCAL_MACHINE\SOFTWARE\Steema Software\TeeChart.NET]
    "VirtualShare"="/TeeChartForNET"
    "ShareFolder"="C:\\Program Files\\Steema Software\\TeeChart for .NET v3\\TeeChartForNET"

    上記の設定はデフォルトです。TeeChart.NETの仮想フォルダはTeeChartのインストーラによって作成されます。上記の設定を変更したい場合は、必要なIISの仮想ディレクトリのレジストリ値を作成します。

    WebChartは、ShareFolderレジストリキーに設定されたフォルダの下の_Chart_tmpフォルダにファイルを保存します。

    TeeChartではテンポラリファイルを削除しません。

    Session
    セッションにもテンポラリファイルを保存できます。Session変数でチャートを実行するためには2つの条件が必要です:

  • アプリケーションではセッションを有効にしなければなりません。セッションはデフォルトで有効です。プロジェクトのweb.configファイルを参照してください:
        <sessionState
                mode="InProc"
    InProcはデフォルトの設定です。

  • メモリからチャートを取得するためにaspxスクリプト・モジュールを入れます。aspxスクリプトの名前を「GetChart」にします。このスクリプトは、TeeChartのWebForm ASP.NET サンプルにあります。GetChartモジュールを作成する場合は、Page_Loadのイベントに次のコードを加えてください:

    GetChart.aspx.cs

            private void Page_Load(object sender, System.EventArgs e)
            {
                string chartName=Request.QueryString["Chart"];

                if (Session[chartName]!=null)
                {
                    System.IO.MemoryStream chartStream = new System.IO.MemoryStream();
                    chartStream=((System.IO.MemoryStream)Session[chartName]);
                    Response.ContentType = "image/" + "png";
                    Response.OutputStream.Write(chartStream.ToArray(),0,(int)chartStream.Length);
                    chartStream.Close();
                    Session.Remove(chartName);
                }
            }
    このコードはセッションのキャッシュからWebChartを取得して、ブラウザに描画し、キャッシュを削除します。

    Cache
    Cache オプションは、セッションチャートのキャッシュオプションの設定に非常に似ています。'Cache'は、ASP.NET の WebForm ページのキャッシュオブジェクトのように使用する実用的なオプションで、大半のASP.NETのアプリケーション構成に簡単に置くことができます。一方 'Session' は一部のWebサーバの管理制限（例：アドミニストレータがセキュリティの理由からセッションのサポートを無効にする場合）に影響されます。

    キャッシュオプションは、GetChart.aspxファイルの使用を必要とします。

  • メモリからチャートを取得するには、aspx スクリプトモジュールをインクルードしてください。aspx スクリプト名は、'GetChart'にしてください。TeeChartにWebFormのASP.NET サンプルが同梱されています。最初から新規のGetChart モジュールを作成するには、プロジェクトに'GetChart'という新しいWebFormを追加して（aspxファイルでも構いません）、Page_Load イベントに次のコードを追加してください。

    GetChart.aspx.cs

            private void Page_Load(object sender, System.EventArgs e)
            {
                string chartName=Request.QueryString["Chart"];

                if (Page.Cache[chartName]!=null)
                {
                    MemoryStream chartStream = new MemoryStream();
                    chartStream=((MemoryStream)Page.Cache[chartName]);
                    Response.ContentType = "image/" + "png";
                    Response.OutputStream.Write(chartStream.ToArray(),0,(int)chartStream.Length);
                    chartStream.Close();
                }
            }

    このスクリプトは、前にWebチャートがページキャッシュに保存したチャートを復元します。このスクリプトはブラウザにチャートを返して、キャッシュから削除します。

    Httpハンドラ
    Httphandlerオプションは、ページにチャートイメージを復元するために内部のTeeChart (WebChart) ジェネレータを使用します。このオプションは、テンポラリファイルの生成も行いませんし、（「セッション」オプションや「キャッシュ」オプションのように）チャートを復元するためにaspxファイルを追加する必要もありません。このオプションは、web.configファイルに対して1つの変更を行います。

    web.config の<system.web> タグと</system.web>タグの間のどこでもいいので、次のセクションを配置してください。

    <system.web>
      <httpHandlers>
           <add verb="*" path="TeeChartImgGen.ashx" type="Steema.TeeChart.Web.TeeChartImgGen, TeeChart"/>
      </httpHandlers>

    /*..content cut for brevity ..*/

    </system.web>

    インタラクティブチャートイベントの使用 (AutoPostbackプロパティ)
    インタラクティブイベントを使用する場合は、AutoPostbackプロパティをTrueに設定してください。
    WebChartのイベントについては「イベントの例」を参照してください。

    イベントの例
    ClickSeriesのようなクリックイベントを使用する場合は、WebChartのAutoPostbackプロパティをtrueに設定してください。
    プロパティブラウザのイベントリストから必要とするイベントをダブルクリックすると、イベントが設定されます:

    リスト内のエントリをダブルクリックすると、イベントの宣言を作成します。

    例
            private int xVal;
            private int yVal;

            private void WebChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
            {
                g.TextOut(xVal,yVal,"onAfterDraw");
            }

    上のイベントでは、xValとyValの示す位置にテキストを出力します。

    下記のコードは、クリックされたxとy座標をxValとyValに設定します。

            private void WebChart1_ClickSeries(object sender, Steema.TeeChart.Series s, int valueIndex, System.EventArgs e)
            {
                xVal=s.CalcXPos(valueIndex);
                yVal=s.CalcYPos(valueIndex);
            }

    スクリプト言語のTeeChart

    WebChartの代わりに一般のasp (aspx)ページでTeeChartを使用できます。詳しくは、「ASPStreams」サンプルを参照してください。

    TeeChartのイベントを上手に使用するために、Windows フォームコンポーネントあるいはWebChartコントロールを使用してください。

    スクリプトにチャートを追加
    1. 新しいASP.NET Webアプリケーションのプロジェクトを作成します。作成されたWebフォームページをクライアントページとして使用します（「ASPStream」サンプルのSeriesTypes.aspxページを参照してください）。
    2. 新しいWebフォームページを追加します。このページはサーバーサイドでチャートコードを処理するために使用します（「ASPStream」サンプルのProcessChart.aspxページを参照してください）。
    - このページはSystem.Windows.Forms.dllを参照します。なぜなら、TChartコンポーネントはWindows フォームのベースコンポーネントから作成されているからです。
    3. プロジェクトを作成する場合は、この手順を参考にしたり、「ASPStream」サンプルを参照してください。

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

    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();

                /* ...系列、データ、などを追加 ... */
            }
    チャートを取得するための大切なポイント

    1. クライアントの「Get」命令。「submit」ボタンや別の方法（コンボボックス）で開始し、クライアントのパラメータによりチャートをサーバーから取得します。チャートのリクエストは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;
            }

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

    例
            private void Page_Load(object sender, System.EventArgs e)
            {
                tChart=new TChart();
                tChart.AfterDraw += new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw);

                /* ...系列、データ、などを追加 ... */

                //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);

                /* ...系列、データ、などを追加 ... */

                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.Drawing.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イベントのコードはチャート作成時に実行されます。クライアントページのチャートでインタラクティブなマウスクリックイベントなどを使用する場合は、WebフォームでWebChartコンポーネントを使用してください。

    セキュリティについて
    TeeChart Pro .NET のインストールを行うと、サンプル用のディレクトリの他に、ASP.NETサンプル用のIISの仮想ディレクトリが作成されます。WebFormアプリケーションでは、別のページに一時的にChartの情報を転送する場合、セッションのサポートを設定する必要があります。Windows 2003では、デフォルトでインストールするとセキュリティの制限により、デフォルトの'_chart_temp'フォルダ（一時フォルダの名前と位置は設定可能です）の使用が制限されます。Windows 2003では、ASP.NETアプリケーションで一時ファイルの保存を可能にするには、サーバのセキュリティの設定を変更する必要があります。

    WebChartのツール

    WebChartのツールは、エディタのツールパレットからWebChartに追加できます。下に書かれているWebChart用の3つのツールの他に、既存のツールでマウスの移動に応じるツール以外のツールをWebChartで使用できます。下に書かれているツールの使い方はすべて、ライブなサンプルとしてTeeChartのWebChartのデモに含まれています。

    ホットスポットツール
    最も簡単な使い方としては、このホットスポットツールはマウスがポイント上に移動した際に、データポイントのラベルを表示します。ホットスポットツールは、Winフォームのチャートにもありますが、ここで説明しているようにWebChartでの動作内容とは異なります。WebChartのホットスポットツールは、各データポイントに関連しているマップ領域を生成します。マップアクションは、次のオプションから選択できます。

    - Mark - 選択されたスタイルオプションに該当するポイントマーカを表示します。
    - URL - データポイントがクリックされた場合、URLに接続します。
    - Script - データポイントがクリックされた場合、カスタムなJavascriptを実行します。

    マーカ
    Styleプロパティを使用してマーカスタイルを定義してください。

    例
    Steema.TeeChart.Tools.SeriesHotspot hotspotTool =
             ((Steema.TeeChart.Tools.SeriesHotspot)WebChart1.Chart.Tools[0]);

    hotspotTool.MapAction = Steema.TeeChart.Styles.MapAction.Mark;
    hotspotTool.Style = Steema.TeeChart.Styles.MarksStyles.LabelPercentTotal;

    URL
    GetHTMLMapイベントを使用して、データポイントから呼び出されるURLを設定してください。URLオプションは、エディタから設定できますが、正しいURLを設定するにはイベントにコードを設定しなければなりません。

    例
    //最初のコード....
    Steema.TeeChart.Tools.SeriesHotspot hotspotTool =
             ((Steema.TeeChart.Tools.SeriesHotspot)WebChart1.Chart.Tools[0]);

    hotspotTool.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspotTool_GetHTMLMap);

    //イベントコード：
    private void hotspotTool_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
    {
         if (CheckBox1.Checked)  //新しいウィンドウを開く？
            e.PointPolygon.Attributes="target='_blank'";
         else
            e.PointPolygon.Attributes="target='_self'";        tab

         if (e.Series==WebChart1.Chart.Series[0]) e.PointPolygon.HREF="http://" + TextBox1.Text; //set URL according to textbox text + TextBox1.Text; //set URL according to textbox text
         if (e.Series==WebChart1.Chart.Series[1]) e.PointPolygon.HREF="http://" + TextBox2.Text;
         if (e.Series==WebChart1.Chart.Series[2]) e.PointPolygon.HREF="http://" + TextBox3.Text; + TextBox3.Text;
         if (e.Series==WebChart1.Chart.Series[3]) e.PointPolygon.HREF="http://" + TextBox4.Text;
    }

    Script
    Scriptオプションを使用して、カスタムな内容またはJavascriptからチャートに追加したい値を処理できます。オプションとして「Script」が選択されると、TeeChartはこのオプションを追加してヘルパースクリプトを使用します。現在、使用可能なヘルパースクリプトは「アノテーション」です（Steema.TeeChart.Tools.HotspotHelperScriptsを参照してください）。ヘルパースクリプトを使わずに、独自の出力を定義できます。

    「アノテーション」のコード例：
    protected void Page_Load(object sender, System.EventArgs e)
    {

      //初期化

      Chart ch1 = WebChart1.Chart;

      Steema.TeeChart.Themes.ColorPalettes.ApplyPalette(ch1, 9);
      Steema.TeeChart.Tools.SeriesHotspot hotspot1 = new Steema.TeeChart.Tools.SeriesHotspot();
      ch1.Legend.Visible = false;
      ch1.Tools.Add(hotspot1);
      hotspot1.MapAction = Steema.TeeChart.Styles.MapAction.Script;

      hotspot1.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspot1_GetHTMLMap);

      //必要なコードを記述する
    }

    private void hotspot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
    {
         //このコード例は縦棒系列を呼び出しますが、e.Seriesやe.PointPolygon.ValueIndexを呼び出すことができます

         //用意されたHelperScriptAnnotationテキストはアノテーションの変数として独自のテキストを適用します
         //次の例は、チャートをイメージとして生成して返すために、aspxのスクリプトを呼び出します
         e.PointPolygon.Attributes=String.Format(Texts.HelperScriptAnnotation,
                                "<IMG SRC=ShowSeries.aspx?seriestype=Bar&view=False&width=100&height=80>");

         //他にはアノテーションはマウスオーバーヒントのテキストになります。例：
         //e.PointPolygon.Attributes=String.Format(Steema.TeeChart.Texts.HelperScriptAnnotation,"hello world.");
    }

    上記の例で使用した HelperScriptAnnotationは以下の通りです
    HelperScriptAnnotation ="onmouseover=\"ShowAnnotation('{0}');\" onmouseout=\"ShowAnnotation('');\"";
    独自の出力を追加する場合は、ここでこの呼び出しを独自のコードに置き換えてください。

    例：
    string myProcess = ="onmouseover=\"ShowAssociatedDataTable('{0}');\" onmouseout=\"ShowAssociatedDataTable('');\"";
    e.PointPolygon.Attributes=String.Format(myProcess,e.PointPolygon.ValueIndex.ToString());

    そこで、関連するデータテーブルを表示するための独自の呼び出しを実行するために、ShowAssociatedDataTableメソッドを使用します。

    スクロールツール
    スクロールツールは、スクロールバーをWebChartの下部に追加します。チャートの表示可能な部分の大きさや開始位置を設定できます。無効にできますが、チャートをドラッグすることもできます。スクロールツールは、ホットスポットツールと併用できます。

    エディタを使用してスクロールツールを追加すると、チャートは自動的に2Dに設定され、スクロールバーのスペースを作るために下軸を移動します。スクロールバーは、デザイン時には見えません。

    スクロール可能なサイズを設定するには、ViewSegmentSizeとStartPositionをSegmentViewUnitsと一緒に使用してください。

    例
    Steema.TeeChart.Tools.ScrollTool scrollTool =
                            ((Steema.TeeChart.Tools.ScrollTool)WebChart1.Chart.Tools[0]);
    scrollTool.StartPosition = 30;
    scrollTool.SegmentViewUnits = Steema.TeeChart.Tools.ScrollToolViewUnit.percent;
    scrollTool.ViewSegmentSize = 20;

    ズームツール
    ズーム領域は、チャート領域上でマウスドラッグを使用して選択でき、ズームされた範囲を作成するためにズーム座標をサーバーに返します。ズームするには、対象の領域を左上開始位置から右下終了位置へ指定します。マウス操作は左クリック後、指を離したまま領域終了箇所で再度クリックします。アンズームするには、対象の領域指定をズームとは逆に右下開始位置から左上終了位置へ指定します。

    ズームツールを使用するために、次のメソッドを追加してください。
    Sessionを使用：
    private void CheckZoom(WebChart wChart)
    {
         ArrayList zoomedState=(ArrayList)Session[wChart.ID+"Zoomed"];
         zoomedState=((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,
            zoomedState);
         if (zoomedState==null)
            Session.Remove(wChart.ID+"Zoomed");
         else
            Session.Add(wChart.ID+"Zoomed",zoomedState);
    }
    あるいはPage.Cacheを使用：
    private void CheckZoom(WebChart wChart)
    {
      ArrayList zoomedState = (ArrayList)Page.Cache[wChart.ID + "Zoomed"];
      zoomedState = ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,
        zoomedState);
      if (zoomedState == null)
        Page.Cache.Remove(wChart.ID + "Zoomed");
      else
        Page.Cache.Add(wChart.ID + "Zoomed", zoomedState);
    }

    ズームさせたいチャートの名称を設定して、Page_Loadメソッドの終わりにメソッドを呼び出してください。
    例
    CheckZoom(WebChart1);

    マウスをxまたはy方向に動かさずにチャート上をクリック/ドラッグすると、ズームではなくサーバに返されます。


TeeChart Pro .Net 3J チュートリアル

第10章 - ASP.NET サンプル

第10章 - ASP サンプル

Web Form サンプル

C#.NETやVB.NETで記述されているWebFormやその他のASP.NETサンプルについては、TeeChartにインストールされているTeeChartForNETを参照してください。

Webフォームサンプル

ダイナミックなWebChartを作成するには

  • サーバに新規のWebFormアプリケーションを作成し、フォームに何もない状態で正常に動作することを確認してください。

  • SteemaのツールボックスタブからWebChartオブジェクトを選択し、WebFormにドラッグします。

  • 新しいWebChart1オブジェクトを選択して、プロパティウィンドウのTempChartプロパティでFileからSessionに変更します。これは、WebChartで生成されたすべてのテンポラリチャートがテンポラリファイルではなくセッション変数内に保存されることを示しています（詳細はチュートリアルの第9章を参照してください）。

  • セッション変数からテンポラリチャートを復元するために、新しいフォームに簡単なコードを追加します。ASP.NETプロジェクトを右クリックし、新しいWebFormを追加し、GetChart.aspxという名前にします。Page_Loadイベントは次のようになります。

    • private void Page_Load(object sender, System.EventArgs e)
    {
         string chartName=Request.QueryString["Chart"];
         if (Session[chartName]!=null)
        {
            System.IO.MemoryStream chartStream = new System.IO.MemoryStream();
            chartStream=((System.IO.MemoryStream)Session[chartName];
            Response.OutputStream.Write(chartStream.ToArray(),0,(int)chartStream.Length);
            chartStream.Close();
            Session.Remove(chartName);
        }
    }
  • では、HotSpotの基本的な機能提供について説明します。オリジナルのWebFormのForm_Loadイベントに、次のようなコードを追加できます。

    • private void Page_Load(object sender, System.EventArgs e)
    {
         //Chartオブジェクトを使用します。
         Steema.TeeChart.Chart Chart1 = WebChart1.Chart;

         //2D描画で泡系列を描画
         Chart1.Aspect.View3D = false;
         Steema.TeeChart.Styles.Bubble bubble1 = new Steema.TeeChart.Styles.Bubble(Chart1);
         bubble1.FillSampleValues();

         //チャートにホットスポットツールを追加
         Steema.TeeChart.Tools.SeriesHotspot seriesHotSpot1 = new Steema.TeeChart.Tools.SeriesHotspot(Chart1);
         //Steema.TeeChart.Styles.MapAction.Markはデフォルト値
         seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Mark;
    }

    このコードを実行し、泡の上にマウスを移動すると、系列マーカの値（この場合は、YValues）が表示されます。
  • チャートにズーム機能を追加するには、ズームツールとズームの状態を制御するコードを追加しなければなりません。
    •
    private void Page_Load(object sender, System.EventArgs e)
    {
         //Chartオブジェクトを使用します。
         Steema.TeeChart.Chart Chart1 = WebChart1.Chart;

         //2D描画で泡系列を描画
         Chart1.Aspect.View3D = false;
         Steema.TeeChart.Styles.Bubble bubble1 = new Steema.TeeChart.Styles.Bubble(Chart1);
         bubble1.FillSampleValues();

         //チャートにホットスポットツールを追加
         Steema.TeeChart.Tools.SeriesHotspot seriesHotSpot1 = new Steema.TeeChart.Tools.SeriesHotspot(Chart1);
         //Steema.TeeChart.Styles.MapAction.Markはデフォルト値
         seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Mark;

         //チャートにズームツールを追加
         Steema.TeeChart.Tools.ZoomTool zoomTool1 = new Steema.TeeChart.Tools.ZoomTool(Chart1);

         // *************** ズームをサポートするためのコード ***************
         //ズームリクエストを送るかどうかの確認
         CheckZoom(WebChart1);
    }

    private void CheckZoom(WebChart wChart)
    {
         ArrayList zoomedState=(ArrayList)Session[wChart.ID+"Zoomed"];
         zoomedState=((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,zoomedState);
         if (zoomedState==null)
            Session.Remove(wChart.ID+"Zoomed");
         else
            Session.Add(wChart.ID+"Zoomed",zoomedState);
    }
  • これで、MouseOverイベントやMouseClickイベントに対応するインタラクティブなチャートが用意できました。この場合、泡系列に関連付けられているホットスポットツールは、マウスを泡系列に移動したときに系列マーカの値を表示します。しかし、MapActionプロパティを使用してマウスを泡系列に移動した際にホットスポットツールの動作をカスタマイズすることができます。例えば、泡の1つをクリックして指定したURLに行くことができます。これは、MapActionプロパティをURLに設定し、SeriesHotSpotイベントを接続し、イベント内でURLを指定することにより行えます。

    • Page_Loadイベント内：
    seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.URL;
    seriesHotSpot1.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(seriesHotSpot1_GetHTMLMap);
    GetHTMLMapメソッド内：
    private void seriesHotSpot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
    {
         e.PointPolygon.Title = "Go to the Steema web";
         e.PointPolygon.HREF = "http://www.steema.com";
         e.PointPolygon.Attributes = "target='_blank'";
    }
  • MapActionプロパティを効果的にスクリプトに設定すると、望み通りに動作を定義できます。TeeChartは、HelperScripts列挙体経由で呼び出すことができる、便利な組み込みスクリプトを提供します。例えば、マウスが1つの泡系列ポイント上にきた時にイメージファイルを開くために、次のコードを追加します。

    • Page_Loadイベント内：
    seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Script;
    seriesHotSpot1.HelperScript = Steema.TeeChart.Tools.HotspotHelperScripts.Annotation;

    この2行はクライアントブラウザに関連するJavaScriptを追加します。

    GetHTMLMapメソッド内：
    private void seriesHotSpot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
    {
         e.PointPolygon.Attributes=String.Format(Steema.TeeChart.Texts.HelperScriptAnnotation, "<IMG SRC=Images/myimage.jpg>");
    }

    さらに動作をカスタマイズするということは、単に独自のJavaScriptルーチンをデザインし、そのルーチンをクライアントブラウザに追加して、そのルーチンとパラメータをe.PointPolygon.Attributesに追加することによってそのルーチンを呼び出すことを意味します。


第11章- ズームとスクロール

第11章 - ズームとスクロール

ズームとスクロールは、密集したデータから特定のデータを注目するために便利です。

項目

マウスによるズームとスクロール
ズーム
スクロール

コードによるズームとスクロール
ズーム
アニメーションズーム
ズームのイベント
スクロール

マウスによるズームとスクロール

ズーム
チャートをズームする場合、ズームする領域の左上から左マウスボタンを押しながらズームする領域の右下までドラッグしてください。ボタンを離すとチャートがズームされて描画されます。
ズームされたチャートを元に戻す場合、チャート上の任意の場所で左マウスボタンを押しながら左上方向にドラッグしてボタンを離してください。

スクロール
チャートをスクロールする場合、右マウスボタンを押しながらスクロールする方向にドラッグしてください。ボタンを離すとチャートが新しい位置に描画されます。
スクロールを元に戻す場合、チャート上の任意の場所で左マウスボタンを押しながら左上方向にドラッグしてボタンを離してください。

コードによるズームとスクロール

ズーム
ズームはデフォルトで有効になっています。ズームを無効にする場合、Zoom.Allowプロパティを設定してください。Zoomクラスに全てのズームのプロパティやメソッドがありますのでご覧下さい。ズームの領域を定義する場合、ZoomRectメソッドを使用してください。
例
[C#]
tChart1.Zoom.ZoomRect(new Rectangle(100,100,120,120));
[VB.NET]
TChart1.Zoom.ZoomRect(New Rectangle(100, 100, 120, 120))
ZoomRectの座標は、ピクセル単位でチャートパネルの左上の角は(0, 0)です。
下記のコードは、X軸の2番目と5番目の間をズームインし、Y軸のスケールはチャート全体の最大と最小のポイントになります。

[C#]
int x = points1.CalcXPos(2);
int y = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int height = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MinYValue) - tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int width = points1.CalcXPos(5) - x;
Rectangle r = new Rectangle(x,y,width,height);
tChart1.Zoom.ZoomRect(r);

[VB.NET]
Dim X As Integer = Points1.CalcXPos(2)
Dim Y As Integer = TChart1.Axes.Left.CalcYPosValue(TChart1.Axes.Left.MaxYValue)
Dim Height As Integer = TChart1.Axes.Left.CalcYPosValue(TChart1.Axes.Left.MinYValue) - TChart1.Axes.Left.CalcYPosValue(TChart1.Axes.Left.MaxYValue)
Dim Width As Integer = Points1.CalcXPos(5) - X
Dim R As New Rectangle(X, Y, Width, Height)
TChart1.Zoom.ZoomRect(R)

ズームアウトする場合、以下のコードを使用してください。
TChart1.Zoom.Undo

アニメーションズーム
アニメーションズームでは「ズームイン」または「ズームアウト」時のステップ数を設定します。従って、瞬時にズームを行うのではなく、徐々にズームを行います。
例

[C#]
int x = points1.CalcXPos(2);
int y = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int height = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MinYValue) - tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int width = points1.CalcXPos(5) - x;
Rectangle r = new Rectangle(x,y,width,height);
tChart1.Zoom.Animated = true;
tChart1.Zoom.AnimatedSteps = 100;
tChart1.Zoom.ZoomRect(r);

[VB.NET]
Dim X As Integer = Points1.CalcXPos(2)
Dim Y As Integer = TChart1.Axes.Left.CalcYPosValue(TChart1.Axes.Left.MaxYValue)
Dim Height As Integer = TChart1.Axes.Left.CalcYPosValue(TChart1.Axes.Left.MinYValue) - TChart1.Axes.Left.CalcYPosValue(TChart1.Axes.Left.MaxYValue)
Dim Width As Integer = Points1.CalcXPos(5) - X
Dim R As New Rectangle(X, Y, Width, Height)
TChart1.Zoom.Animated = True
TChart1.Zoom.AnimatedSteps = 100
TChart1.Zoom.ZoomRect(R)

ズームのイベント
ズームインでは、TChart.Zoomedイベントが発生します。ズームアウトでは、TChart.UndoneZoomイベントが発生します。

スクロール
デフォルトで全ての方向のスクロールが可能です。スクロールを無効にしたり、あるいはスクロールの方向を限定する場合は、Scroll.Allowプロパティを設定してください。コードでスクロールする一番簡単な方法はAxisのScrollメソッドを使用します。

[C#]
tChart1.Axes.Bottom.Scroll(3, false);
[VB.NET]
TChart1.Axes.Bottom.Scroll(3, False)

値はオフセットです。「False」は、系列値の範囲を超えてのスクロールを有効にするかどうかを指定します。

スクロールを制御する他の方法としては、AxisのMaximumプロパティやMinumumプロパティを設定します。

[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        int range = Convert.ToInt32(bar1.XValues.Maximum - bar1.XValues.Minimum / 2);
        bar1.FillSampleValues(20);
        tChart1.Panning.Allow = ScrollModes.None;
        hScrollBar1.Value = range;
        hScrollBar1.Minimum = range - 50;
        hScrollBar1.Maximum = range + 50;
}

private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e) {
        tChart1.Axes.Bottom.Automatic = false;
        tChart1.Axes.Bottom.Minimum = e.NewValue;
        tChart1.Axes.Bottom.Maximum = e.NewValue + bar1.Count;
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Dim Range As Integer = Bar1.XValues.Maximum - Bar1.XValues.Minimum / 2
            Bar1.FillSampleValues(20)
            TChart1.Panning.Allow = Steema.TeeChart.ScrollModes.None
            HScrollBar1.Value = Range
            HScrollBar1.Minimum = Range - 50
            HScrollBar1.Maximum = Range + 50
End Sub

Private Sub HScrollBar1_Scroll(ByVal sender As Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles HScrollBar1.Scroll
            TChart1.Axes.Bottom.Automatic = False
            TChart1.Axes.Bottom.Minimum = e.NewValue
            TChart1.Axes.Bottom.Maximum = e.NewValue + Bar1.Count
End Sub


第12章 - チャートのエクスポートとインポート

第12章 - チャートのエクスポートとインポート

このチュートリアルは、多様なフォーマットでのTeeChartのエクスポートや、TeeChart独自のTeeフォーマットファイルのインポートについて説明します。

項目

チャートのエクスポート
フォーマット
エクスポートのサンプル

イメージのエクスポート
BMP
JPEG
WMF と EMF
GIF
PNG
TIFF

データのエクスポート
テキスト、XML、HTML、XLS

TeeChartの「Ten」テンプレートとデータのエクスポートとインポートフォーマット
Tenファイル

インポート
TeeChartにXMLをインポート
Tenフォーマットファイルのインポート
Tenファイルのインポートのサンプル
インポートされたチャートの効果
その他のデータソース

チャートのエクスポート

フォーマット
エクスポートのフォーマット。全てのフォーマットは、ファイルあるいはクリップボードあるいはストリームへコピーできます。

イメージフォーマット
  • BMP: BitmapFormatクラス

  • JPEG: JPEGFormatクラス

  • WMF と EMF: MetafileFormatクラス

  • GIF: GIFFormatクラス

  • PNG: PNGFormatクラス

  • TIFF: TIFFFormatクラス

    • データフォーマット
  • Text: TextFormatクラス

  • XML: XMLFormatクラス

  • HTML: HTMLFormatクラス

  • Excel: ExcelFormatクラス

    • その他のフォーマット
    Tenフォーマットは、チャートの特性や任意でデータを保持します。ファイルは小さく（データに依存）、ライブのチャートを表示できます。
  • TEN (TeeChart): TemplateExportクラス

    • エクスポートのサンプル
    ファイルにエクスポートする方法のほとんどは、保存先のファイル名を定義するだけです。
    [C#]

    private void button1_Click(object sender, System.EventArgs e) {

                saveFileDialog1.Filter = "Images (*.bmp)|*.bmp|Images(*.jpg)|*.jpg|Images(*.wmf)|*.wmf|Images(*.emf)|*.emf|Images (*.gif)|*.gif|Images (*.png)|*.png|Images (*.tiff)|*.tiff";

                saveFileDialog1.ShowDialog();

                if(saveFileDialog1.FileName != "") {

                    switch(saveFileDialog1.FilterIndex) {

                        case 1:

                            tChart1.Export.Image.Bitmap.Save(saveFileDialog1.FileName);

                            break;

                        case 2:

                            tChart1.Export.Image.JPEG.Save(saveFileDialog1.FileName);

                            break;

                        case 3:

                            tChart1.Export.Image.Metafile.Enhanced = false;

                            tChart1.Export.Image.Metafile.Save(saveFileDialog1.FileName);

                            break;

                        case 4:

                            tChart1.Export.Image.Metafile.Enhanced = true;

                            tChart1.Export.Image.Metafile.Save(saveFileDialog1.FileName);

                            break;

                        case 5:

                            tChart1.Export.Image.GIF.Save(saveFileDialog1.FileName);

                            break;

                        case 6:

                            tChart1.Export.Image.PNG.Save(saveFileDialog1.FileName);

                            break;

                        case 7:

                            tChart1.Export.Image.TIFF.Save(saveFileDialog1.FileName);

                            break;

                    }

                }

            }

    [VB.NET]

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

            SaveFileDialog1.Filter = "Images (*.bmp)|*.bmp|Images(*.jpg)|*.jpg|Images(*.wmf)|*.wmf|Images(*.emf)|*.emf|Images (*.gif)|*.gif|Images (*.png)|*.png|Images (*.tiff)|*.tiff"

            SaveFileDialog1.ShowDialog()

            If SaveFileDialog1.FileName <> "" Then

                Select Case SaveFileDialog1.FilterIndex

                    Case 1

                        TChart1.Export.Image.Bitmap.Save(SaveFileDialog1.FileName)

                    Case 2

                        TChart1.Export.Image.JPEG.Save(SaveFileDialog1.FileName)

                    Case 3

                        TChart1.Export.Image.Metafile.Enhanced = False

                        TChart1.Export.Image.Metafile.Save(SaveFileDialog1.FileName)

                    Case 4

                        TChart1.Export.Image.Metafile.Enhanced = True

                        TChart1.Export.Image.Metafile.Save(SaveFileDialog1.FileName)

                    Case 5

                        TChart1.Export.Image.GIF.Save(SaveFileDialog1.FileName)

                    Case 6

                        TChart1.Export.Image.PNG.Save(SaveFileDialog1.FileName)

                    Case 7

                        TChart1.Export.Image.TIFF.Save(SaveFileDialog1.FileName)

                End Select

            End If

    End Sub

    イメージのエクスポート

    BMP
    BMPファイルのエクスポートには、色やサイズの付加的なパラメータがあります。
    例
    [C#]

    case 1:

         Steema.TeeChart.Export.BitmapFormat bitMap = tChart1.Export.Image.Bitmap;

         bitMap.Height = 500;

         bitMap.Width = 700;

         bitMap.Monochrome = true;

         bitMap.Save(saveFileDialog1.FileName);

         break;

    [VB.NET]

    Case 1

         Dim BitMap As Steema.TeeChart.Export.BitmapFormat = TChart1.Export.Image.Bitmap

         BitMap.Height = 500

         BitMap.Width = 700

         BitMap.Monochrome = True

         BitMap.Save(SaveFileDialog1.FileName)

    JPEG
    JPEGファイルのエクスポートには、SaveToFileメソッドやSaveToStreamメソッドの速度と品質のパラメータがあります。
    例
    [C#]

    case 2:

    Steema.TeeChart.Export.JPEGFormat jPEG = tChart1.Export.Image.JPEG;

         jPEG.GrayScale = true;

         jPEG.Height = 500;

         jPEG.Width = 700;

         jPEG.Quality = 100;

         jPEG.Save(saveFileDialog1.FileName);

         break;

    [VB.NET]

    Case 2

    Dim JPEGf As Steema.TeeChart.Export.JPEGFormat = TChart1.Export.Image.JPEG

         JPEGf.Height = 500

         JPEGf.Width = 700

         JPEGf.GrayScale = True

         JPEGf.Quality = 100

         JPEGf.Save(SaveFileDialog1.FileName)

    品質の値(0～100)は、大きい値ほどファイルサイズが大きくなり、アクセス時間も長くなりますが、画像品質は良くなります。アプリケーションに合わせたバランスで設定する必要があります。

    WMF と EMF
    拡張メタファイルは、EnhancedプロパティをTrueに設定することにより簡単に作成できます。
    例
    [C#]

    case 3:

         Steema.TeeChart.Export.MetafileFormat metaFile = tChart1.Export.Image.Metafile;

         metaFile.Height = 500;

         metaFile.Width = 700;

         metaFile.Enhanced = false;

         metaFile.Save(saveFileDialog1.FileName);

         break;

    [VB.NET]

    Case 3

         Dim MetaFile As Steema.TeeChart.Export.MetafileFormat = TChart1.Export.Image.Metafile

         MetaFile.Height = 500

         MetaFile.Width = 700

         MetaFile.Enhanced = False

         MetaFile.Save(SaveFileDialog1.FileName)

    GIF
    TeeChartは、.NET Framework クラス ライブラリのSystem.Drawing.Imaging 名前空間に含まれるクラスを使用してビットマップをGIFフォーマットにエクスポートできます。

    例
    [C#]

    case 5:

         Steema.TeeChart.Export.GIFFormat gIF = tChart1.Export.Image.GIF;

         gIF.Height = 500;

         gIF.Width = 700;

         gIF.ColorReduction = Steema.TeeChart.Export.GIFFormat.GIFColorReduction.GrayScale;

         gIF.Save(saveFileDialog1.FileName);

         break;

    [VB.NET]

    Case 5

         Dim GIF As Steema.TeeChart.Export.GIFFormat = TChart1.Export.Image.GIF

         GIF.Height = 500

         GIF.Width = 700

         GIF.ColorReduction = Steema.TeeChart.Export.GIFFormat.GIFColorReduction.GrayScale

         GIF.Save(SaveFileDialog1.FileName)

    PNG
    PNGフォーマットは、GIFフォーマットよりも優れています。ネットワーク接続において、イメージを表示するにはベターなフォーマットです。
    例
    [C#]

    case 6:

         Steema.TeeChart.Export.PNGFormat pNG = tChart1.Export.Image.PNG;

         pNG.Compression = 100;

         pNG.GrayScale = true;

         pNG.Height = 500;

         pNG.Width = 700;

         pNG.Save(saveFileDialog1.FileName);

         break;

    [VB.NET]

    Case 6

         Dim PNGf As Steema.TeeChart.Export.PNGFormat = TChart1.Export.Image.PNG

         PNGf.Compression = 100

         PNGf.GrayScale = True

         PNGf.Height = 500

         PNGf.Width = 700

         PNGf.Save(SaveFileDialog1.FileName)

    TIFF
    TIFFは様々なプラットフォームおよびイメージ処理アプリケーションによってサポートされる、柔軟で拡張可能なフォーマットです。
    例
    [C#]

    case 7:

         Steema.TeeChart.Export.TIFFFormat tIFF = tChart1.Export.Image.TIFF;

         tIFF.Compression = Steema.TeeChart.Export.TIFFFormat.TIFFCompression.LZW;

         tIFF.Height = 500;

         tIFF.Width = 700;

         tIFF.Save(saveFileDialog1.FileName);

         break;

    [VB.NET]

    Case 7

         Dim TIFF As Steema.TeeChart.Export.TIFFFormat = TChart1.Export.Image.TIFF

         TIFF.Compression = Steema.TeeChart.Export.TIFFFormat.TIFFCompression.LZW

         TIFF.Height = 500

         TIFF.Width = 700

         TIFF.Save(SaveFileDialog1.FileName)

    データのエクスポート

    系列データのエクスポートフォーマットには、4つあります。
  • Text: TextFormatクラス

  • XML: XMLFormatクラス

  • HTML: HTMLFormatクラス

  • Excel: ExcelFormatクラス

    • 上記のコンポーネントは、設定されているチャート系列からファイル、ストリーム、クリップボードとしてデータをエクスポートできます。次の例は、チャート系列からHTMLテーブルにデータをエクスポートします。

    [C#]

    private void Form1_Load(object sender, System.EventArgs e) {

                Random rnd = new Random();

                char c = new char();

                for(int i = 0; i < 10; ++i) {

                    c = Convert.ToChar(65 + i);

                    bar1.Add(Convert.ToDouble(i),rnd.Next(100),c.ToString(),Color.Red);

                }

                Steema.TeeChart.Export.DataExport dataExport = new Steema.TeeChart.Export.DataExport(tChart1.Chart);

                dataExport.HTML.IncludeHeader = true;

                dataExport.HTML.IncludeIndex = true;

                dataExport.HTML.IncludeLabels = true;

                dataExport.HTML.Series = bar1;

                dataExport.HTML.Save(@"C:\Test\tChart.htm");

            }

    [VB.NET]

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

                Dim C As New Char()

                Dim i As New Integer()

                For i = 0 To 10

                    C = Convert.ToChar(65 + i)

                    Bar1.Add(Convert.ToDouble(i), Rnd() * 100, C.ToString(), Color.Red)

                Next

                Dim DataExport As New Steema.TeeChart.Export.DataExport(TChart1.Chart)

                DataExport.HTML.IncludeHeader = True

                DataExport.HTML.IncludeIndex = True

                DataExport.HTML.IncludeLabels = True

                DataExport.HTML.Series = Bar1

                DataExport.HTML.Save("C:\Test\TChart.htm")

    End Sub

    上記の出力内容は次のようになります。
    <table border="1">
    <tr><td>Index</td><td>Text</td><td>bar1</td></tr>
    <tr><td>0</td><td>A</td><td>69</td></tr>
    <tr><td>1</td><td>B</td><td>93</td></tr>
    <tr><td>2</td><td>C</td><td>18</td></tr>
    <tr><td>3</td><td>D</td><td>88</td></tr>
    <tr><td>4</td><td>E</td><td>42</td></tr>
    <tr><td>5</td><td>F</td><td>33</td></tr>
    <tr><td>6</td><td>G</td><td>58</td></tr>
    <tr><td>7</td><td>H</td><td>43</td></tr>
    <tr><td>8</td><td>I</td><td>63</td></tr>
    <tr><td>9</td><td>J</td><td>49</td></tr>
    </table>

    TeeChartの「Ten」テンプレートとデータのエクスポート/インポートフォーマット

    Tenファイル
    Tenファイルは、チャートやデータを保持するTeeChart独自のテンプレートフォーマットです。
    編集されたチャートの特性は、テンプレートに保存されテンプレートが新しいチャートにインポートされる時に再生成されます。
    長所
  • Tenファイルは、ファイルサイズが小さく（データに依存）、一般のイメージフォーマットより描画速度が速い。

  • ズームやスクロールが行えるライブのチャートを表示して、特性も変更できます。

  • データは任意にTenテンプレートに含むことができます。

    • 例
    [C#]

    private void button1_Click(object sender, System.EventArgs e) {

                saveFileDialog1.Filter = "TenFile (.ten)|*.ten";

                saveFileDialog1.ShowDialog();

                if(saveFileDialog1.FileName != "") {

                    tChart1.Export.Template.IncludeData = true;

                    tChart1.Export.Template.Save(saveFileDialog1.FileName);

                }

            }

    [VB.NET]

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

            SaveFileDialog1.Filter = "TenFile (.ten)|*.ten"

            SaveFileDialog1.ShowDialog()

            If SaveFileDialog1.FileName <> "" Then

                TChart1.Export.Template.IncludeData = True

                TChart1.Export.Template.Save(SaveFileDialog1.FileName)

            End If

    End Sub

    インポート

    TeeChartにXMLをインポート
    TextBoxからXMLをインポート。
    例

    [C#]

    protected override void button1_Click(object sender, System.EventArgs e)

                tChart1.Series.RemoveAllSeries();

                Steema.TeeChart.Styles.Points points1 = new Steema.TeeChart.Styles.Points(tChart1.Chart);

                points1.Title = "Points Series";

                xmlSource1.Series = points1;

                xmlSource1.SeriesNode = "Points Series";

                xmlSource1.Load(textBox2.Lines);

                tChart1.Refresh();

    URLからXMLをインポート。
    例

    [C#]

    protected override void button2_Click(object sender, System.EventArgs e)

                tChart1.Series.RemoveAllSeries();

                xmlSource1.Chart = tChart1.Chart;

                xmlSource1.Load("http://www.steema.com/SampleNETData.xml");

                tChart1.Refresh();

    Tenフォーマットファイルのインポート
    ローカルのファイルソースあるいはhttpデータソースから保存されたTenファイルをインポートします。

    インポートの例
    例
    ファイルからインポート
    [C#]

    tChart1.Import.Template.LoadFileDialog();

    [VB.NET]

    TChart1.Import.Template.LoadFileDialog()

    あるいは
    URLからインポート
    [C#]

    tChart1.Import.Template.FromURL("http://www.berneda.com/demo.ten");

    [VB.NET]

    TChart1.Import.Template.FromURL("http://www.berneda.com/demo.ten")

    あるいは
    ストリームからインポート
    [C#]

    System.IO.MemoryStream tenStream = new System.IO.MemoryStream();

    tChart1.Export.Template.Save(tenStream);

    tChart2.Import.Template.Load(tenStream);

    [VB.NET]

    Dim TenStream As New System.IO.MemoryStream()

    TChart1.Export.Template.Save(TenStream)

    TChart2.Import.Template.Load(TenStream)

    インポートされたチャートの効果
    インポート対象のチャートにTenファイルにはない設定項目が含まれていた場合、その項目についてはインポート前の状態が保持されます。チャートのフッターを例に解説します。フッター情報が設定されているチャートにフッター情報が設定されていないTenファイルをインポートしても、フッター情報は残ります（フッターが表示されます）。Tenファイルの設定項目を有効にする場合は、次のコード例のようにチャートの新しいインターフェイスを作成してください。

    [C#]

    private void Form1_Load(object sender, System.EventArgs e) {

            Bar bar1 = new Bar(tChart1.Chart);

            bar1.FillSampleValues(20);

    }

    private void button1_Click(object sender, System.EventArgs e) {

            saveFileDialog1.Filter = "TenFile (.ten)|*.ten";

            saveFileDialog1.ShowDialog();

            if(saveFileDialog1.FileName != "") {

                tChart1.Export.Template.IncludeData = true;

                tChart1.Export.Template.Save(saveFileDialog1.FileName);

            }

    }

    private void button2_Click(object sender, System.EventArgs e) {

            tChart1.Dispose();

            tChart1 = new Steema.TeeChart.TChart();

            ini_Chart();

    }

    private void ini_Chart() {

            this.tChart1.Header.Lines = new string[] {"TeeChart"};

            this.tChart1.Location = new System.Drawing.Point(24, 24);

            this.tChart1.Name = "tChart1";

            this.tChart1.Size = new System.Drawing.Size(400, 240);

            this.tChart1.TabIndex = 5;

            this.Controls.AddRange(new System.Windows.Forms.Control[] {this.tChart1});

    }

    private void button3_Click(object sender, System.EventArgs e) {

            tChart1.Import.Template.LoadFileDialog();

    }

    [VB.NET]

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

            Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)

            Bar1.FillSampleValues(20)

    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

            SaveFileDialog1.Filter = "TenFile (.ten)|*.ten"

            SaveFileDialog1.ShowDialog()

            If Not SaveFileDialog1.FileName = "" Then

                TChart1.Export.Template.IncludeData = True

                TChart1.Export.Template.Save(SaveFileDialog1.FileName)

            End If

    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

            TChart1.Dispose()

            TChart1 = New Steema.TeeChart.TChart()

            Ini_Chart()

    End Sub

    Private Sub Ini_Chart()

            Me.TChart1.Header.Lines = New String() {"TeeChart"}

            Me.TChart1.Location = New System.Drawing.Point(16, 16)

            Me.TChart1.Name = "TChart1"

            Me.TChart1.Size = New System.Drawing.Size(400, 296)

            Me.TChart1.TabIndex = 3

            Me.Controls.AddRange(New System.Windows.Forms.Control() {Me.TChart1})

    End Sub

    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

            TChart1.Import.Template.LoadFileDialog()

    End Sub
    その他のデータソース
    他のデータベースからデータをインポートする詳細については、ODBCデータベースのアクセスを参照してください。


第13章 - チャートパネル上でのカスタム描画

第13章 - チャートパネル上でのカスタム描画

TeeChartのCanvasオブジェクトには多くのカスタム描画機能があります。Canvasを使用してチャートのパネルの任意の場所に図形、線、テキストを描画することができ、またペンスタイル、ブラシスタイルや色の設定もできます。

項目

TeeChart Canvas
描画の手順
カスタム描画のキャンバスへの保存
線の描画
Canvasのペンとブラシ
2Dシェープの追加
3Dシェープの追加
テキストの追加
サンプル

TeeChart Canvas

描画の手順
TeeChartのCanvasメソッドを使用する場合、描画の手順が重要になります。チャートに線を描画した後、系列にデータポイントを追加すると、系列が線の上に描画されます。「BeforeDrawSeries」イベントで線を描画すると、線がチャートのグリッドと系列の間（グリッドの上と系列の下）に描画されます。また、「AfterDraw」イベントで線を描画すると、線が系列の上に描画されます。
チャート描画においてのイベント発生の順番
  • BeforeDrawイベント

  • BeforeDrawAxesイベント

  • BeforeDrawSeriesイベント

  • AfterDrawイベント

    • 例
    [C#]
    private bool afterDraw;
    private bool beforeDraw;
    private bool beforeDrawAxis;
    private bool beforeDrawSeries;

    private void Form1_Load(object sender, System.EventArgs e) {
         SetFlags(ref beforeDraw);
         Bar bar1 = new Bar(tChart1.Chart);
         bar1.FillSampleValues(20);
         radioButton1.Checked = true;
    }
    private void SetFlags(ref bool Flag) {
         beforeDraw = false;
         afterDraw = false;
         beforeDrawAxis = false;
         beforeDrawSeries = false;
         Flag = true;
    }
    private void DrawShape(Steema.TeeChart.Drawing.Graphics3D gg) {
         gg.Brush.Color = Color.Yellow;
         gg.Pen.Visible = true;
         gg.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;
         gg.Brush.Visible = true;
         gg.Ellipse(1,1,gg.Chart.Width - 1,gg.Chart.Height - 1);
    }
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(afterDraw) {
         DrawShape(g);
        }
    }
    private void tChart1_BeforeDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(beforeDraw) {
         DrawShape(g);
        }
    }
    private void tChart1_BeforeDrawAxes(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(beforeDrawAxis) {
         DrawShape(g);
        }
    }
    private void tChart1_BeforeDrawSeries(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(beforeDrawSeries) {
         DrawShape(g);
        }
    }
    private void radioButton4_Click(object sender, System.EventArgs e) {
         SetFlags(ref afterDraw);
         tChart1.Refresh();
    }
    private void radioButton3_Click(object sender, System.EventArgs e) {
         SetFlags(ref beforeDrawSeries);
         tChart1.Refresh();
    }
    private void radioButton2_Click(object sender, System.EventArgs e) {
         SetFlags(ref beforeDrawAxis);
         tChart1.Refresh();
    }
    private void radioButton1_Click(object sender, System.EventArgs e) {
         SetFlags(ref beforeDraw);
         tChart1.Refresh();
    }

    [VB.NET]
    Private BeforeDraw As Boolean
    Private BeforeDrawAxis As Boolean
    Private BeforeDrawSeries As Boolean
    Private AfterDraw As Boolean

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        SetFlags(BeforeDraw)
        Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
        Bar1.FillSampleValues(20)
        RadioButton1.Checked = True
    End Sub
    Private Sub SetFlags(ByRef Flag As Boolean)
        BeforeDraw = False
        BeforeDrawAxis = False
        BeforeDrawSeries = False
        AfterDraw = False
        Flag = True
    End Sub
    Private Sub DrawShape(ByVal gg As Steema.TeeChart.Drawing.Graphics3D)
        gg.Brush.Color = Color.Yellow
        gg.Pen.Visible = True
        gg.Pen.Style = Drawing.Drawing2D.DashStyle.Dash
        gg.Brush.Visible = True
        gg.Ellipse(1, 1, gg.Chart.Width - 1, gg.Chart.Height - 1)
    End Sub
    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.AfterDraw
        If AfterDraw = True Then
         DrawShape(g)
        End If
    End Sub
    Private Sub TChart1_BeforeDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.BeforeDraw
        If BeforeDraw = True Then
         DrawShape(g)
        End If
    End Sub
    Private Sub TChart1_BeforeDrawAxes(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.BeforeDrawAxes
        If BeforeDrawAxis = True Then
         DrawShape(g)
        End If
    End Sub
    Private Sub TChart1_BeforeDrawSeries(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles TChart1.BeforeDrawSeries
        If BeforeDrawSeries = True Then
         DrawShape(g)
        End If
    End Sub
    Private Sub RadioButton4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton4.Click
        SetFlags(AfterDraw)
        TChart1.Refresh()
    End Sub
    Private Sub RadioButton3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton3.Click
        SetFlags(BeforeDrawSeries)
        TChart1.Refresh()
    End Sub
    Private Sub RadioButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton2.Click
        SetFlags(BeforeDrawAxis)
        TChart1.Refresh()
    End Sub
    Private Sub RadioButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButton1.Click
        SetFlags(BeforeDraw)
        TChart1.Refresh()
    End Sub

    カスタム描画のキャンバスへの保存
    チャートのイベントでキャンバスへの表示コードを記述しなければ、カスタム描画はキャンバスに保存されません。従って、アプリケーションが最小化されたり、他のウインドウがその上に表示されたりすると、描画した内容が描画が消えます。

    線の描画
    Canvasに線を追加してみましょう。
    例（チャートの左上から右下に斜め線を描画）

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            line1.FillSampleValues(20);
            line1.VertAxis = VerticalAxis.Both;
            line1.HorizAxis = HorizontalAxis.Both;
            tChart1.Aspect.View3D = false;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            Point s = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position);
            Point e = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position);
            g.MoveTo(s);
            g.LineTo(e,0);
    }

    [VB.NET]
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Line1.FillSampleValues(20)
            Line1.VertAxis = Steema.TeeChart.VerticalAxis.Both
            Line1.HorizAxis = Steema.TeeChart.HorizontalAxis.Both
            TChart1.Aspect.View3D = False
    End Sub

    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim S As New Point(TChart1.Axes.Left.Position, TChart1.Axes.Top.Position)
            Dim E As New Point(TChart1.Axes.Right.Position, TChart1.Axes.Bottom.Position)
            g.MoveTo(S)
            g.LineTo(E, 0)
    End Sub

    3Dチャートでは、軸の位置は3D直交の移動によりチャート領域からのオフセットになります。同じように線もそのオフセットとなります。
    例（チャートの左上から右下に斜め線を描画）

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            line1.FillSampleValues(20);
            line1.VertAxis = VerticalAxis.Both;
            line1.HorizAxis = HorizontalAxis.Both;
            tChart1.Aspect.Chart3DPercent = 50;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            Steema.TeeChart.Canvas.Point3D s = new Steema.TeeChart.Canvas.Point3D();
            s.X = tChart1.Axes.Left.Position;
            s.Y = tChart1.Axes.Top.Position;
            s.Z = 0;

            Steema.TeeChart.Canvas.Point3D e = new Steema.TeeChart.Canvas.Point3D();
            e.X = tChart1.Axes.Right.Position;
            e.Y = tChart1.Axes.Bottom.Position;
            e.Z = tChart1.Aspect.Width3D;

            g.MoveTo(s);
            g.LineTo(e);
    }

    [VB.NET]
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Line1.FillSampleValues(20)
            Line1.VertAxis = Steema.TeeChart.VerticalAxis.Both
            Line1.HorizAxis = Steema.TeeChart.HorizontalAxis.Both
            TChart1.Aspect.Chart3DPercent = 50
    End Sub

    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim S As New Steema.TeeChart.Canvas.Point3D()
            S.X = TChart1.Axes.Left.Position
            S.Y = TChart1.Axes.Top.Position
            S.Z = 0

            Dim E As New Steema.TeeChart.Canvas.Point3D()
            E.X = TChart1.Axes.Right.Position
            E.Y = TChart1.Axes.Bottom.Position
            E.Z = TChart1.Aspect.Width3D

            g.MoveTo(S)
            g.LineTo(E)
    End Sub

    Canvasのペンとブラシ
    上記の線の描画で使用されるペンとブラシを、線が描画される前に設定します。
    例（描画の前にペンとブラシを設定）

    [C#]
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            Point p5 = new Point(line1.CalcXPos(5), line1.CalcYPos(5));
            Point p15 = new Point(line1.CalcXPos(15), line1.CalcYPos(15));
            g.Pen.DashCap = System.Drawing.Drawing2D.DashCap.Triangle;
            g.Pen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;
            g.Pen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
            g.Pen.Transparency = 70;
            g.Pen.Width = 3;
            g.Pen.Color = Color.BlueViolet;
            g.MoveTo(p5);
            g.LineTo(p15, 0);
    }

    [VB.NET]
    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim P5 As New Point(Line1.CalcXPos(5), Line1.CalcYPos(5))
            Dim P15 As New Point(Line1.CalcXPos(15), Line1.CalcYPos(15))
            g.Pen.DashCap = System.Drawing.Drawing2D.DashCap.Triangle
            g.Pen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor
            g.Pen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot
            g.Pen.Transparency = 70
            g.Pen.Width = 3
            g.Pen.Color = Color.BlueViolet
            g.MoveTo(P5)
            g.LineTo(P15, 0)
    End Sub

    2Dシェープの追加
    この例は、矩形をチャート領域の中心に追加します。

    例（2D）

    [C#]
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            Size s = new Size(100,100);
            Point l = new Point(g.ChartXCenter - (s.Width / 2), g.ChartYCenter - (s.Height / 2));
            Rectangle r = new Rectangle(l,s);
            g.Pen.Color = Color.Aquamarine;
            g.Brush.Color = Color.Blue;
            g.Rectangle(r);
    }

    [VB.NET]
    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim S As New Size(100, 100)
            Dim L As New Point(g.ChartXCenter - (S.Width / 2), g.ChartYCenter - (S.Height / 2))
            Dim R As New Rectangle(L, S)
            g.Pen.Color = Color.Aquamarine
            g.Brush.Color = Color.Blue
            g.Rectangle(R)
    End Sub

    例（3D）
    3Dチャートでは矩形をＺ方向に移動することもできます。「RectangleWithZ」メソッドを参照してください。この例は、左側の壁に矩形を配置しますが、チャートの後ろの壁の方向に半分移動します。

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            point3DSeries1.LinePen.Visible = false;
            point3DSeries1.FillSampleValues(20);
            point3DSeries1.VertAxis = VerticalAxis.Both;
            point3DSeries1.HorizAxis = HorizontalAxis.Both;
            tChart1.Aspect.Chart3DPercent = 50;
            tChart1.Axes.Depth.Visible = true;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            Size s = new Size(100,100);
            Point l = new Point(tChart1.Axes.Left.Position, g.ChartYCenter - (s.Height / 2));
            Rectangle r = new Rectangle(l,s);
            g.Pen.Color = Color.Aquamarine;
            g.Brush.Color = Color.Blue;
            g.Rectangle(r, tChart1.Aspect.Width3D/2);
    }

    [VB.NET]
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Point3DSeries1.LinePen.Visible = False
            Point3DSeries1.FillSampleValues(20)
            Point3DSeries1.VertAxis = Steema.TeeChart.VerticalAxis.Both
            Point3DSeries1.HorizAxis = Steema.TeeChart.HorizontalAxis.Both
            TChart1.Aspect.Chart3DPercent = 50
            TChart1.Axes.Depth.Visible = True
    End Sub

    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim S As New Size(100, 100)
            Dim L As New Point(TChart1.Axes.Left.Position, g.ChartYCenter - (S.Height / 2))
            Dim R As New Rectangle(L, S)
            g.Pen.Color = Color.Aquamarine
            g.Brush.Color = Color.Blue
            g.Rectangle(R, TChart1.Aspect.Width3D / 2)
    End Sub

    3Dシェープの追加
    3Dチャートに3D図形を追加することができます。この例はチャートの矩形の中心に立方体を描画します。

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            point3DSeries1.LinePen.Visible = false;
            point3DSeries1.FillSampleValues(20);
            tChart1.Aspect.Chart3DPercent = 50;
            tChart1.Legend.Visible = false;
            tChart1.Axes.Depth.Visible = true;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            Size s = new Size(50,50);
            Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2));
            Rectangle r = new Rectangle(p,s);
            g.Cube(r, 0, 20, true);
    }

    [VB.NET]
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Point3DSeries1.LinePen.Visible = False
            Point3DSeries1.FillSampleValues(20)
            TChart1.Aspect.Chart3DPercent = 50
            TChart1.Legend.Visible = False
            TChart1.Axes.Depth.Visible = True
    End Sub

    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim S As New Size(50, 50)
            Dim P As New Point(g.ChartXCenter - (S.Width / 2), g.ChartYCenter - (S.Height / 2))
            Dim R As New Rectangle(P, S)
            g.Cube(R, 0, 20, True)
    End Sub

    テキストの追加
    2Dテキストの配置
    矩形内にテキストを追加
    例

    [C#]
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            string text = "My Text";
            Size s = new Size(150, 50);
            Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2));
            Rectangle r = new Rectangle(p,s);
            g.Pen.Color = Color.Blue;
            g.Rectangle(r);

            g.TextOut(Convert.ToInt32(g.ChartXCenter - (g.TextWidth(text)/2)), Convert.ToInt32(g.ChartYCenter - (g.TextHeight(text)/2)), text);
    }

    [VB.NET]
    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim Text As String = "My Text"
            Dim S As New Size(50, 50)
            Dim P As New Point(g.ChartXCenter - (S.Width / 2), g.ChartYCenter - (S.Height / 2))
            Dim R As New Rectangle(P, S)
            g.Pen.Color = Color.Blue
            g.Rectangle(R)

            g.TextOut(Convert.ToInt32(g.ChartXCenter - (g.TextWidth(Text) / 2)), Convert.ToInt32(g.ChartYCenter - (g.TextHeight(Text) / 2)), Text)
    End Sub

    3Dテキストの配置
    TextOutメソッドを使用して、異なる3D面にテキストを描画
    例

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            point3DSeries1.FillSampleValues(20);
            point3DSeries1.LinePen.Visible = false;
            tChart1.Aspect.Chart3DPercent = 50;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            string text = "My Text";
            g.TextOut(g.ChartXCenter, g.ChartYCenter, tChart1.Aspect.Width3D / 2, text);
    }

    [VB.NET]
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Point3DSeries1.FillSampleValues(20)
            Point3DSeries1.LinePen.Visible = False
            TChart1.Aspect.Chart3DPercent = 50
    End Sub

    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            Dim Text As String = "My Text"
            g.TextOut(g.ChartXCenter, g.ChartYCenter, TChart1.Aspect.Width3D / 2, Text)
    End Sub

    サンプル
    この例は系列の3番目の値と10番目の値の間に線を描画し、最初と最後の値の差を表示します。
    例

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            tChart1.Aspect.View3D = false;
            line1.FillSampleValues(20);
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
            if(tChart1.Series.Count > 0){
                if(tChart1.Series[0].Count > 10) {
                    Series s = tChart1.Series[0];
                    int h = Convert.ToInt32(g.TextHeight("H"));
                    Point p1 = new Point(s.CalcXPos(3), s.CalcYPos(3));
                    Point p2 = new Point(s.CalcXPos(10), s.CalcYPos(10));
                    g.Pen.Color = Color.Blue;
                    g.Pen.Width = 2;
                    g.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;
                    g.MoveTo(p1);
                    g.LineTo(p2, 0);
                    g.TextOut(p1.X, p1.Y - h, "Point value: " + s.YValues[3].ToString());
                    g.TextOut(p2.X, p2.Y, "Point value: " + s.YValues[10].ToString());
                    g.TextOut(p2.X, p2.Y + h, "Change is: " + Convert.ToString(s.YValues[3] - s.YValues[10]));
                }
            }
    }

    [VB.NET]
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            TChart1.Aspect.View3D = False
            Line1.FillSampleValues(20)
    End Sub

    Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
            If TChart1.Series.Count > 0 Then
                If TChart1.Series(0).Count > 10 Then
                    Dim S As Steema.TeeChart.Series = TChart1.Series(0)
                    Dim H As Integer = Convert.ToInt32(g.TextHeight("H"))
                    Dim P1 As New Point(S.CalcXPos(3), S.CalcYPos(3))
                    Dim P2 As New Point(S.CalcXPos(10), S.CalcYPos(10))
                    g.Pen.Color = Color.Blue
                    g.Pen.Width = 2
                    g.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash
                    g.MoveTo(P1)
                    g.LineTo(P2, 0)
                    g.TextOut(P1.X, P1.Y - H, "Point value: " & S.YValues(3))
                    g.TextOut(P2.X, P2.Y, "Point value: " & S.YValues(10))
                    g.TextOut(P2.X, P2.Y + H, "Change is: " & (S.YValues(3) - S.YValues(10)))
                End If
            End If
    End Sub


第14章 - チャートの印刷

第14章 - チャートの印刷
項目

標準印刷
Printコマンド
印刷の向き
印刷のプレビュー
グレースケール印刷

拡張印刷メソッド
複数チャートの印刷
1ページに複数チャートを印刷
他の印刷項目との混在印刷

標準印刷

Printコマンド
チャートを印刷する場合は、Printメソッドを使用してください。スクリーンに表示しているチャートをそのまま印刷します。

[C#]
tChart1.Printer.Print();

[VB.NET]
TChart1.Printer.Print()

印刷の向き
デフォルトの設定とは別に、Landscapeパラメータを使用することにより横方向や縦方向で印刷することができます。印刷が終わるとデフォルトのプリンタの設定に戻ります。印刷方向のデフォルト値を変更するにはLandscapeプロパティ（True：横、False：縦）を設定してください。

[C#]
tChart1.Printer.Landscape = true;
tChart1.Printer.Print();

[VB.NET]
TChart1.Printer.Landscape = True
TChart1.Printer.Print()

印刷のプレビュー
印刷プレビューウインドウで印刷の前に、その確認ができます。また、PrintPreviewメソッドを実行して印刷プレビューを開いて、印刷パラメータを変更できます。

[C#]
tChart1.Printer.Preview();

[VB.NET]
TChart1.Printer.Preview()

グレースケール印刷
グレースケールでの印刷の場合、チャートの区別が可能か確認してください。尚、ブラシのパターンをチャートの系列に設定すれば、チャートがより見やすくなります。

また、Grayscaleプロパティを使用することにより、カラープリンタにグレースケールのチャートを印刷できます。

[C#]
tChart1.Printer.Grayscale = true;
tChart1.Printer.Print(true);

[VB.NET]
TChart1.Printer.Grayscale = True
TChart1.Printer.Print(True)

拡張印刷メソッド

複数チャートの印刷
チャートの印刷後にページの排出を行わない場合は、BeginPrintメソッド（印刷の開始）とEndPrintメソッド(印刷の終了)を使用してください。この設定により複数のチャートやカスタムなデータを同一ページに印刷できます。

例（1ページに2つのチャートを印刷）
[C#]
private void button1_Click(object sender, System.EventArgs e) {
        tChart1.Printer.BeginPrint();
        tChart1.Printer.Print(tChart2.Chart,new Rectangle(100,10,300,200));
        tChart1.Printer.Print(new Rectangle(100,300,300,200));
        tChart1.Printer.EndPrint();
}
[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        TChart1.Printer.BeginPrint()
        TChart1.Printer.Print(TChart2.Chart, New Rectangle(100, 10, 300, 200))
        TChart1.Printer.Print(New Rectangle(100, 300, 300, 200))
        TChart1.Printer.EndPrint()
End Sub

1ページに複数のチャートの印刷プレビュー
印刷プレビューは、複数のチャートを設定できます。チャートの位置は、PrintメソッドのRectangleを設定することにより制御されます。

例（印刷プレビューに2つのチャートを表示）
[C#]
private void button1_Click(object sender, System.EventArgs e) {
        tChart1.Printer.BeginPrint();
        tChart1.Printer.Print(tChart2.Chart,new Rectangle(100,10,300,200));
        tChart1.Printer.Print(new Rectangle(100,300,300,200));
        tChart1.Printer.Preview();
}
[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        TChart1.Printer.BeginPrint()
        TChart1.Printer.Print(TChart2.Chart, New Rectangle(100, 10, 300, 200))
        TChart1.Printer.Print(New Rectangle(100, 300, 300, 200))
        TChart1.Printer.Preview()
End Sub

他の印刷項目との混在印刷
ChartPrintイベントを使用することにより、TeeChartの印刷や他の印刷を混ぜて出力することができます。
下記の例は、TeeChartのヘッダーからテキストを取得して2つのTChartオブジェクトと一緒に1つのページに印刷します。

[C#]
private void button1_Click(object sender, System.EventArgs e) {
        tChart1.Printer.BeginPrint();
        tChart1.Printer.Print(tChart2.Chart,new Rectangle(100,10,300,200));
        tChart1.Printer.Print(new Rectangle(100,300,300,200));
        tChart1.Printer.EndPrint();
}

private void tChart1_ChartPrint(object sender, System.Drawing.Printing.PrintPageEventArgs e) {
        e.Graphics.DrawString("Chart: "+((Steema.TeeChart.ChartPrintJob)sender).Chart.Header.Text,
            this.Font,new SolidBrush(Color.Black),100,((Steema.TeeChart.ChartPrintJob)sender).ChartRect.Bottom+10);
}

[VB.NET]
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        TChart1.Printer.BeginPrint()
        TChart1.Printer.Print(TChart2.Chart, New Rectangle(100, 10, 300, 200))
        TChart1.Printer.Print(New Rectangle(100, 300, 300, 200))
        TChart1.Printer.EndPrint()
End Sub

Private Sub TChart1_ChartPrint(ByVal sender As Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles TChart1.ChartPrint
        e.Graphics.DrawString("Chart: " & (CType(sender, Steema.TeeChart.ChartPrintJob)).Chart.Header.Text, _
        Me.Font, New SolidBrush(Color.Black), 100, (CType(sender, Steema.TeeChart.ChartPrintJob)).ChartRect.Bottom + 10)
End Sub


第15章 - 3Dチャート

第15章 - 3Dチャート
項目

チャートの描画モード
(3D)チャートエディタのページ
2Dチャート
3D直交チャート
3D「ネイティブ」Windowsチャート

チャートの描画モード

(3D)チャートエディタのページ
デザイン時に、2D/3Dの表示オプションをチャートエディタにより設定できます。

2Dチャート
チャートエディタを使用することにより、デザイン時に2Dチャートを選択することができます。エディタのページで3Dのチェックボックスを外すと2Dモードが有効になります。実行時にチャートを2Dモードに変更するには下記のように記述してください。

[C#]
tChart1.Aspect.View3D = false;

[VB.NET]
TChart1.Aspect.View3D = False

2Dチャートを使用することには特に問題はありません。全てのオブジェクトの座標値はチャートのパネルやチャートの矩形と関連した位置を表します。

3D直交チャート
3D直交モードは、3D効果を有効にするもので、デフォルトとなっています。TeeChartは、TChart1.Aspect.Chart3DPercentプロパティにより直交な角度で深さのある効果で描画します（デザイン時には、チャートエディタのページで設定できます）。3D直交チャートの回転は不可能で、下軸は常に水平です。
キャンバスに描画する時は、Width3DおよびHeight3Dの3Dオフセットを考慮する必要があります。チャートの背面にオブジェトを描画する場合は、オフセットを付加する必要があります。以下の例を参照してください。

この例は対角線をチャートの前面に描画します。
[C#]
private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
        Point p1 = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position);
        Point p2 = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position);
        g.MoveTo(p1);
        g.LineTo(p2, 0);
}

[VB.NET]
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
        Dim P1 As New Point(TChart1.Axes.Left.Position, TChart1.Axes.Top.Position)
        Dim P2 As New Point(TChart1.Axes.Right.Position, TChart1.Axes.Bottom.Position)
        g.MoveTo(P1)
        g.LineTo(P2, 0)
End Sub

この例は対角線をチャートの背面に描画します。
[C#]
private void tChart1_AfterDraw(object sender, Steema.TeeChart.Canvas.Graphics3D g) {
        int width3D = tChart1.Aspect.Width3D;
        Point p1 = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position);
        Point p2 = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position);
        g.MoveTo(p1, width3D);
        g.LineTo(p2, width3D);
}

[VB.NET]
Private Sub TChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Canvas.Graphics3D) Handles TChart1.AfterDraw
        Dim Width3D As Integer = TChart1.Aspect.Width3D
        Dim P1 As New Point(TChart1.Axes.Left.Position, TChart1.Axes.Top.Position)
        Dim P2 As New Point(TChart1.Axes.Right.Position, TChart1.Axes.Bottom.Position)
        g.MoveTo(P1, Width3D)
        g.LineTo(P2, Width3D)
End Sub

実行時、3Dチャートの表示プロパティを変更する場合はAspectインタフェースを使用してください （注意：全てのオプションが直交チャートに利用できる訳ではありません）。

3D「ネイティブ」Windowsチャート
3D「ネイティブ」Windowsモードではチャートの回転と、上下方向の90度まで回転できます。チャート全体のズームも可能です。（チャート内のズームも可能です。ズームとスクロールをご覧ください。）

3D「ネイティブ」Windowsモードの選択は、デザイン時にエディタページの3Dタブ内にある直交のチェックボックスを外すだけです。

[C#]
tChart1.Aspect.Orthogonal = false;
[VB.NET]
TChart1.Aspect.Orthogonal = False

チャートエディタで直交モードを外すと、デザイン時の表示を設定する回転と仰角のスライドバーを有効にします。TeeChartのキャンバスの詳細についてはチャートパネルのカスタム描画を参照してください。


第16章 - TeeChartの他のコントロール

第16章 - TeeChartの他のコントロール
項目

TeeChartの他のコントロールの使用
コンポーネントの選択と貼り付け
TeeChartと他のコンポーネントの接続
ButtonColor
ButtonPen
ChartListBox
Commander
Editor
GalleryPanel

TeeChartの他のコントロールの使用

TeeChart Pro .NET 3Jには、チャートアプリケーションの実行時の機能を強化するため、他に複数のコントロールがあります。

ButtonColor
ButtonPen
ChartListBox
Commander
Editor
GalleryPanel

コンポーネントの選択と貼り付け
TeeChart Pro .NET 3JをVisual Studio .NETのツールボックスに追加すると、他のコントロールも自動的に追加されます。

TeeChartと他のコンポーネントの接続
Chartプロパティを使用することにより、TeeChartにCommanderや他のコンポーネントを接続することができます。

例
[C#]
commander1.Chart = tChart1;
[VB.NET]
Commander1.Chart = TChart1

ButtonColor
ButtonColorは、色エディタを表示して、色や透明度を設定するためにTeeChartオブジェクトのColorプロパティに接続することができます。

例
[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        tChart1.Aspect.View3D = false;
        line1.FillSampleValues(20);
        colorBand1.Axis = tChart1.Axes.Left;
        colorBand1.Start = line1.YValues.Maximum * 0.8;
        colorBand1.End = line1.YValues.Minimum * 1.2;
        buttonPen1.Pen = colorBand1.Pen;
}

private void buttonColor1_Click(object sender, System.EventArgs e) {
        colorBand1.Color = buttonColor1.Color;
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        TChart1.Aspect.View3D = False
        Line1.FillSampleValues(20)
        ColorBand1.Axis = TChart1.Axes.Left
        ColorBand1.Start = Line1.YValues.Maximum * 0.8
        ColorBand1.End = Line1.YValues.Minimum * 1.2
        ButtonPen1.Pen = ColorBand1.Pen
End Sub

Private Sub ButtonColor1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonColor1.Click
        ColorBand1.Color = ButtonColor1.Color
End Sub
ButtonPen
ButtonPenは、枠エディタを表示して、表示、色、幅、スタイル、透明度などを設定するためにTeeChartオブジェクトのPenプロパティに接続することができます。

例
[C#]
private void Form1_Load(object sender, System.EventArgs e) {
        tChart1.Aspect.View3D = false;
        line1.FillSampleValues(20);
        colorBand1.Axis = tChart1.Axes.Left;
        colorBand1.Start = line1.YValues.Maximum * 0.8;
        colorBand1.End = line1.YValues.Minimum * 1.2;
        buttonPen1.Pen = colorBand1.Pen;
}

private void buttonColor1_Click(object sender, System.EventArgs e) {
        colorBand1.Color = buttonColor1.Color;
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        TChart1.Aspect.View3D = False
        Line1.FillSampleValues(20)
        ColorBand1.Axis = TChart1.Axes.Left
        ColorBand1.Start = Line1.YValues.Maximum * 0.8
        ColorBand1.End = Line1.YValues.Minimum * 1.2
        ButtonPen1.Pen = ColorBand1.Pen
End Sub

Private Sub ButtonColor1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonColor1.Click
        ColorBand1.Color = ButtonColor1.Color
End Sub

TeeListBox
ChartListBoxは、実行時にチャート内の系列のリストを表示します。ChartListBoxを使用することにより、チャート系列の表示/非表示を切り替えたり、機能を制限することができます。

Commander
Commanderは、実行時にチャートのナビゲーションやコントロールのパラメータを変更することができます（チャートエディタを使用します）。ナビゲーションボタンを選択し、マウスの左ボタンを押してチャートをドラッグするとチャートが移動します。

Editor
Editorは、TeeChartのエディタをカスタマイズするために使用できます。

[C#]

private void Form1_Load(object sender, System.EventArgs e) {
        editor1.Chart = tChart1;
        line1.FillSampleValues(20);
}

private void button1_Click(object sender, System.EventArgs e) {
        editor1.DefaultTab = Steema.TeeChart.Editors.ChartEditorTabs.Legend;
        editor1.Title = "My Application Title";
        editor1.ShowModal();
}

[VB.NET]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Editor1.Chart = TChart1
        Line1.FillSampleValues(20)
End Sub

Private Sub ButtonColor1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonColor1.Click
        Editor1.DefaultTab = Steema.TeeChart.Editors.ChartEditorTabs.Legend
        Editor1.Title = "My Application Title"
        Editor1.ShowModal()
End Sub

GalleryPanel
GalleryPanelは、TeeChart系列のギャラリを表示します。


第17章 - デザイン時および実行時に必要な条件

第17章 - デザイン時および実行時に必要な条件
項目

TeeChart実行時の必要条件
TeeChartのランタイムファイル

実行時のヘルプのサポート
構成

TeeChartの言語のサポート
構成
デザイン時の言語

ASP.NETアプリケーションのサポート
構成

デザイン時と実行時のライセンス
説明
運用上の考慮点
dllでTeeChartを使用
Visual VC++でTeeChartを使用
実行時の配布

デザイン時と実行時におけるカスタムテーマの設定方法

TeeChart実行時の必要条件

このチュートリアルでは、TeeChartアプリケーションのインストールについて説明します。

TeeChartのランタイムファイル
 TeeChartアプリケーションを配布する場合、TeeChart.dllが必要です。また、TeeChartアプリケーションでSteema.TeeChart.Languages名前空間を使用する場合、Steema.TeeChart.Languages名前空間を使用する場合、TeeChart.Languages.dllも必要です。TeeChartのdllファイルをアプリケーションディレクトリの下のbinディレクトリにコピーするか、レジストリのAssemblyFoldersキーにフォルダを登録するか、あるいはグローバル アセンブリ キャッシュ(GAC)に追加する必要があります。GACについては、このリンクを参照してください。

実行時のヘルプのサポート

TeeChartのデザイン時にチャートエディタで使用するヘルプは実行時には影響を与えません。実行時にチャートエディタのヘルプボタンにより起動するヘルプファイルを作成することができます。

構成
  • chm形式(HTML Help v1)でヘルプファイルを作成します。
  • 実行時に使用するヘルプファイルをインストールする際に次のレジストリキーに登録します：
         [HKEY_LOCAL_MACHINEHelp]

"YourHelpfile.chm"="drive:\directory"

    TeeChartの言語のサポート

    TeeChartの言語は、TeeChartエディタや他のTeeChartダイアログを異なる言語で表示するために、実行時にサポートされます。

    構成
    実行時に言語を変更するには、プロジェクトの参照設定にTeeChart.Languages.dllを追加し、次のコード「Steema.TeeChart.Languages.xxxx.Activate()」（xxxxは言語名）を実行します：

    例
    言語を選択するためにコンボボックスを使用：
    private void Form1_Load(object sender, System.EventArgs e) {

            commander1.Chart = tChart1;

            tChart1.Aspect.View3D = false;

            line1.FillSampleValues(20);

            comboBox1.Items.Add("Arabic");

            comboBox1.Items.Add("Brazilian");

            comboBox1.Items.Add("Catalan");

            comboBox1.Items.Add("Chinese Simple");

            comboBox1.Items.Add("Chinese Traditional");

            comboBox1.Items.Add("Danish");

            comboBox1.Items.Add("Dutch");

            comboBox1.Items.Add("English");

            comboBox1.Items.Add("Finnish");

            comboBox1.Items.Add("French");

            comboBox1.Items.Add("Galician");

            comboBox1.Items.Add("German");

            comboBox1.Items.Add("Hebrew");

            comboBox1.Items.Add("Hellenic");

            comboBox1.Items.Add("Hungarian");

            comboBox1.Items.Add("Indonesian");

            comboBox1.Items.Add("Italian");

            comboBox1.Items.Add("Japanese");

            comboBox1.Items.Add("Korean");

            comboBox1.Items.Add("Norwegian");

            comboBox1.Items.Add("Polish");

            comboBox1.Items.Add("Portuguese");

            comboBox1.Items.Add("Russian");

            comboBox1.Items.Add("Slovak");

            comboBox1.Items.Add("Slovene");

            comboBox1.Items.Add("Spanish");

            comboBox1.Items.Add("Swedish");

            comboBox1.Items.Add("Turkish");

            comboBox1.Items.Add("Ukranian");

            comboBox1.SelectedItem = "English";

     }

private void comboBox1_SelectedIndexChanged(object sender, System.EventArgs e) {

            switch(comboBox1.SelectedIndex) {

                case 0: Steema.TeeChart.Languages.Arabic.Activate(); break;

                case 1: Steema.TeeChart.Languages.Brazilian.Activate(); break;

                case 2: Steema.TeeChart.Languages.Catalan.Activate(); break;

                case 3: Steema.TeeChart.Languages.ChineseSimp.Activate(); break;

                case 4: Steema.TeeChart.Languages.ChineseTrad.Activate(); break;

                case 5: Steema.TeeChart.Languages.Danish.Activate(); break;

                case 6: Steema.TeeChart.Languages.Dutch.Activate(); break;

                case 7: Steema.TeeChart.Languages.English.Activate(); break;

                case 8: Steema.TeeChart.Languages.Finnish.Activate(); break;

                case 9: Steema.TeeChart.Languages.French.Activate(); break;

                case 10: Steema.TeeChart.Languages.Galician.Activate(); break;

                case 11: Steema.TeeChart.Languages.German.Activate(); break;

                case 12: Steema.TeeChart.Languages.Hebrew.Activate(); break;

                case 13: Steema.TeeChart.Languages.Hellenic.Activate(); break;

                case 14: Steema.TeeChart.Languages.Hungarian.Activate(); break;

                case 15: Steema.TeeChart.Languages.Indonesian.Activate(); break;

                case 16: Steema.TeeChart.Languages.Italian.Activate(); break;

                case 17: Steema.TeeChart.Languages.Japanese.Activate(); break;

                case 18: Steema.TeeChart.Languages.Korean.Activate(); break;

                case 19: Steema.TeeChart.Languages.Norwegian.Activate(); break;

                case 20: Steema.TeeChart.Languages.Polish.Activate(); break;

                case 21: Steema.TeeChart.Languages.Portuguese.Activate(); break;

                case 22: Steema.TeeChart.Languages.Russian.Activate(); break;

                case 23: Steema.TeeChart.Languages.Slovak.Activate(); break;

                case 24: Steema.TeeChart.Languages.Slovene.Activate(); break;

                case 25: Steema.TeeChart.Languages.Spanish.Activate(); break;

                case 26: Steema.TeeChart.Languages.Swedish.Activate(); break;

                case 27: Steema.TeeChart.Languages.Turkish.Activate(); break;

                case 28: Steema.TeeChart.Languages.Ukrainian.Activate(); break;

            }

     }

    デザイン時の言語
    デザイン時にTeeChart.Languages.dllを参照せずにフォームにTeeChartを追加すると有効にするデフォルトの言語を設定することができます。デザイン時の言語サポートを有効にするには、AutoLanguageレジストリキーを追加し、Trueに設定する必要があります。

    例
    [HKEY_CURRENT_USER\Software\Steema Software\TeeChart.Net\DesignTime]

"AutoLanguage"="True"

    言語を設定するには、最初にプロジェクトを開いてチャート上で右クリックメニューの「Options」を使用して有効にしたい言語を設定してください。

    例
    [HKEY_CURRENT_USER\Software\Steema Software\TeeChart.Net\DesignTime]

"Language"=dword:00000011  //Hex 11 is decimal 17 (Japanese)

    ASP.NETアプリケーションのサポート

    この章にはASP.NETのWeb フォーム アプリケーションの配布に適切な情報があります。
    構成
     WebChartのTempChartプロパティを「File」に設定すると、テンポラリチャートの保存フォルダを見つけるためにレジストリ設定を使用します。WebChartのTempChartプロパティを「Session」に設定すると、レジストリ設定を使用しません。WebChartアプリケーションの構成に関する詳細については「第9章 ASP.NETアプリケーション」を参照してください。

    インストール
    「IISサンプルのインストール」を有効にしてTeeChart for .NET 3J をインストールすると、「C:\TeeChartForNET_Temp」が作成されます。

    一時画像ファイル
    WebFormに配置するWebChartコントロールのTempChartプロパティがFileの場合、Webアプリケーションで表示されるチャートがキャッシュの一時画像ファイルとして、
    「C:\TeeChartForNET_Temp」に保存されます。この画像がクライアントのブラウザーに表示されます。

    手動による設定
    一時画像ファイルを使用するWebFormアプリケーションのセットアップを行う場合や、本製品のセットアップによる設定を変更する場合は、以下の事を行ってください。
    尚、この例では、
    一時画像ファイルの保存場所：C:\TeeChartForNET_Temp
    |--- _chart_temp
    仮想ディレクトリ：TeeChartForNET
    としています。

    1.フォルダの設定
    C:\TeeChartForNET_Temp
    |--- _chart_temp
    このフォルダのセキュリティの設定はインターネットのクライアントからの
    アクセスが可能である必要があります。

    2.IISの設定
    TeeChartForNET
    |--- _chart_temp ローカルパス：C:\TeeChartForNET_Temp\_chart_temp

    3.レジストリの設定
    HKEY_LOCAL_MACHINE
    |--- SOFTWARE
    |--- Steema Software
    |--- TeeChart.Net ----- ShareFolder REG_SZ C:\TeeChartForNET_Temp
    |-- VirtualShare REG_SZ /TeeChartForNET"

    デザイン時と実行時のライセンス

    このセクションでは、TeeChartのデザイン時や実行時におけるライセンスについて説明します。

    説明
    TeeChartは、MicrosoftのSystem.Component.LicenseProviderクラスに基づくライセンスコントロールを使用します。TeeChartインストーラを使用してTeeChartをインストールすると、レジストリにはライセンスキーが「HKEY_LOCAL_MACHINE\SOFTWARE\Steema Software\TeeChart.NET」に以下のように設定されます。：

    値の名前   = DesignKey2
    値のデータ = Steema.TeeChart.TChart is a licensed component.

    このライセンスキーにより、デザイン時にVisual Studio.NETでTeeChartが使用できます。また実行時にはキーをコンパイルしてEXEやDLLファイルに組み込むことができます。これにより、TeeChart.dllとTeeChart.languages.dllをコンパイルしたアプリケーションとともに配布できますが、配布先ではデザイン時にTeeChartが使用できません。

    運用上の考慮点
    TChartやChart、WebChartを使用するプロジェクトには「Licenses.licx」ファイルが必要です。このファイルは、チャートが追加されるときにVisual StudioのIDEによってTChart (Windows Formのチャート)やWebChart (Web Formのチャート)のプロジェクトに自動的に追加されます。デザイン時に設定しない場合は、下記のように実行時に設定を行います。
    "Steema.TeeChart.Chart c = new Steema.TeeChart.Chart();"
    次に、プロジェクトへライセンスファイルを追加します。ソリューションエクスプローラのプロジェクトを選択しマウスの右ボタンをクリックし、"追加 | 既存項目の追加"からUtilsフォルダのサンプルの"licenses.licx"を選択します。

    Licenses.licx ファイル
    このファイルは下記のようになっています。
    Steema.TeeChart.Chart, TeeChart

    Steema.TeeChart.TChart, TeeChart

    Steema.TeeChart.Web.WebChart, TeeChart
    プロジェクトによってクラス名が設定されますが、一般的には、
    Windows Form プロジェクト --- Steema.TeeChart.TChart
    コードによってチャートを作成するプロジェクト --- Steema.TeeChart.Chart
    WebChartを含むWebFormプロジェクト --- Steema.TeeChart.Web.WebChart
    となります。

    チャートがフォームに追加されると、NETは自動的に下記のようにバージョン番号とパブリックキーが付加されます。
    Steema.TeeChart.TChart, TeeChart, Version=1.1.1864.22788, Culture=neutral, PublicKeyToken=9c8126276c77bdb7
    以前のライセンス設定のないプロジェクトのライセンスのサポート
    以前のTeeChartを使用して作成したライセンスファイルの無いアプリケーションについては、ツールパレットのSteemaセクションからチャートをフォームに貼り付けることにより簡単にライセンスファイル（Licenses.licx）が生成されます。その後追加したチャートを削除してください。

    dllでTeeChartを使用
    ライセンス付きのTeeChartをdllにうまくコンパイルできたら、そのdllを別のアプリケーションで使用する場合、そのアプリケーション自体がTeeChartへの直接参照がなくても、最終アプリケーションのLicenses.licxファイルにTeeChartのライセンス行を追加することを忘れないでください。エンドユーザのアプリケーションがVisual Studio .NETで開発されていない場合、このライセンスファイルとライセンス自体は最終的なコンパイルには必要ありません。

    Visual C++.NETでTeeChartを使用
    他の.NETプログラミング言語にとっては、VC++でのライセンス実装は思っているほど簡単ではありません。microsoft.public.dotnet.frameworkのニュースグループでTim Adler氏が紹介している手順に従って、VC++プロジェクトのライセンス実装を行えます。
    抜粋：
    「私の回避策は簡単です。新規のC#プロジェクトに、C++アプリケーションと同じアプリケーション名で新規のソリューションを作成します。ダミーのフォームを作成し、そのフォームにライセンスが必要なコンポーネントをそれぞれ配置するか、それぞれのコンポーネントを参照するために自動的に生成されたlicenses.licxファイルを編集します。そしてアプリケーションをビルドします。次に、デバッグディレクトリにナビゲートして、C++アプリケーションのベースディレクトリに"*.licenses"ファイルをコピーします。そして、C++アプリケーション設定の[プロジェクト　プロパティ]->[リンカ]->[入力]->[埋め込みマネージ リソース ファイル]からこのライセンスファイルを参照し、「リビルド」してください。

    Licenses.licxファイル
    このファイルは、次の3行のうちの1つ、もしくは生成ファイルとして使用するには次の3行すべてを含んでいなければならないテキストファイルです。
    Steema.TeeChart.Chart, TeeChart

    Steema.TeeChart.TChart, TeeChart

    Steema.TeeChart.Web.WebChart, TeeChart

    このテキスト内容には少なくともプロジェクトで作成したクラス名（代表的なものとしては、Windows FormベースプロジェクトのためのSteema.TeeChart.TChartクラス、プロジェクト内でチャートをコードで作成するためのSteema.TeeChart.Chartクラス、TeeChartのWebChartコンポーネントを含んでいるWebFormプロジェクトのためのSteema.TeeChart.Web.WebChartクラス）をインクルードしてください。
    フォームにチャートを追加する際に、NETは少し長めですが正確なバージョン、アセンブリのバージョン番号、そして公開キーを自動的に追加します。
    Steema.TeeChart.TChart, TeeChart, Version=1.1.1864.22788, Culture=neutral, PublicKeyToken=9c8126276c77bdb7
    「ライセンスなし」の旧式のプロジェクトにライセンスを追加するには
    以前のTeeChartを使用して作成したライセンスファイルの無いアプリケーションについては、ツールパレットのSteemaセクションからチャートをフォームに貼り付けることにより簡単にライセンスファイル（Licenses.licx）が生成されます。その後追加したチャートを削除してください。

    実行時の配布
    Licenses.licxファイルとともにコンパイルされたEXEやDLLファイルはTeeChart.dllやTeeChart.Languages.dllと一緒に配布することができます。尚、このときTeeChartの実行時のライセンスファイルやレジストリキーの設定は必要ありません。

    デザイン時と実行時におけるカスタムテーマの設定方法

    カスタムテーマは、簡単なコードで作成できる小さなXMLファイルです。
    tChart1.Export.Theme.Save(@"C:\Steema\MyTheme.xml");
    カスタムテーマはチャートの表示に関する多くの設定（フォントやブラシ、ペン、色及び、パネルや軸、ヘッダー、フッター、凡例のスタイル）をカプセル化します。 一旦テーマが作成されると、テーマはチャートエディタのThemeタブにファイルに付けられた名前と共に表示されます。こうして、チャートエディタはテーマのファイルの場所を知ることができます。テーマファイルのフォルダは下記のようにレジストリに設定されます。
    [HKEY_LOCAL_MACHINE\SOFTWARE\Steema Software\TeeChart.NET]
    "ThemeFolder"="C:\Program Files\Steema Software\TeeChart for .NET v3\Themes"
    カスタムテーマのファイル(.XML)をこの指定したフォルダに追加すれば、チャートエディタはこれを読み込み表示します。

    参照

    第９章 - ASP.NETアプリケーション


第18章 - TeeChartのツールコレクション

第18章 - TeeChartのツールコレクション
項目

はじめに

系列ツール

カーソルツール
デザイン時
実行時

ドラッグマーカツール
デザイン時
実行時

ドラッグポイントツール
デザイン時
実行時

ドローラインツール
デザイン時
実行時

ガントドラッグツール
デザイン時
実行時

イメージツール
デザイン時
実行時

マーカチップツール
デザイン時
実行時

近傍点ツール
デザイン時
実行時

円スライスツール
デザイン時
実行時

系列アニメーションツール
デザイン時
実行時

拡張凡例ツール
デザイン時
実行時

サーフェス近傍ツール
デザイン時
実行時

フィボナッチツール
デザイン時
実行時

系列領域ツール
デザイン時
実行時

凡例パレットツール
デザイン時
実行時

系列統計ツール
デザイン時
実行時

クリップ系列ツール
デザイン時
実行時

軸ツール

軸矢印ツール
デザイン時
実行時

カラーバンドツール
デザイン時
実行時

カラーラインツール
デザイン時
実行時

グリッドバンドツール
デザイン時
実行時

軸スクロールツール
デザイン時
実行時

WebChartツール

ホットスポットツール

スクロールツール

ズームツール

その他ツール

3Dグリッド置換ツール
デザイン時
実行時

アノテーションツール
デザイン時
実行時

ページ数ツール
デザイン時
実行時

回転ツール
デザイン時
実行時

凡例スクロールバーツール
デザイン時
実行時

2D 照明ツール
デザイン時
実行時

サブチャートツール
デザイン時
実行時

フェーダツール
デザイン時
実行時

矩形ツール
デザイン時
実行時

セレクタツール
デザイン時
実行時

系列置換ツール
デザイン時
実行時

データテーブルツール
デザイン時
実行時

バナーツール
デザイン時
実行時

虫眼鏡ツール
デザイン時
実行時

はじめに

このチュートリアルでは、ユニットのコードに対して簡単にTeeChartの特別な機能を追加できるツールを紹介します。

系列ツール

カーソルツール
カーソルツールは、チャート内の全系列あるいは指定した系列にカーソルを追加します。カーソルは、水平線、垂直線、両方の指定ができます。
ドラッグマーカツール
ドラッグマーカツールは、選択された系列のマーカのマウスドラッグを有効にします。
ドラッグポイントツール
ドラッグポイントツールは、系列ポイントのマウスドラッグを有効にします。
ドローラインツール
ドローラインツールは、チャート上にマウスを使用して線の描き込み、選択、ドラッグ、削除ができます。
ガントドラッグツール
ガントドラッグツールは、ガント系列のバーのドラッグや（あるいは）リサイズを有効にします。
イメージツール
イメージツールは、指定したチャート系列の背面にイメージ（Bitmap、Jpeg、Gif、Png、Pcx）を描画します。
マーカチップツール
マーカチップツールは、マウスが系列ポイント上に移動（あるいはクリック）した場合、デフォルトのヒントウィンドウを表示します。
近傍点ツール
近傍点ツールは、マウスカーソルに最も近いポイントにマーカを移動します。このツールは、1つの系列あるいはチャート内の全系列に設定できます。
円スライスツール
円スライスツールは、円系列に対してマウスカーソルの下の円スライスを強調や分離をします。
系列アニメーションツール
系列アニメーションツールは、系列ポイントのアニメーションを実行します。
拡張凡例ツール
拡張凡例ツールは、チャート内の任意の位置にカスタムな凡例を描画します。
サーフェス近傍ツール
サーフェス近傍ツールは、サーフェス系列上にマウスを移動した際に、マウスカーソルに最も近いサーフェスセルを示します。
フィボナッチツール
フィボナッチツールは、指定されたトレンドラインに基づくフィボナッチの扇形や弧を描画します。
系列領域ツール
系列領域ツールは、（系列ポイントの）カーブで囲まれている領域に色をつけます。
凡例パレットツール
凡例パレットツールは、3D系列のパレット色で作成された凡例を描画します。
系列統計ツール
系列統計ツールは、指定された系列の複数の標準的な統計量を計算します。
クリップ系列ツール
クリップ系列ツールは、関連付けられている軸の外側の系列描画を制限します。

軸ツール

軸矢印ツール
軸矢印ツールは、軸の開始位置と終了位置に小さな矢印を表示します。この矢印は、マウスクリックした際に軸をスクロールします。
カラーバンドツール
カラーバンドツールは、指定した軸の開始位置と終了位置にバンドを描画します。バンドの色は指定できます。バンドは、軸の方向により水平あるいは垂直に設定できます。
カラーラインツール
カラーラインツールは、垂直あるいは水平の指定したチャートの軸値に線を追加します。
グリッドバンドツール
グリッドバンドツールは、指定した軸と位置のグリッド線に色付けされた矩形（バンド）を描画します。
軸スクロールツール
軸スクロールツールは、マウスドラッグにより軸のスクロールを有効にします。

その他ツール

3Dグリッド置換ツール
3Dグリッド置換ツールは、90度によりグリッドベースの系列を回転させるために、XとZの座標値を交換します。
アノテーションツール
アノテーションツールは、チャート上に指定したテキストを表示します。
ページ数ツール
ページ数ツールは、ページングされているチャートの現在表示しているページ数を表示します。
回転ツール
回転ツールは、チャート上でマウスをドラッグした際にチャートの仰角や回転を変更します。
凡例スクロールバーツール
凡例スクロールバーツールは、チャート凡例にスクロールバーを表示します。
2D 照明ツール
2D 照明ツールは、チャートキャンバス上に2次元の「照明」効果を描画します。
サブチャートツール
サブチャートツールは、単一のチャート内に複数のチャート描画を有効にします。
フェーダツール
フェーダツールは、フェードインあるいはフェードアウトのチャートアニメーションを実行します。
矩形ツール
矩形ツールは、ドラッグやリサイズが可能なアノテーションツールです。
セレクタツール
セレクタツールは、エンドユーザーに系列、軸、凡例、タイトル、などのようなチャートエレメントをクリックしてドラッグを有効にします。
系列置換ツール
系列置換ツールは、複数の系列の行と列を交換します。
データテーブルツール
データテーブルツールは、垂直軸あるいは水平軸の近くにExcelのようなテーブルを描画します。
バナーツール
バナーツールは、スクロールや点滅するテキストアニメーションを描画します。
虫眼鏡ツール
虫眼鏡ツールは、チャートの一部を拡大表示します。

チャートエディタのツールタブの追加ボタンをクリックすることにより、デザイン時にこれらのツールを追加できます。

実行時では、ほんの数行の簡単なコードが必要です。

3Dグリッド置換ツール

3Dグリッド置換ツールは、90度によりグリッドベースの系列を回転させるために、XとZの座標値を交換します。

デザイン時

3Dグリッド置換ツールは、3Dグリッドの系列を指定しなければなりません（3Dグリッドの系列とは、サーフェスやカラーグリッドなどです）。

実行時
実行時には、下記のサンプルコードを使用して3Dグリッド置換ツールを表示できます。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        Surface surface1 = new Surface(tChart1.Chart);
        GridTranspose gridTranspose1 = new GridTranspose(tChart1.Chart);
        gridTranspose1.Series = surface1;
        surface1.FillSampleValues(20);

private void button1_Click(object sender, System.EventArgs e)
        ((GridTranspose)tChart1.Tools[0]).Transpose();

[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim Surface1 As New Steema.TeeChart.Styles.Surface(TChart1.Chart)
        Dim GridTranspose1 As New Steema.TeeChart.Tools.GridTranspose(TChart1.Chart)
        Surface1.FillSampleValues(20)
        GridTranspose1.Series = Surface1
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        CType(TChart1.Tools(0), Steema.TeeChart.Tools.GridTranspose).Transpose()
End Sub

アノテーションツール

アノテーションツールは、チャート上に指定したテキストを表示します。

デザイン時

オプションタブは、テキスト、テキストの配置、ツール上にマウスが移動した際のカーソル型を設定できます。形式タブは、色、枠、パターン、ベベル、サイズ、枠の角を丸くする、透明の設定を行います。テキストタブは、テキストのフォント、色、アウトライン、文字の間隔、影のサイズや色の設定を有効にします。グラデーションタブは、テキストボックスのグラデーションの特性を定義します。影タブは、テキストボックスの影の特性を定義します。

実行時
実行時には、下記のサンプルコードを使用してアノテーションを表示できます。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        Bar bar1 = new Bar(tChart1.Chart);
        Steema.TeeChart.Tools.Annotation annotation1 = new Steema.TeeChart.Tools.Annotation(tChart1.Chart);
        annotation1.Active = true;
        annotation1.Position = AnnotationPositions.LeftTop;
        annotation1.Text = "My Chart Text";

        bar1.FillSampleValues(20);

[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
        Dim Annotation1 As New Steema.TeeChart.Tools.Annotation(TChart1.Chart)
        Annotation1.Active = True
        Annotation1.Position = Steema.TeeChart.AnnotationPositions.LeftTop
        Annotation1.Text = "My Chart Text"

        Bar1.FillSampleValues(20)
End Sub

軸矢印ツール

軸矢印ツールは、軸の開始位置と終了位置に小さな矢印を表示します。この矢印は、マウスクリックした際に軸をスクロールします。

デザイン時

軸は、軸矢印ツールを設定させるチャート軸（上、下、左、右あるいはカスタム）を設定します。複数の軸矢印ツールを追加でき、各ツールは異なる軸へ設定できます。枠は、矢印のアウトラインのペンのスタイル、色、幅、透明度、表示を設定します。矢印のボディは、色、透明度、表示、スタイル、グラデーション、イメージを設定します。長さは、ピクセル単位で矢印の長さを設定します。位置は、チャート軸の開始、終了、両方のどこに矢印ツールを表示するか設定します。スクロールは、軸矢印がクリックされた際に軸がスクロールする軸の長さのパーセンテージを設定します。逆スクロールは、スクロールの方向を変更します。

実行時
実行時の軸矢印ツールの追加は、以下のようになります。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        Bar bar1 = new Bar(tChart1.Chart);
        AxisArrow axisArrow1 = new AxisArrow(tChart1.Chart);
        axisArrow1.Active = true;
        axisArrow1.Axis = tChart1.Axes.Left;

        bar1.FillSampleValues(20);

[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
        Dim AxisArrow1 As New Steema.TeeChart.AxisArrow(TChart1.Chart)
        AxisArrow1.Active = True
        AxisArrow1.Axis = TChart1.Axes.Left

        Bar1.FillSampleValues(20)
End Sub

カラーバンドツール

カラーバンドツールは、指定した軸の開始位置と終了位置にバンドを描画します。バンドの色は指定できます。バンドは、軸の方向により水平あるいは垂直に設定できます。

デザイン時

軸は、カラーバンドを設定させるチャート軸（上、下、左、右）を設定します。枠は、カラーバンドのアウトラインのペンのスタイル、色、幅、透明度、表示を設定します。グラデーションは、表示、方向、開始・中央・終了の色を設定します。色は、グラデーションが無効の場合の色を設定します。開始値は、カラーバンドツールの表示を開始するチャートの軸値を設定します。終了値は、カラーバンドツールの表示を終了するチャートの軸値を設定します。透明度は、カラーバンドツールの透明度を0から100の値で設定します。背面に描画は、カラーバンドをチャート系列の背面/前面に描画します。

実行時
実行時には、下記のサンプルコードを使用してカラーバンドを表示できます。
例
カラーバンドツールは、系列内の指定した範囲を強調して表示する場合に便利です。次の例は、指定したY値の間にカラーバンドを描画し、スクロールバーによってバンドの透明度を変更します。カラーバンドは、チャート系列の前面あるいは背面に描画できます。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        AreaSeries area1 = new AreaSeries(tChart1.Chart);
        ColorBand colorband1 = new ColorBand(tChart1.Chart);
        tChart1.Aspect.View3D = false;
        tChart1.Panel.Gradient.Visible = true;
        tChart1.Panel.Gradient.StartColor = Color.Blue;
        tChart1.Panel.Gradient.MiddleColor = Color.Gray;
        tChart1.Panel.Gradient.EndColor = Color.Green;

        area1.LinePen.Color = Color.Blue;
        area1.FillSampleValues(20);

        double offSet = area1.YValues.Maximum * 0.1;
        colorband1.Active = true;
        colorband1.Axis = tChart1.Axes.Left;
        colorband1.Transparency = 50;
        colorband1.Start = area1.YValues.Minimum + offSet;
        colorband1.End = area1.YValues.Maximum - offSet;
        colorband1.DrawBehind = false;
        hScrollBar1.Value = 50;

private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
        ((ColorBand)tChart1.Tools[0]).Transparency = e.NewValue;

private void checkBox1_CheckedChanged(object sender, System.EventArgs e)
        ((ColorBand)tChart1.Tools[0]).DrawBehind = !((ColorBand)tChart1.Tools[0]).DrawBehind;

[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim Area1 As New Steema.TeeChart.Styles.Area(TChart1.Chart)
        Dim Colorband1 As New Steema.TeeChart.ColorBand(TChart1.Chart)
        TChart1.Aspect.View3D = False
        TChart1.Panel.Gradient.Visible = True
        TChart1.Panel.Gradient.StartColor = Color.Blue
        TChart1.Panel.Gradient.MiddleColor = Color.Gray
        TChart1.Panel.Gradient.EndColor = Color.Green

        Area1.LinePen.Color = Color.Blue
        Area1.FillSampleValues(20)

        Dim OffSet As Double = Area1.YValues.Maximum * 0.1
        Colorband1.Active = True
        Colorband1.Axis = TChart1.Axes.Left
        Colorband1.Transparency = 50
        Colorband1.Start = Area1.YValues.Minimum + OffSet
        Colorband1.End = Area1.YValues.Maximum - OffSet
        Colorband1.DrawBehind = False
        HScrollBar1.Value = 50
End Sub

Private Sub HScrollBar1_Scroll(ByVal sender As Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles HScrollBar1.Scroll
        CType(TChart1.Tools(0), Steema.TeeChart.ColorBand).Transparency = e.NewValue
End Sub

Private Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
        CType(TChart1.Tools(0), Steema.TeeChart.ColorBand).DrawBehind = Not CType(TChart1.Tools(0), Steema.TeeChart.ColorBand).DrawBehind
End Sub

カラーラインツール

カラーラインツールは、垂直あるいは水平の指定したチャートの軸値に線を追加します。

デザイン時

カラーラインは、指定した軸の指定した値にラインを描画します。このラインのスタイル、色、幅、カラーラインの表示/非表示の設定ができます。オプションタブは、カラーラインのドラッグ、系列の背面に描画、3D描画、無制限ドラッグ、ドラッグした際にチャート全体を再描画するかどうかのオプションがあります。

実行時
実行時には、下記のサンプルコードを使用してカラーラインツールを表示できます。

[C#]
Bar bar1 = new Bar(tChart1.Chart);
ColorLine colorLine1 = new ColorLine(tChart1.Chart);

bar1.FillSampleValues(20);
colorLine1.Active = true;
colorLine1.AllowDrag = true;
colorLine1.Axis = tChart1.Axes.Left;
colorLine1.Pen.Color = Color.Blue;
colorLine1.Value = bar1.YValues.Maximum / 2;

[VB.Net]
Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
Dim ColorLine1 As New Steema.TeeChart.ColorLine(TChart1.Chart)

Bar1.FillSampleValues(20)
ColorLine1.Active = True
ColorLine1.AllowDrag = True
ColorLine1.Axis = TChart1.Axes.Left
ColorLine1.Pen.Color = Color.Blue
ColorLine1.Value = Bar1.YValues.Maximum / 2

グリッドバンドツール

グリッドバンドツールは、指定した軸と位置のグリッド線に色付けされた矩形（バンド）を描画します。

デザイン時

軸コンボボックスを使用してツールを関連付ける軸を選択してください。各バンドのブラシや色特性は、バンドや色ボタンを使用して指定することができます。

実行時
実行時には、下記のサンプルコードを使用してグリッドバンドツールを表示できます。

[C#]
GridBand tool = new GridBand(tChart1.Chart);
Line line = new Line(tChart1.Chart);
line.FillSampleValues();

tool.Axis = tChart1.Axes.Left;
tool.Band1.Color = Color.Red;
tool.Band2.Color = Color.White;
[VB.Net]

Dim tool As GridBand = New GridBand(TChart1.Chart)
Dim line As Line = New Line(TChart1.Chart)
line.FillSampleValues()

tool.Axis = TChart1.Axes.Left
tool.Band1.Color = Color.Red
tool.Band2.Color = Color.White

軸スクロールツール

軸スクロールツールは、マウスドラッグにより軸のスクロールを有効にします。

デザイン時

軸コンボボックスを使用してツールを関連付ける軸を選択してください。

実行時
実行時には、下記のサンプルコードを使用して軸スクロールツールを表示できます。

[C#]
AxisScroll tool = new AxisScroll(tChart1.Chart);
Line line = new Line(tChart1.Chart);
line.FillSampleValues();

tool.Axis = tChart1.Axes.Left;

[VB.Net]
Dim tool As AxisScroll = New AxisScroll(tChart1.Chart)
Dim line As Line = New Line(tChart1.Chart)
line.FillSampleValues()

tool.Axis = tChart1.Axes.Left

カーソルツール

カーソルツールは、チャート内の全系列あるいは指定した系列にカーソルを追加します。カーソルは、水平、垂直、両方の指定ができます。

デザイン時

カーソルツールは、系列に関連付ける系列を設定したり（未設定でも可）、スタイルで水平、垂直、両方を設定します。カーソルツールが系列に関連付けされている場合、カーソルの移動できる範囲として系列のY値に移動制限を設定できます。マウスに連動は、マウスの移動と同様にカーソルツールも移動します。ペンにより、カーソルツールの色、幅、スタイル、ツールの表示などの設定が行えます。

実行時
実行時には、下記のサンプルコードを使用してカーソルツールを表示できます。

[C#]
Points pointSeries1 = new Points(tChart1.Chart);
CursorTool cursorTool1 = new CursorTool(tChart1.Chart);

pointSeries1.FillSampleValues(20);
cursorTool1.Active = true;
cursorTool1.FollowMouse = true;
cursorTool1.Series = pointSeries1;
cursorTool1.Style = CursorToolStyles.Both;

[VB.Net]
Dim PointSeries1 As New Steema.TeeChart.Styles.Points(TChart1.Chart)
Dim CursorTool1 As New Steema.TeeChart.Tools.CursorTool(TChart1.Chart)

PointSeries1.FillSampleValues(20)
CursorTool1.Active = True
CursorTool1.FollowMouse = True
CursorTool1.Series = PointSeries1
CursorTool1.Style = Steema.TeeChart.Tools.CursorToolStyles.Both

ドラッグマーカツール

ドラッグマーカツールは、選択した系列のマーカのマウスドラッグを有効にします。

デザイン時

ドラッグマーカツールは、系列に1つの系列または全ての系列を設定できます。位置のリセットは、移動した全てのマーカをデフォルトの位置に戻します。

実行時
実行時には、下記のサンプルコードを使用してドラッグマーカツールを表示できます。

[C#]
Bar bar1 = new Bar(tChart1.Chart);
DragMarks dragMarks1 = new DragMarks(tChart1.Chart);

bar1.FillSampleValues(20);
dragMarks1.Active = true;
dragMarks1.Series = bar1;

[VB.Net]
Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
Dim DragMarks1 As New Steema.TeeChart.DragMarks(TChart1.Chart)

Bar1.FillSampleValues(20)
DragMarks1.Active = True
DragMarks1.Series = Bar1

ドラッグポイントツール

ドラッグポイントツールは、系列ポイントのマウスドラッグを有効にします。

デザイン時

系列は、ツールを有効にする系列を設定します。ドラッグスタイルは、ポイントのドラッグ方向をX軸、Y軸あるいは両方に設定します。マウスボタンは、ドラッグ機能を有効にするマウスボタンを設定します。カーソルは、系列ポイント上にマウスカーソルが移動した際に表示するカーソルスタイルを設定します。

実行時
実行時には、下記のサンプルコードを使用してドラッグポイントツールを表示できます。

[C#]
Bar bar1 = new Bar(tChart1.Chart);
DragPoint dragPoint1 = new DragPoint(tChart1.Chart);

bar1.FillSampleValues(10);
dragPoint1.Active = true;
dragPoint1.Series = bar1;
dragPoint1.Style = DragPointStyles.Y;

 [VB.Net]
Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
Dim DragPoint1 As New Steema.TeeChart.DragPoint(TChart1.Chart)

Bar1.FillSampleValues(10)
DragPoint1.Active = True
DragPoint1.Series = Bar1
DragPoint1.Style = Steema.TeeChart.DragPointStyles.Y

ドローラインツール

ドローラインツールは、チャート上にマウスを使用して線の描き込み、選択、ドラッグ、削除ができます。

デザイン時

系列には特定の系列あるいは「なし」を設定できます。また、マウスボタンにも特定のマウスボタンを設定できます。 ペンには色、幅、スタイルおよびラインを画面上に表示するかどうかを設定します。 描画可と選択可はそれぞれラインの描画および選択を有効/無効にします。

実行時
実行時には、下記のサンプルコードを使用してドローラインツールを表示できます。

[C#]
Bar bar1 = new Bar(tChart1.Chart);
DrawLine drawLine1 = new DrawLine(tChart1.Chart);

bar1.FillSampleValues(20);
drawLine1.Series = bar1;
drawLine1.Button = MouseButtons.Left;
drawLine1.EnableDraw = true;
drawLine1.EnableSelect = true;
drawLine1.Pen.Color = Color.AliceBlue;

[VB.Net]
Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
Dim DrawLine1 As New Steema.TeeChart.DrawLine(TChart1.Chart)

Bar1.FillSampleValues(20)
DrawLine1.Series = Bar1
DrawLine1.Button = MouseButtons.Left
DrawLine1.EnableDraw = True
DrawLine1.EnableSelect = True
DrawLine1.Pen.Color = Color.AliceBlue

ガントドラッグツール

ガントドラッグツールは、ガント系列のバーのドラッグや（あるいは）リサイズを有効にします。
デザイン時

ガントドラッグツールは、機能を適用させるガント系列を設定しなければなりません。ガントバーの端からの距離は、ガントバーのリサイズを開始する位置の許容範囲数をピクセル単位で指定します。ドラッグ可は、ガントバーのドラッグを有効/無効にします。リサイズ可は、ガントバーのリサイズを有効/無効にします。カーソルは、ドラッグやリサイズが適用された時のマウスカーソルを設定します。

実行時
実行時には、下記のサンプルコードを使用してガントドラッグツールを表示できます。

[C#]
GanttSeries ganttSeries1 = new GanttSeries(tChart1.Chart);
GanttTool ganttTool1 = new GanttTool(tChart1.Chart);

ganttSeries1.FillSampleValues(10);
ganttTool1.AllowResize = false;
ganttTool1.AllowDrag = true;
ganttTool1.MinPixels = 3;
ganttTool1.Series = ganttSeries1;
ganttTool1.Active = true;

tChart1.Legend.Visible = false;

[VB.Net]
Dim GanttSeries1 As New Steema.TeeChart.GanttSeries(TChart1.Chart)
Dim GanttTool1 As New Steema.TeeChart.GanttTool(TChart1.Chart)

GanttSeries1.FillSampleValues(10)
GanttTool1.AllowResize = False
GanttTool1.AllowDrag = True
GanttTool1.MinPixels = 3
GanttTool1.Series = GanttSeries1
GanttTool1.Active = True

TChart1.Legend.Visible = False

イメージツール

イメージツールは、指定したチャート系列の背面にイメージ（Bitmap、Jpeg、Gif、Png、Pcx）を描画します。

デザイン時

系列は、背面に表示したい系列を設定します。また、系列を設定しない場合は全ての系列に割り当てられます。イメージは、表示するイメージの設定、あるいは設定したイメージをクリアすることもできます。

実行時
実行時には、下記のサンプルコードを使用してイメージツールを表示できます。

[C#]
Bar bar1 = new Bar(tChart1.Chart);
ChartImage chartImage1 = new ChartImage(tChart1.Chart);
string imagePath = @"C:.bmp";
Bitmap myBitMap = new Bitmap(imagePath);

bar1.FillSampleValues(20);
chartImage1.Active = true;
chartImage1.Image = myBitMap;

[VB.Net]
Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
Dim ChartImage1 As New Steema.TeeChart.ChartImage(TChart1.Chart)
Dim ImagePath As String = "C:.bmp"
Dim MyBitMap As New Bitmap(ImagePath)

Bar1.FillSampleValues(20)
ChartImage1.Active = True
ChartImage1.Image = MyBitMap

マーカチップツール

マーカチップツールは、マウスが系列ポイント上に移動（あるいはクリック）した場合、デフォルトのヒントウィンドウを表示します。

デザイン時

系列は、ツールを適用したい1つの系列あるいは全系列を設定します。スタイルは、マーカチップに表示される系列データのスタイルを設定します。マウスの動作は、マーカチップの表示動作をマウスクリックあるいは移動に設定します。遅延時間は、マーカチップを表示するまでの時間をミリ秒で設定します。

実行時
実行時には、下記のサンプルコードを使用してマーカチップツールを表示できます。

[C#]
PointSeries pointSeries1 = new PointSeries(tChart1.Chart);
MarksTip marksTip1 = new MarksTip(tChart1.Chart);
        tab
pointSeries1.FillSampleValues(20);
marksTip1.Active = true;
marksTip1.MouseDelay = 500;
marksTip1.MouseAction = MarksTipMouseAction.Move;
marksTip1.Style = MarksStyles.XY;

[VB.Net]
Dim PointSeries1 As New Steema.TeeChart.PointSeries(TChart1.Chart)
Dim MarksTip1 As New Steema.TeeChart.MarksTip(TChart1.Chart)

PointSeries1.FillSampleValues(20)
MarksTip1.Active = True
MarksTip1.MouseDelay = 500
 MarksTip1.MouseAction = Steema.TeeChart.MarksTipMouseAction.Move
 MarksTip1.Style = Steema.TeeChart.MarksStyles.XY

近傍点ツール

近傍点ツールは、マウスカーソルに最も近いポイントにマーカを移動します。このツールは、1つの系列あるいはチャート内の全系列に設定できます。

デザイン時

系列は、ツールを適用する系列を設定します。ペンは、アウトラインの色、スタイル、幅、表示を設定します。ブラシは、ツールの領域の色、パターンあるいはイメージを設定します。線の描画は、ツールのマーカとマウスカーソルを結ぶ線を表示/非表示に設定します。サイズは、ツールのマーカのサイズを設定します。スタイルは、マーカの形状を設定します。

実行時
実行時には、下記のサンプルコードを使用して近傍点ツールを表示できます。

[C#]
Line line1 = new Line(tChart1.Chart);
NearestPoint nearestPoint1 = new NearestPoint(tChart1.Chart);

line1.FillSampleValues(20);
nearestPoint1.Series = line1;
nearestPoint1.Pen.Color = Color.Blue;
nearestPoint1.Size = 25;
nearestPoint1.Style = NearestPointStyles.Diamond;

[VB.Net]
Dim Line1 As New Steema.TeeChart.Styles.Line(TChart1.Chart)
Dim NearestPoint1 As New Steema.TeeChart.NearestPoint(TChart1.Chart)

Line1.FillSampleValues(20)
NearestPoint1.Series = Line1
NearestPoint1.Pen.Color = Color.Blue
NearestPoint1.Size = 25
NearestPoint1.Style = Steema.TeeChart.NearestPointStyles.Diamond

ページ数ツール

ページ数ツールは、ページングされているチャートの現在表示しているページ数を表示します。

デザイン時

オプションタブは、表示したいテキスト、テキストの位置を設定します。形式タブは、テキストボックスの色、枠、パターン、ベベル、サイズ、枠の角を丸くする、透明を設定します。テキストタブ、テキストのフォント、色、テキストの影の色やサイズを設定します。グラデーションタブは、テキストボックスのグラデーション特性を設定します。影タブは、テキストボックスの影の特性を設定します。ベベルタブは、テキストボックスのベベル特性を設定します。

実行時
実行時には、下記のサンプルコードを使用してページ数ツールを表示できます。

[C#]
private void Form1_Load(object sender, System.EventArgs e)
        Bar bar1 = new Bar(tChart1.Chart);
        PageNumber pageNumber1 = new PageNumber(tChart1.Chart);

        bar1.FillSampleValues(200);
        tChart1.Page.MaxPointsPerPage = 10;

private void button1_Click(object sender, System.EventArgs e)
        tChart1.Page.Previous();

private void button2_Click(object sender, System.EventArgs e)
        tChart1.Page.Next();

[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim Bar1 As New Steema.TeeChart.Styles.Bar(TChart1.Chart)
        Dim PageNumber1 As New Steema.TeeChart.PageNumber(TChart1.Chart)

        Bar1.FillSampleValues(200)
        TChart1.Page.MaxPointsPerPage = 10
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        TChart1.Page.Previous()
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        TChart1.Page.Next()
End Sub

円スライスツール

円スライスツールは、円系列に対してマウスカーソルの下の円スライスを強調や分割をします。

デザイン時

系列は、ツールを適用する円系列を設定します。スタイルは、マウスカーソルの下の円スライスを強調や分離をします。枠は、円スライスを強調する際の枠の特性について定義します。

実行時
実行時には、下記のサンプルコードを使用して円スライスツールを表示できます。

[C#]
PieSeries pieSeries1 = new PieSeries(tChart1.Chart);
PieTool pieTool1 = new PieTool(tChart1.Chart);

pieSeries1.FillSampleValues(10);
pieTool1.Series = pieSeries1;
pieTool1.Style = PieToolStyle.Explode;

[VB.Net]
Dim PieSeries1 As New Steema.TeeChart.PieSeries(TChart1.Chart)
Dim PieTool1 As New Steema.TeeChart.PieTool(TChart1.Chart)

PieSeries1.FillSampleValues(10)
PieTool1.Series = PieSeries1
PieTool1.Style = Steema.TeeChart.PieToolStyle.Explode

回転ツール

回転ツールは、チャート上でマウスをドラッグした際にチャートの仰角や回転を変更します。

デザイン時

反転は、マウスドラッグによるチャートの回転を反転させます。スタイルは、チャートを回転、仰角あるいは両方の機能を設定します。ボタンは、チャートの回転をさせるマウスのボタンを設定します。

実行時
実行時には、下記のサンプルコードを使用して回転ツールを表示できます。

[C#]
Line line1 = new Line(tChart1.Chart);
Rotate rotate1 = new Rotate(tChart1.Chart);

line1.FillSampleValues(20);
rotate1.Button = MouseButtons.Right;
rotate1.Style = RotateStyles.Elevation;

[VB.Net]
Dim Line1 As New Steema.TeeChart.Styles.Line(TChart1.Chart)
Dim Rotate1 As New Steema.TeeChart.Rotate(TChart1.Chart)

Line1.FillSampleValues(20)
Rotate1.Button = MouseButtons.Right
Rotate1.Style = Steema.TeeChart.RotateStyles.Elevation

系列アニメーションツール

系列アニメーションツールは、系列ポイントのアニメーションを実行します。

デザイン時

系列は、ツールを適用する系列を設定します。アニメーションのスピードは、ステップトラックバーで制御できます。アニメーションの開始ポイントは系列の最小値あるいは指定した開始値から実行できます。

実行時
実行時には、下記のサンプルコードを使用して系列アニメーションツールを表示できます。

[C#]
private SeriesAnimation tool;
private void InitializeChart()

     Bar bar = new Bar(tChart1.Chart);
     tool = new SeriesAnimation(tChart1.Chart);
     tool.Series = bar;
     bar.FillSampleValues();

private void button1_Click(object sender, EventArgs e)

     tool.Execute();

[VB.Net]
Dim tool As SeriesAnimation

Public Sub InitializeChart()
 Dim bar As Bar = New Bar(TChart1.Chart)
 tool = New SeriesAnimation(TChart1.Chart)
 tool.Series = bar
 bar.FillSampleValues()
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
 tool.Execute()
End Sub

拡張凡例ツール

拡張凡例ツールは、チャート内の任意の位置にカスタムな凡例を描画します。

デザイン時

系列は、ツールを適用する系列を設定します。「凡例の編集」ダイアログは、スタイル、位置、シンボル、タイトルなどの特性を設定できます。

実行時
実行時には、下記のサンプルコードを使用して拡張凡例ツールを表示できます。

[C#]
Bar bar = new Bar(tChart1.Chart);
ExtraLegend tool = new ExtraLegend(tChart1.Chart);
tool.Series = bar;
bar.FillSampleValues();

[VB.Net]
Dim bar As Bar = New Bar(TChart1.Chart)
Dim tool As ExtraLegend = New ExtraLegend(TChart1.Chart)
tool.Series = bar
bar.FillSampleValues()

サーフェス近傍ツール

サーフェス近傍ツールは、サーフェス系列上にマウスを移動した際に、マウスカーソルに最も近いサーフェスセルを示します。

デザイン時

系列は、ツールを適用するサーフェス系列を設定します。セル、行、列の色特性は、色エディタを使用して編集できます。

実行時
実行時には、下記のサンプルコードを使用してサーフェス近傍ツールを表示できます。

[C#]
Surface surface = new Surface(tChart1.Chart);
SurfaceNearestTool tool = new SurfaceNearestTool(tChart1.Chart);
tool.Series = surface;
surface.FillSampleValues();

[VB.Net]
Dim surface As Surface = New Surface(TChart1.Chart)
Dim tool As SurfaceNearestTool = New SurfaceNearestTool(TChart1.Chart)
tool.Series = surface
surface.FillSampleValues()

フィボナッチツール

フィボナッチツールは、指定されたトレンドラインに基づくフィボナッチの扇形や弧を描画します。

デザイン時

系列は、ツールを適用する系列を設定します。弧あるいは扇としてスタイルを設定できます。トレンドラインやレベル特性も設定できます。

実行時
実行時には、下記のサンプルコードを使用してフィボナッチツールを表示できます。

[C#]
Candle candle = new Candle(tChart1.Chart);
FibonacciTool tool = new FibonacciTool(tChart1.Chart);
candle.FillSampleValues();
tool.Series = candle;
tool.StartX = candle.DateValues[0];
tool.StartY = candle.CloseValues[0];
tool.EndX = candle.DateValues[10];
tool.EndY = candle.CloseValues[10];

[VB.Net]
Dim candle As Candle = New Candle(tChart1.Chart)
Dim tool As FibonacciTool = New FibonacciTool(tChart1.Chart)
candle.FillSampleValues
tool.Series = candle
tool.StartX = candle.DateValues(0)
tool.StartY = candle.CloseValues(0)
tool.EndX = candle.DateValues(10)
tool.EndY = candle.CloseValues(10)

系列領域ツール

系列領域ツールは、（系列ポイントの）カーブで囲まれている領域に色をつけます。

デザイン時

系列は、ツールを適用する系列を設定します。原点は、領域の基準値とするY値（水平）を指定して、境界は開始と終了値としてX値（垂直）を指定します。形式タブはペンやブラシ特性を定義します。

実行時
実行時には、下記のサンプルコードを使用して系列領域ツールを表示できます。

[C#]
Line line = new Line(tChart1.Chart);
SeriesRegionTool tool = new SeriesRegionTool(tChart1.Chart);
line.FillSampleValues();
tool.Series = line;

[VB.Net]
Dim line As Line = New Line(TChart1.Chart)
Dim tool As SeriesRegionTool = New SeriesRegionTool(TChart1.Chart)
tool.Series = line
line.FillSampleValues()

凡例パレットツール

凡例パレットツールは、3D系列のパレット色で作成された凡例を描画します。

デザイン時

系列は、ツールを適用する3D系列を設定します。このツールの各特性は完全に構成可能です。

実行時
実行時には、下記のサンプルコードを使用して凡例パレットツールを表示できます。

[C#]
Surface surface = new Surface(tChart1.Chart);
LegendPalette tool = new LegendPalette(tChart1.Chart);
surface.FillSampleValues();
tool.Series = surface;

[VB.Net]
Dim surface As Surface = New Surface(TChart1.Chart)
Dim tool As LegendPalette = New LegendPalette(TChart1.Chart)
surface.FillSampleValues()
tool.Series = surface

系列統計ツール

系列統計ツールは、指定された系列の複数の標準的な統計量を計算します。

デザイン時

系列は、ツールを適用する系列を設定します。

実行時
実行時には、下記のサンプルコードを使用して系列統計ツールを表示できます。

[C#]
SeriesStats tool = new SeriesStats(tChart1.Chart);
Line line = new Line(tChart1.Chart);
line.FillSampleValues();
tool.Series = line;

Annotation at = new Annotation(tChart1.Chart);
at.Shape.Transparency = 10;
at.Left = 80;
at.Top = 50;
at.Text = tool.Statistics;

[VB.Net]
Dim line As Line = New Line(TChart1.Chart)
Dim tool As SeriesStats = New SeriesStats(TChart1.Chart)
line.FillSampleValues()
tool.Series = line

Dim at As Annotation = New Annotation(TChart1.Chart)
at.Shape.Transparency = 10
at.Left = 80
at.Top = 50
at.Text = tool.Statistics

クリップ系列ツール

クリップ系列ツールは、関連付けられている軸の外側の系列描画を制限します。

デザイン時

系列は、ツールを適用する系列を設定します。

実行時
実行時には、下記のサンプルコードを使用してクリップ系列ツールを表示できます。

[C#]
Axis vert = new Axis(false, false, tChart1.Chart);
Axis horiz = new Axis(true, false, tChart1.Chart);
tChart1.Axes.Custom.Add(vert);
tChart1.Axes.Custom.Add(horiz);

Line line = new Line(tChart1.Chart);
line.FillSampleValues();
horiz.StartPosition = 20;
horiz.EndPosition = 80;
vert.StartPosition = 20;
vert.EndPosition = 80;
line.CustomHorizAxis = horiz;
line.CustomVertAxis = vert;

ClipSeries tool = new ClipSeries(tChart1.Chart);
tool.Series = line;

tChart1.Panel.MarginBottom = 10;
tChart1.Panel.MarginLeft = 10;

[VB.Net]
Dim vert As Axis = New Axis(False, False, TChart1.Chart)
Dim horiz As Axis = New Axis(True, False, TChart1.Chart)
TChart1.Axes.Custom.Add(vert)
TChart1.Axes.Custom.Add(horiz)

Dim line As Line = New Line(TChart1.Chart)
line.FillSampleValues()
horiz.StartPosition = 20
horiz.EndPosition = 80
vert.StartPosition = 20
vert.EndPosition = 80
line.CustomHorizAxis = horiz
line.CustomVertAxis = vert

Dim tool As ClipSeries = New ClipSeries(TChart1.Chart)
tool.Series = line

TChart1.Panel.MarginBottom = 10
TChart1.Panel.MarginLeft = 10

凡例スクロールバーツール

凡例スクロールバーツールは、チャート凡例にスクロールバーを表示します。

デザイン時

このツールの各特性は完全に構成可能です。

実行時
実行時には、下記のサンプルコードを使用して凡例スクロールバーツールを表示できます。

[C#]
Line line = new Line(tChart1.Chart);
LegendScrollBar tool = new LegendScrollBar(tChart1.Chart);
line.FillSampleValues();

[VB.Net]
Dim line As Line = New Line(TChart1.Chart)
Dim tool As LegendScrollBar = New LegendScrollBar(TChart1.Chart)
line.FillSampleValues()

2D 照明ツール

2D 照明ツールは、チャートキャンバス上に2次元の「照明」効果を描画します。

デザイン時

照明ツールの位置やスタイル、マウスに連動が設定できます。

実行時
実行時には、下記のサンプルコードを使用して2D 照明ツールを表示できます。

[C#]
Line line = new Line(tChart1.Chart);
LightTool tool = new LightTool(tChart1.Chart);
tool.FollowMouse = true; //slow in Debug build
line.FillSampleValues();

[VB.Net]
Dim line As Line =  New Line(TChart1.Chart)
Dim tool As LightTool =  New LightTool(TChart1.Chart)
tool.FollowMouse = True 'slow in Debug build
line.FillSampleValues()

サブチャートツール

サブチャートツールは、単一のチャート内に複数のチャート描画を有効にします。

デザイン時

サブチャートは、追加ボタンを使用してチャートに追加でき、入れ子にされたチャートエディタを使用して構成できます。

実行時
実行時には、下記のサンプルコードを使用してサブチャートツールを表示できます。

[C#]
Line line = new Line(tChart1.Chart);
SubChartTool tool = new SubChartTool(tChart1.Chart);
line.FillSampleValues();
TChart chart1 = tool.Charts.AddChart("Chart1");
chart1.Series.Add(typeof(Bar));
chart1[0].FillSampleValues();

[VB.Net]
Dim line As Line = New Line(TChart1.Chart)
Dim tool As SubChartTool = New SubChartTool(TChart1.Chart)
line.FillSampleValues()
Dim chart1 As TChart = tool.Charts.AddChart("Chart1")
chart1.Series.Add(GetType(Bar))
chart1(0).FillSampleValues()

フェーダツール

フェーダツールは、フェードインあるいはフェードアウトのチャートアニメーションを実行します。

デザイン時

速度、色、スタイル、アニメーションの遅延時間を設定できます。

実行時
実行時には、下記のサンプルコードを使用してフェーダツールを表示できます。

[C#]
private FaderTool tool;
private void InitializeChart()

     Line line = new Line(tChart1.Chart);
     tool = new FaderTool(tChart1.Chart);
     tool.Color = Color.Yellow;
     line.FillSampleValues();

private void button1_Click(object sender, EventArgs e)

     tool.Start();

[VB.Net]
Private tool As FaderTool
Private  Sub InitializeChart()
     Dim line As Line =  New Line(TChart1.Chart)
     tool = New FaderTool(TChart1.Chart)
     tool.Color = Color.Yellow
     line.FillSampleValues()
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
     tool.Start()
End Sub

矩形ツール

矩形ツールは、ドラッグやリサイズが可能なアノテーションツールです。

デザイン時

テキストや境界領域の特性について設定します。

実行時
実行時には、下記のサンプルコードを使用して矩形ツールを表示できます。

[C#]
Line line = new Line(tChart1.Chart);
RectangleTool tool = new RectangleTool(tChart1.Chart);
line.FillSampleValues();
tool.Text = "Text";

[VB.Net]
Dim line As Line =  New Line(TChart1.Chart)
Dim tool As RectangleTool =  New RectangleTool(TChart1.Chart)
line.FillSampleValues()
tool.Text = "Text"

セレクタツール

セレクタツールは、エンドユーザーに系列、軸、凡例、タイトル、などのようなチャートエレメントをクリックしてドラッグを有効にします。

デザイン時

選択されたオブジェクトを表すハンドルのサイズやブラシ特性を設定できます。選択されたオブジェクトのドラッグを有効にしたり、チャートのリサイズを有効にすることができます。

実行時
実行時には、下記のサンプルコードを使用してセレクタツールを表示できます。

[C#]
Bar bar = new Bar(tChart1.Chart);
Selector tool = new Selector(tChart1.Chart);
bar.FillSampleValues();
tool.Cursor = Cursors.IBeam;

[VB.Net]
Dim bar As Bar =  New Bar(TChart1.Chart)
Dim tool As Selector =  New Selector(TChart1.Chart)
bar.FillSampleValues()
tool.Cursor = Cursors.IBeam

系列置換ツール

系列置換ツールは、複数の系列の行と列を交換します。

デザイン時

処理を実行するために「置換」ボタンをクリックしてください。

実行時
実行時には、下記のサンプルコードを使用して系列置換ツールを表示できます。

[C#]
private SeriesTranspose tool;
private void InitializeChart()

     Bar bar = new Bar(tChart1.Chart);
     bar.MultiBar = MultiBars.None;
     tool = new SeriesTranspose(tChart1.Chart);
     bar.FillSampleValues();

private void button1_Click(object sender, EventArgs e)

     tool.Transpose();

[VB.Net]
Private tool As SeriesTranspose
Private  Sub InitializeChart()
     Dim bar As Bar =  New Bar(tChart1.Chart)
     bar.MultiBar = MultiBars.None
     tool = New SeriesTranspose(tChart1.Chart)
     bar.FillSampleValues()
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
     tool.Transpose()
End Sub

データテーブルツール

データテーブルツールは、垂直軸あるいは水平軸の近くにExcelのようなテーブルを描画します。

デザイン時

テーブルの枠（行と列）、位置、テキスト形式を設定します。

実行時
実行時には、下記のサンプルコードを使用してデータテーブルツールを表示できます。

[C#]
Bar bar = new Bar(tChart1.Chart);
DataTableTool tool = new DataTableTool(tChart1.Chart);
bar.FillSampleValues();

[VB.Net]
Dim bar As Bar =  New Bar(TChart1.Chart)
Dim tool As DataTableTool =  New DataTableTool(TChart1.Chart)
bar.FillSampleValues()

バナーツール

バナーツールは、スクロールや点滅するテキストアニメーションを描画します。

デザイン時

ツールのテキストや境界ボックスについて設定します。

実行時
実行時には、下記のサンプルコードを使用してバナーツールを表示できます。

[C#]
Bar bar = new Bar(tChart1.Chart);
BannerTool tool = new BannerTool(tChart1.Chart);
bar.FillSampleValues();
tool.Text = "Text";

[VB.Net]
Dim bar As Bar =  New Bar(TChart1.Chart)
Dim tool As BannerTool =  New BannerTool(TChart1.Chart)
bar.FillSampleValues()
tool.Text = "Text"

虫眼鏡ツール

虫眼鏡ツールは、チャートの一部を拡大表示します。

デザイン時

このツールの各特性は完全に構成可能です。

実行時
実行時には、下記のサンプルコードを使用して虫眼鏡ツールを表示できます。

[C#]
Bar bar = new Bar(tChart1.Chart);
Magnify tool = new Magnify(tChart1.Chart);
bar.FillSampleValues();

[VB.Net]
Dim bar As Bar =  New Bar(TChart1.Chart)
Dim tool As Magnify =  New Magnify(TChart1.Chart)
bar.FillSampleValues()


Tutorial19 - Custom Serialization

TeeChart Pro .Net 3J チュートリアル

第19章 - カスタムなシリアライズ

第19章 - カスタムなシリアライズ（カスタムな要素のシリアライズ化）
はじめに

カスタムな系列のシリアライズ化
わかっている型をシリアライズする（例：string, int, double）
カスタムな系列を定義する
保存とインポート

カスタム（不明）な型をシリアライズする
カスタムなオブジェクトを持つカスタムな系列を定義する
保存とインポート

カスタムなチャートをシリアライズする

備考：
カスタムなシリアライズ化は開発者がデザインしたカスタムな要素（関連があるかもしれないがTeeChart独自の機能以外）を正確に保存したり復元するためのオプションを提供する先進のテーマです。Steemaはカスタムなシリアライズ化のために提供できるサポートをこのチュートリアルで説明した範囲内にとどめます。

はじめに

自動によるシリアライズ化
TeeChartはTeeChartの保存や復元に必要なすべてのシリアライズ化の手順を自動で処理します。その処理にはチャートや系列の変更された要素すべてが含まれます。

カスタムなシリアライズ化（カスタム要素のシリアライズ化）
TeeChartの系列は必要とする機能の大半を提供していますが、系列に独自の追加情報を含めて表示または動作させるよう修正するか、系列の使用時にアプリケーションの他の部分への参照を提供するよう修正するかを決めることができます。そのために、TeeChartの系列から派生し、独自のカスタム要素を追加した、独自の系列型を作成したいと思うかもしれません。TeeChartのカスタムなシリアライズ化はそういった要素の保存（シリアライズ化）や復元をすることができます。

備考：カスタムな要素の保存には2種類あります。
- わかっている型をシリアライズする（例：string, int, double）
- カスタム（不明）な型をシリアライズする

シリアライズ方法についてはこのチュートリアルで説明してあります。

カスタムな系列のシリアライズ化
わかっている型をシリアライズする（例：string, int, double）
カスタムな系列を定義する

TeeChartのリボン系列から系列を派生させるとします。リボン系列には必要とする機能が含まれていますが、追跡目的のため、または特定のデータセットに関連付けられた値を追加するブジェクトとしていくつかの要素を追加したいと思うかもしれません。

以下のコードはリボン系列から派生したカスタム系列をどのように定義するかを示した例です。

public class MyLine : Steema.TeeChart.Styles.Line
{
  public MyLine(Chart c) : base(c)
  {
    myStrVar = "default";
  }

  public MyLine() : this((Chart)null) { }

  private string myStrVar = "";
  private int myIntVar = 0;

  public string MyStrProp
  {
    get { return myStrVar; }
    set { myStrVar = value; }
  }

  public int MyIntProp
  {
    get { return myIntVar; }
    set { myIntVar = value; }
  }
}

保存とインポート

カスタム変数を実装しチャートを保存できます。そして、保存したチャートが再びインポートされる際にインポートされます。変数がわかっているシステム型（例：String、Integer、Double）である限り、追加手順は必要ありません。TeeChartはシリアライズ化とデシリアライズ化を処理します。

例：
変更した系列のチャートを保存する
private void button1_Click(object sender, EventArgs e)
{
  MyLine mLine=new MyLine();

  mLine.MyStrProp = "now set";
  mLine.MyIntProp = 43;

  tChart1.Series.Add(mLine);
  mLine.FillSampleValues();

  tChart1.Export.Template.Save(@"c:\files\customLine.ten");
}

変更した系列のチャートをインポートする
private void button2_Click(object sender, EventArgs e)
{
  tChart1.Clear();
  tChart1.Import.Template.Load(@"c:\files\customLine.ten");
  label1.Text = ((MyLine)(tChart1[0])).MyStrProp;
  label2.Text = ((MyLine)(tChart1[0])).MyIntProp.ToString();
}

Label1とLabel2は、チャートを保存する前に設定された値を表示します。

カスタム（不明）な型をシリアライズする

カスタムなオブジェクトを持つカスタムな系列を定義する

カスタムオブジェクトを使用する要素を持ったカスタム系列を作成する手順は、わかっている型の要素を持つ系列をの手順と似ています。

以下のコードは、わかっている型と不明な型（MyObj）の新しい要素を含んでいるリボン系列から派生した系列の例です。TeeChartは不明な型のシリアライズやデシリアライズする方法がわからないので、それを行うためのルーチンを記述できるメカニズムを提供し、シリアライズ/デシリアライズ時にそれを呼び出す必要があります。そのメカニズムはSteema.TeeChart.Export.TemplateExport.ICustomSerializationインターフェースのクラスを継承することによって提供されます。つまり、独自のクラスに2つのメソッドを追加する必要があります。

- public void Serialize(SerializationInfo info)
- public void DeSerialize(SerializationInfo info)

using Steema.TeeChart.Export;

// カスタムなLineクラス
public class MyLine : Steema.TeeChart.Styles.Line, TemplateExport.ICustomSerialization
{
  public MyLine(Chart c) : base(c)
  {
    myStrVar = "default";
  }

  public MyLine() : this((Chart)null) { }

  private string myStrVar = "";
  private int myIntVar = 0;
  private MyObj myMyObj;

  public string MyStrProp
  {
    get { return myStrVar; }
    set { myStrVar = value; }
  }

  public int MyIntProp
  {
    get { return myIntVar; }
    set { myIntVar = value; }
  }

  /// <summary>
  /// myMyObj変数の実装を簡単にするためのメソッド
  /// </summary>
  public void setMyObj(int i, string s)
  {
    myMyObj = new MyObj(i, s);
  }

  /// <summary>
  /// カスタム型、MyObjのプロパティ
  /// </summary>
  public MyObj MyObj
  {
    get { return myMyObj; }
    set { myMyObj = value; }
  }

  /// <summary>
  /// 必須のメソッド（TemplateExport.ICustomSerialization インターフェース）
  /// </summary>
  public void Serialize(SerializationInfo info)
  {
    //save custom elements
    info.AddValue("myObjStr", myMyObj.MyString, myMyObj.MyString.GetType());
    info.AddValue("myObjInt", myMyObj.MyInt);
  }

  /// <summary>
  /// 必須のメソッド（TemplateExport.ICustomSerialization インターフェース）
  /// </summary>
  public void DeSerialize(SerializationInfo info)
  {
    //myMyObj変数にカスタムな要素を戻す
    myMyObj = new MyObj(info.GetInt32("myObjInt"), info.GetString("myObjStr"));
  }
}

//カスタムオブジェクト
public class MyObj
{
  private string myString;
  private int myInt;

  public MyObj(int i, string s)
  {
    myString = s;
    myInt = i;
  }

  public int MyInt
  {
    get { return myInt; }
    set { myInt = value; }
  }

  public string MyString
  {
    get { return myString; }
    set { myString = value; }
  }
}

シリアライズはカスタムな要素の値を保存するために'info.AddValue'を使用し、デシリアライズは保存する変数型に応じて'info.Getxxxx'を使用していることを補足します。

保存とインポート

カスタムな要素をシリアライズ/デシリアライズするためにカスタムなクラス内にルーチンを実装してしまえば、前に示したようにチャートの保存と読み込みは、変更されていないチャートと同じように呼び出せます。

例：
変更した系列のチャートを保存する
private void button1_Click(object sender, EventArgs e)
{
  MyLine mLine=new MyLine();

  mLine.MyStrProp = "now set";
  mLine.MyIntProp = 43;
  mLine.setMyObj(43, "set val 43");

  tChart1.Series.Add(mLine);
  mLine.FillSampleValues();

  tChart1.Export.Template.Save(@"c:\files\customLine.ten");
}

変更した系列のチャートをインポートする
private void button2_Click(object sender, EventArgs e)
{
  tChart1.Clear();
  tChart1.Import.Template.Load(@"c:\files\customLine.ten");
  label1.Text = ((MyLine)(tChart1[0])).MyStrProp;
  label2.Text = ((MyLine)(tChart1[0])).MyIntProp.ToString();
  label3.Text = ((MyLine)(tChart1[0])).MyObj.MyInt.ToString();
  label4.Text = ((MyLine)(tChart1[0])).MyObj.MyString;
}

Label1、Label2、Label3、Label4はチャートを保存する前に設定した値を表示します。

カスタムなチャートをシリアライズする

カスタムなチャートをシリアライズするための手順はカスタムな系列の手順とは少し異なります。

Steema.TeeChart.Chartからカスタムなチャートを派生してください。それをSirializableとしてマークし、ICustomSerializationクラスとして設定してください（以下の例を参照してください）。上述の系列の例にあるように、わかっている型は何の手順がなくてもシリアライズします。不明な型の例に関しては、系列の例：MyObjと同じオブジェクトを使用します。

例：わかっている型と不明な型のカスタム変数を持つチャート例
[System.Serializable()]
public class MyChart : Steema.TeeChart.Chart, TemplateExport.ICustomSerialization
{
  private MyObj myMyObj;

  public MyChart() : base() { }

  //必要なコンストラクタ
  protected MyChart(SerializationInfo info, StreamingContext context) : base(info, context) { }

  private string myStrVar = "";
  private int myIntVar = 0;

  public string MyStrProp
  {
    get { return myStrVar; }
    set { myStrVar = value; }
  }

  public int MyIntProp
  {
    get { return myIntVar; }
    set { myIntVar = value; }
  }

  public void setMyObj(int i, string s)
  {
    myMyObj = new MyObj(i, s);
  }

  public MyObj MyObj
  {
    get { return myMyObj; }
    set { myMyObj = value; }
  }

  //必要なメソッド
  public void Serialize(SerializationInfo info)
  {
    object o = myMyObj.MyString;
    info.AddValue("myObjStr", o, o.GetType());
    info.AddValue("myObjInt", myMyObj.MyInt);
  }

  //必要なメソッド
  public void DeSerialize(SerializationInfo info)
  {
    myMyObj = new MyObj(info.GetInt32("myObjInt"), info.GetString("myObjStr"));
  }
}

チャートの保存時にシリアライズは自動的に処理されます。

例：シリアライズ
private void button1_Click(object sender, EventArgs e)
{
  MyChart myChart = new MyChart();
  myChart.Series.Add(new Steema.TeeChart.Styles.Bar());
  myChart[0].FillSampleValues();
  myChart.setMyObj(22, "set 22");
  myChart.MyStrProp = "set String Prop";
  myChart.Export.Template.IncludeData = true;
  myChart.Export.Template.Save(@"c:\files\customChart.ten");
}

デシリアライズには、（デフォルト型のチャートではなく）シリアライズしたチャートにMyChart型をバインドすることをTeeChartのデシリアライザに伝える追加手順が必要です。

バインダを設定するコードは以下の通りです。
myChart.Import.Template.CustomType = myChart.ToString();

例：デシリアライズ
private void button2_Click(object sender, EventArgs e)
{
  MyChart myChart = new MyChart();
  myChart.Import.Template.CustomType = myChart.ToString();
  myChart = (MyChart)(myChart.Import.Template.Load(@"c:\files\customChart.ten"));
  myChart.Header.Text = myChart.MyObj.MyString;
  myChart.Footer.Text = myChart.MyStrProp;
  myChart.Footer.Visible = true;
  myChart.Export.Template.Save(@"c:\files\testCustomChartmodded.ten");
  myChart.Export.Image.PNG.Save(@"c:\files\testCustomChart.png");
}