ComponentOne WebChartの使用-3(折れ線図)
この記事では、WebChartを使用して折れ線グラフを作成する方法を説明します.データ・オブジェクトの関連プロパティとChartAreaのAxisの関連プロパティの設定を例に示し、WebChartを使用してインタラクティブな設計を実証します.
注意:CorponentOne.Studio.Enterprise.2006.v2
环境NET Compact Framework 1.1
一、折れ線グラフの生成
1)WebChartの最初のアイコンを取得し、グラフの種類を折れ線グラフに設定する
C1WebChart1.ChartGroups[ 0 ].ChartType = Chart2DTypeEnum.XYPlot;
2)グラフにデータを追加する
DataSet ds = GetDataSet();
データを取得します.ここでは、自分のビジネスニーズに応じて、データベースを自動的に生成またはクエリーして、DataSetオブジェクトを返すことができます.
series.PointData.CopyDataIn(data);
新しいデータ系列にデータを追加します.ここではPointDataプロパティを使用し、X、Y座標に値を付けます.
ここで、プログラムを実行して、私たちのデータで生成されたデフォルトのスタイルの折れ線図を見ることができます.ChartDataSeriesオブジェクトを使用してグラフィックを設定するスタイルについて説明します.
二、ChartDataSeriesオブジェクトを使用して折れ線グラフスタイルを設定する
ChartDataSeriesオブジェクトについては、以前から簡単に説明していましたが、ここではコードで属性の一部を説明します.
series.FitType = FitTypeEnum.Spline;
折れ線をスムーズカーブに設定します.
series.LineStyle.Color = Color.Red;
折れ線の色を赤に設定します.
LineStyleの関連プロパティ:
Pattern-LinePatternEnum列挙タイプの値を持つ折れ線のタイプ(実心線、点線など)を設定します.
Thickness–折れ線の厚さの設定
series.SymbolStyle.Shape = SymbolShapeEnum.InvertedTri;
series.SymbolStyle.Color = Color.Blue;
折れ線上のデータ点のシンボル形状を逆三角、色を青に設定します.
SymbolStyleで記号の大きさ、記号の辺線の色、厚さを設定することもできます.自分でやってみることができます.
三、座標軸の設定
Axis ax = C1WebChart1.ChartArea.AxisX;
グラフのX軸を取得します.
ax.AnnoMethod = AnnotationMethodEnum.ValueLabels;
軸目盛ラベルの表示方法を設定します.ここではValueLabelsを使用して、ユーザーがラベルの内容を作成します.デフォルトはValuesモードで、ラベルの内容が自動的に表示されます.
ax.ValueLabels.Addの最初のパラメータはグラフデータのx値、2番目のパラメータは表示に対応するラベルテキストです.
ax.AnnotationRotation = - 60 ;
目盛ラベルの回転角度を設定します.
ラベルコンテンツについては、属性AnnoFormatStringを使用してコンテンツのフォーマットを設定することもできます.
ax.Text=「X軸」
軸ヘッダーを設定します.
ax.Rotation = RotationEnum.Rotate90;
軸ヘッダーの回転角度を設定します.座標軸タイトルの設定後に有効になります.
座標軸タイトルの場合は、アトリビュートAlignmentを使用して位置合わせを設定することもできます.
ax.Max = data.Length - . 5 ;
座標軸の最大長を設定
これにはMinアトリビュートが座標軸の最小長さを設定し、Originアトリビュートが座標軸の原点を設定します.これらに対応して、AutoMax、AutoMin、AutoOriginなどのboolタイプのプロパティもあり、自動的に設定されるかどうかを示します.
スケーリング値にも同様のプロパティがあります.UnitMajor、UnitMinorは、プライマリ・セカンダリ・スケーリングの単位長を設定します.および対応するautoプロパティなど.
その他にも、いくつかの特殊な属性があります.
Reverseプロパティ:座標軸を反転します.
ScrollBarプロパティ:座標軸にスクロールバーを追加します.
Visibleプロパティ:座標軸を非表示にできます.
OnTopプロパティ:グラフの上に軸を設定できます.
などなど.
私たちが使っています.NET開発環境では,知能感知に関するヒントがあり,オブジェクト属性の使用がより簡単になる.ここでは主な属性のみを紹介し,他の属性は必要に応じて自分で試すことができる.
四、インタラクティブ設計
C1WebChart1.ImageAreas.GetByName( "ChartArea ").href = "http://kdboy.spaces.live.com " temp_href = "http://kdboy.spaces.live.com ";
グラフ領域へのリンクを追加します.
C1WebChart1.ImageAreas.GetByName( "ChartData ").Tooltip = "X={#XVAL}, Y={#YVAL:c} ";
折れ線上のデータポイントにマウスのヒントを追加します.(マウスをデータポイントのシンボルに移動すると、設定したテキストが表示されます)
C1WebChart1.ImageAreas.GetByName( "Footer ").Attributes = "onclick=window.open('http://kdboy.spaces.live.com') ";
グラフの下部にクリックイベントを追加します.
五、補充
C1WebChart1.Footer.Text = "Web Chart Test! ";
C1WebChart1.Footer.Visible = true ;
アイコンの下のタイトルを設定し、グラフFooter領域をグラフに表示します.
C 1 WebChartの関連属性については比較的簡単で,これ以上説明しない.
六、終わり
以上は折れ線グラフの一部のコードで、完全な例は次のリンクでダウンロードできます.
ダウンロード先:http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar
付録:
効果図
注意:CorponentOne.Studio.Enterprise.2006.v2
环境NET Compact Framework 1.1
一、折れ線グラフの生成
1)WebChartの最初のアイコンを取得し、グラフの種類を折れ線グラフに設定する
C1WebChart1.ChartGroups[ 0 ].ChartType = Chart2DTypeEnum.XYPlot;
2)グラフにデータを追加する
DataSet ds = GetDataSet();
データを取得します.ここでは、自分のビジネスニーズに応じて、データベースを自動的に生成またはクエリーして、DataSetオブジェクトを返すことができます.
DataView dv = new DataView(ds.Tables[ " sanguo " ]);
PointF[] data = (PointF[])Array.CreateInstance( typeof (PointF), dv.Count);
int i;
for (i = 0 ; i < data.Length; i ++ )
{
float y = float .Parse(dv[i][ " value " ].ToString());
data[i] = new PointF(i, y);
}
//
C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.Clear();
// ，
ChartDataSeries series = C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries();
series.PointData.CopyDataIn(data);
新しいデータ系列にデータを追加します.ここではPointDataプロパティを使用し、X、Y座標に値を付けます.
ここで、プログラムを実行して、私たちのデータで生成されたデフォルトのスタイルの折れ線図を見ることができます.ChartDataSeriesオブジェクトを使用してグラフィックを設定するスタイルについて説明します.
二、ChartDataSeriesオブジェクトを使用して折れ線グラフスタイルを設定する
ChartDataSeriesオブジェクトについては、以前から簡単に説明していましたが、ここではコードで属性の一部を説明します.
series.FitType = FitTypeEnum.Spline;
折れ線をスムーズカーブに設定します.
series.LineStyle.Color = Color.Red;
折れ線の色を赤に設定します.
LineStyleの関連プロパティ:
Pattern-LinePatternEnum列挙タイプの値を持つ折れ線のタイプ(実心線、点線など)を設定します.
Thickness–折れ線の厚さの設定
series.SymbolStyle.Shape = SymbolShapeEnum.InvertedTri;
series.SymbolStyle.Color = Color.Blue;
折れ線上のデータ点のシンボル形状を逆三角、色を青に設定します.
SymbolStyleで記号の大きさ、記号の辺線の色、厚さを設定することもできます.自分でやってみることができます.
三、座標軸の設定
Axis ax = C1WebChart1.ChartArea.AxisX;
グラフのX軸を取得します.
ax.AnnoMethod = AnnotationMethodEnum.ValueLabels;
軸目盛ラベルの表示方法を設定します.ここではValueLabelsを使用して、ユーザーがラベルの内容を作成します.デフォルトはValuesモードで、ラベルの内容が自動的に表示されます.
for (i = 0 ; i < data.Length; i ++ )
{
DataRowView drv = dv[i];
ax.ValueLabels.Add(i, ( string )drv[ " name " ]);
}
ax.ValueLabels.Addの最初のパラメータはグラフデータのx値、2番目のパラメータは表示に対応するラベルテキストです.
ax.AnnotationRotation = - 60 ;
目盛ラベルの回転角度を設定します.
ラベルコンテンツについては、属性AnnoFormatStringを使用してコンテンツのフォーマットを設定することもできます.
ax.Text=「X軸」
軸ヘッダーを設定します.
ax.Rotation = RotationEnum.Rotate90;
軸ヘッダーの回転角度を設定します.座標軸タイトルの設定後に有効になります.
座標軸タイトルの場合は、アトリビュートAlignmentを使用して位置合わせを設定することもできます.
ax.Max = data.Length - . 5 ;
座標軸の最大長を設定
これにはMinアトリビュートが座標軸の最小長さを設定し、Originアトリビュートが座標軸の原点を設定します.これらに対応して、AutoMax、AutoMin、AutoOriginなどのboolタイプのプロパティもあり、自動的に設定されるかどうかを示します.
スケーリング値にも同様のプロパティがあります.UnitMajor、UnitMinorは、プライマリ・セカンダリ・スケーリングの単位長を設定します.および対応するautoプロパティなど.
その他にも、いくつかの特殊な属性があります.
Reverseプロパティ:座標軸を反転します.
ScrollBarプロパティ:座標軸にスクロールバーを追加します.
Visibleプロパティ:座標軸を非表示にできます.
OnTopプロパティ:グラフの上に軸を設定できます.
などなど.
私たちが使っています.NET開発環境では,知能感知に関するヒントがあり,オブジェクト属性の使用がより簡単になる.ここでは主な属性のみを紹介し,他の属性は必要に応じて自分で試すことができる.
四、インタラクティブ設計
C1WebChart1.ImageAreas.GetByName( "ChartArea ").href = "http://kdboy.spaces.live.com " temp_href = "http://kdboy.spaces.live.com ";
グラフ領域へのリンクを追加します.
C1WebChart1.ImageAreas.GetByName( "ChartData ").Tooltip = "X={#XVAL}, Y={#YVAL:c} ";
折れ線上のデータポイントにマウスのヒントを追加します.(マウスをデータポイントのシンボルに移動すると、設定したテキストが表示されます)
C1WebChart1.ImageAreas.GetByName( "Footer ").Attributes = "onclick=window.open('http://kdboy.spaces.live.com') ";
グラフの下部にクリックイベントを追加します.
五、補充
C1WebChart1.Footer.Text = "Web Chart Test! ";
C1WebChart1.Footer.Visible = true ;
アイコンの下のタイトルを設定し、グラフFooter領域をグラフに表示します.
C 1 WebChartの関連属性については比較的簡単で,これ以上説明しない.
六、終わり
以上は折れ線グラフの一部のコードで、完全な例は次のリンクでダウンロードできます.
ダウンロード先:http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar
付録:
効果図