ASP.NET実装データチャート
作者:馬金虎来自:yesky
ASPにグラフを挿入し、MSChartコントロールを使用するのが一般的です.ではASP.NETもそうですか?答えはだめだ.私たちはASPを知っています.NETはクライアントが初めてASPを呼び出すときのコンパイル言語である.NETページの時、実は1種の比較的に複雑なコンパイル過程を経て、生産MSILファイルをコンパイルして、ローカルマシンに保存して、MSILファイルは実は1つの中間言語のファイルで、それからこのファイルはまたJIT(Just in time)コンパイラを通じて再コンパイルして、機械言語を生成して、このようにあなたが呼び出したASP.NETページが表示され、異なるマシンに対して、異なるJITを持っていて、異なるマシン言語にコンパイルされています.これはマイクロソフト社がASPを大いに宣伝しています.NETのいわゆるクロスプラットフォームの原理.ASP.NETページがMSILファイルにコンパイルされる場合、コンパイルに使用されるクラスライブラリは管理コードファイル(Managed Code)でなければならないが、ActiveXコントロールはすでに機械言語にコンパイルされたファイルであり、非管理コードファイル(Unmanaged Code)に属する.だから直接ASP.NETがMSChartコンポーネントを呼び出すことは不可能です.利用できますが.Netフレームワークが提供するツールは、このMSChartコンポーネントを管理コードファイルに変換するが、このプロセスは比較的複雑であり、この方法で生成されるグラフの速度はかなり遅く、またMSChartコンポーネント自体によって制限され、複雑なグラフについては、彼を利用して生成することはできない.本稿では、株式市場の相場グラフを例に、ASP.NETでグラフを実装します.実は私たちが見た相場図はグラフではなく、絵です.サーバ側で画像を生成し,画像にユーザに表示したい各種情報を描き,ブラウザを介して画像をクライアントに送信してグラフを形成することが本稿で検討する方法である.この方法は実装が複雑であるが,操作が柔軟で実用的であり,特にインターネット上のグラフに適しており,具体的な実装方法を紹介する.一.本文で紹介したプログラム設計及び運行環境(1).マイクロソフトウィンドウ2000サーバ版(2)..Net Framework SDK Beta 2以上のバージョン2.ASP.NETにおけるデータグラフの実現のための重要なステップと解決方法:ASP.NETページでグラフを描く肝心なステップは主に2つあり、その1つは、ピクチャオブジェクト(Bitmap)を作成することです.そして利用する.Net FrameWork SDKが提供する方法は、この画像オブジェクトに自分が望む図形、例えば線を描く、点を描くなどを描きます.二つ目は、転送に適した画像オブジェクトを「Jpeg」形式で保存し、表示することです.次に、この2つのステップの具体的な実現方法を見てみましょう. (1).まず、ASPでどうすればいいか見てみましょう.NETページにダイナミックな画像を作成し、表示します.名前空間「System.drawing」の「Bitmap」クラスを使用して、画像オブジェクトを作成するのは簡単です.次の文では、ビットマップオブジェクトを作成できます.
Bitmapオブジェクトの2つのパラメータを変更して、作成したビットマップオブジェクトの長さと幅を変更します.BitmapクラスのSaveメソッドで作成したビットマップオブジェクトを表示できます.ビットマップファイルは多くのスペースを必要とするため、ネットワーク転送を容易にするために「Jpeg」または「Gif」ファイルに変換して保持するのが一般的である.次の文は、作成したビットマップオブジェクトを「Jpeg」ファイル表示に変換します.
少し修正すると、ビットマップオブジェクトを「Gif」ファイルで表示できます.具体的には、次のようになります.
以下のコード(chart 3.aspx)の役割はASPである.NETは動的に画像を作成し、表示します.
次は、このコードの実行後のインタフェースです.
図01:ASPを利用する.NETダイナミック作成画像
黒い画像が生まれて、とても美しくなくて、次はこの画像に色を塗って、しかもこの画像の上に線を描いて、字を書くなどします.
(2).生成された画像をどのように色を塗るか:
実際には、生成されたピクチャに色を塗るのは比較的容易であり、まず「Bitmap」オブジェクトに基づいて「Graphic」オブジェクトを作成し、この「Graphic」オブジェクトの方法に基づいて色を塗るグラフィックタイプ(例えば、表示されるピクチャが楕円、正方形など)を決定する.次のコード(chart 4.aspx)の役割はchart 3に与える.aspxコードによって生成された画像には淡緑色:
下図はchart 4.aspxが実行するインタフェース:
図02:生成した画像に色を塗る
もちろん、生成された画像の色をカスタマイズするだけでなく、生成された画像の形状をカスタマイズすることもできます.次のコードセグメントの機能は、画像の形状を楕円にカスタマイズすることです.
次の図は、このコードの実行インタフェースです.
図03:カスタム画像の形状
もちろん「Graphic」オブジェクトの他の方法で画像を別の形にカスタマイズすることもできますが、これは一つ一つ紹介しません.
(3).画像に線と字を書く方法:画像に字を書くことは、生成された「Graphic」オブジェクトのDrawString()メソッドによって実現されます.このメソッドを呼び出す前に、フォントとブラシを設定する必要があります.具体的な呼び出し方法は、次のとおりです.
「s」は出力する文字列であり、「font」は文字列のフォントであり、「brush」はブラシを定義し、後の2つのパラメータは文字列を生成する位置座標である.プログラムで文字列を生成する具体的な文は次のとおりです.
画像に線を引くには、「Graphic」オブジェクトのDrawLine()メソッドを使用します.具体的な使用文法は次のとおりです.
ここで「points」は点の位置を定義します.もちろん、本明細書で使用する方法を使って呼び出すこともできます.線を描くたびに定義することです.そうすれば、もっと方法があると思います.次は、生成された画像に3つの線を描きます.
これらの基本的な知識を知って、画像の形状をカスタマイズして、画像に色を塗って、画像の上で字を書いて、線を描くのは比較的に容易に見えて、下のコード(chart 2.aspx)の機能は1つの正方形の画像をカスタマイズして、そして画像の上で線を描いて、字を書いて、色を塗って、具体的には以下のようです:
図04:画像に線を描き、字を書き、色を塗る
三.ASP.NETではデータグラフの完全なソースコードと実行インタフェースを実現する:画像を生成することを把握し、画像に色を塗ったり、画像に文字を出力したり、線を描いたりするなどの基本操作を行った後、各種の基本操作を十分に利用すれば、ASP.NETではデータグラフの完全なプログラムを実現し、次の図は実行インタフェースです.
図05:ASP.NETでのデータグラフの実行インタフェース
以下はASP.NETで実装されるデータグラフの完全なコード(chart 1.aspx)は、以下の通りです.
四.総括:
グラフの実装は常にインターネットプログラミングの難点であり,本稿ではASP.NETページでどのようにデータグラフを実現するかは、何の良いコンポーネントも利用できない前提で、利用する.Net FrameWork SDK GDI+で提供される様々なグラフィック操作方法は,このようなプロセスはやや煩雑であるが,複雑なグラフの実現に非常に有用である.本文は読者がインターネット上のグラフの問題を解決するのに役立つだけでなく、読者のGDI+に対する理解もできることを望んでいる.
ASPにグラフを挿入し、MSChartコントロールを使用するのが一般的です.ではASP.NETもそうですか?答えはだめだ.私たちはASPを知っています.NETはクライアントが初めてASPを呼び出すときのコンパイル言語である.NETページの時、実は1種の比較的に複雑なコンパイル過程を経て、生産MSILファイルをコンパイルして、ローカルマシンに保存して、MSILファイルは実は1つの中間言語のファイルで、それからこのファイルはまたJIT(Just in time)コンパイラを通じて再コンパイルして、機械言語を生成して、このようにあなたが呼び出したASP.NETページが表示され、異なるマシンに対して、異なるJITを持っていて、異なるマシン言語にコンパイルされています.これはマイクロソフト社がASPを大いに宣伝しています.NETのいわゆるクロスプラットフォームの原理.ASP.NETページがMSILファイルにコンパイルされる場合、コンパイルに使用されるクラスライブラリは管理コードファイル(Managed Code)でなければならないが、ActiveXコントロールはすでに機械言語にコンパイルされたファイルであり、非管理コードファイル(Unmanaged Code)に属する.だから直接ASP.NETがMSChartコンポーネントを呼び出すことは不可能です.利用できますが.Netフレームワークが提供するツールは、このMSChartコンポーネントを管理コードファイルに変換するが、このプロセスは比較的複雑であり、この方法で生成されるグラフの速度はかなり遅く、またMSChartコンポーネント自体によって制限され、複雑なグラフについては、彼を利用して生成することはできない.本稿では、株式市場の相場グラフを例に、ASP.NETでグラフを実装します.実は私たちが見た相場図はグラフではなく、絵です.サーバ側で画像を生成し,画像にユーザに表示したい各種情報を描き,ブラウザを介して画像をクライアントに送信してグラフを形成することが本稿で検討する方法である.この方法は実装が複雑であるが,操作が柔軟で実用的であり,特にインターネット上のグラフに適しており,具体的な実装方法を紹介する.一.本文で紹介したプログラム設計及び運行環境(1).マイクロソフトウィンドウ2000サーバ版(2)..Net Framework SDK Beta 2以上のバージョン2.ASP.NETにおけるデータグラフの実現のための重要なステップと解決方法:ASP.NETページでグラフを描く肝心なステップは主に2つあり、その1つは、ピクチャオブジェクト(Bitmap)を作成することです.そして利用する.Net FrameWork SDKが提供する方法は、この画像オブジェクトに自分が望む図形、例えば線を描く、点を描くなどを描きます.二つ目は、転送に適した画像オブジェクトを「Jpeg」形式で保存し、表示することです.次に、この2つのステップの具体的な実現方法を見てみましょう. (1).まず、ASPでどうすればいいか見てみましょう.NETページにダイナミックな画像を作成し、表示します.名前空間「System.drawing」の「Bitmap」クラスを使用して、画像オブジェクトを作成するのは簡単です.次の文では、ビットマップオブジェクトを作成できます.
// "Bitmap"
Bitmap image = new Bitmap ( 400 , 400 ) ;Bitmapオブジェクトの2つのパラメータを変更して、作成したビットマップオブジェクトの長さと幅を変更します.BitmapクラスのSaveメソッドで作成したビットマップオブジェクトを表示できます.ビットマップファイルは多くのスペースを必要とするため、ネットワーク転送を容易にするために「Jpeg」または「Gif」ファイルに変換して保持するのが一般的である.次の文は、作成したビットマップオブジェクトを「Jpeg」ファイル表示に変換します.
// "Jpeg" ，
image . Save ( Response . OutputStream , ImageFormat . Jpeg ); 少し修正すると、ビットマップオブジェクトを「Gif」ファイルで表示できます.具体的には、次のようになります.
// "Jpeg" ，
image . Save ( Response . OutputStream , ImageFormat . Gif ) ;以下のコード(chart 3.aspx)の役割はASPである.NETは動的に画像を作成し、表示します.
＜%@ Page Language = "C#" ContentType = "image/jpeg" %＞
＜%@ Import Namespace = "System" %＞
＜%@ Import Namespace = "System.Drawing" %＞
＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞
＜%@ Import Namespace = "System.Drawing.Imaging" %＞
＜html ＞
＜head ＞
＜script language = "C#" runat = "server" ＞
void Page_Load ( object sender , EventArgs e )
{
// "Bitmap"
Bitmap image = new Bitmap ( 400 , 400 ) ;
// "Jpeg" ，
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
＜/script ＞
＜/head ＞
＜body ＞
＜/body ＞
＜/html ＞次は、このコードの実行後のインタフェースです.
図01:ASPを利用する.NETダイナミック作成画像
黒い画像が生まれて、とても美しくなくて、次はこの画像に色を塗って、しかもこの画像の上に線を描いて、字を書くなどします.
(2).生成された画像をどのように色を塗るか:
実際には、生成されたピクチャに色を塗るのは比較的容易であり、まず「Bitmap」オブジェクトに基づいて「Graphic」オブジェクトを作成し、この「Graphic」オブジェクトの方法に基づいて色を塗るグラフィックタイプ(例えば、表示されるピクチャが楕円、正方形など)を決定する.次のコード(chart 4.aspx)の役割はchart 3に与える.aspxコードによって生成された画像には淡緑色:
＜%@ Page Language = "C#" ContentType = "image/jpeg" %＞
＜%@ Import Namespace = "System" %＞
＜%@ Import Namespace = "System.Drawing" %＞
＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞
＜%@ Import Namespace = "System.Drawing.Imaging" %＞
＜html ＞
＜head ＞
＜script language = "C#" runat = "server" ＞
void Page_Load ( object sender , EventArgs e )
{
// "Bitmap"
Bitmap image = new Bitmap ( 400 , 400 ) ;
Graphics g = Graphics . FromImage ( image ) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;
// "Jpeg" ，
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
＜/script ＞
＜/head ＞
＜body ＞
＜/body ＞
＜/html ＞下図はchart 4.aspxが実行するインタフェース:
図02:生成した画像に色を塗る
もちろん、生成された画像の色をカスタマイズするだけでなく、生成された画像の形状をカスタマイズすることもできます.次のコードセグメントの機能は、画像の形状を楕円にカスタマイズすることです.
＜%@ Page Language = "C#" ContentType = "image/jpeg" %＞
＜%@ Import Namespace = "System" %＞
＜%@ Import Namespace = "System.Drawing" %＞
＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞
＜%@ Import Namespace = "System.Drawing.Imaging" %＞
＜html ＞
＜head ＞
＜script language = "C#" runat = "server" ＞
void Page_Load ( object sender , EventArgs e )
{
// "Bitmap"
Bitmap image = new Bitmap ( 400 , 400 ) ;
Graphics g = Graphics . FromImage ( image ) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;
// "Jpeg" ，
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
＜/script ＞
＜/head ＞
＜body ＞
＜/body ＞
＜/html ＞次の図は、このコードの実行インタフェースです.
図03:カスタム画像の形状
もちろん「Graphic」オブジェクトの他の方法で画像を別の形にカスタマイズすることもできますが、これは一つ一つ紹介しません.
(3).画像に線と字を書く方法:画像に字を書くことは、生成された「Graphic」オブジェクトのDrawString()メソッドによって実現されます.このメソッドを呼び出す前に、フォントとブラシを設定する必要があります.具体的な呼び出し方法は、次のとおりです.
public void DrawString (
string s ,
Font font ,
Brush brush ,
float x ,
float y
) ;「s」は出力する文字列であり、「font」は文字列のフォントであり、「brush」はブラシを定義し、後の2つのパラメータは文字列を生成する位置座標である.プログラムで文字列を生成する具体的な文は次のとおりです.
Font axesFont = new Font ( "arial" , 10 ) ;
Brush blackBrush = new SolidBrush ( Color . Red ) ;
g . DrawString ( " ， " , axesFont , blackBrush , 90 , 20 ) ; 画像に線を引くには、「Graphic」オブジェクトのDrawLine()メソッドを使用します.具体的な使用文法は次のとおりです.
public void DrawLines (
Pen pen ,
Point [ ] points
) ;ここで「points」は点の位置を定義します.もちろん、本明細書で使用する方法を使って呼び出すこともできます.線を描くたびに定義することです.そうすれば、もっと方法があると思います.次は、生成された画像に3つの線を描きます.
Pen redPen = new Pen ( Color . Red , 1 ) ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
// ， 、 、
g . DrawLine ( blackPen , 0 , 2 , 210 , 250 ) ;
g . DrawLine ( blackPen , 210 , 250 , 310 , 50 ) ;
g . DrawLine ( redPen , 310 , 50 , 210 , 350 ) ;これらの基本的な知識を知って、画像の形状をカスタマイズして、画像に色を塗って、画像の上で字を書いて、線を描くのは比較的に容易に見えて、下のコード(chart 2.aspx)の機能は1つの正方形の画像をカスタマイズして、そして画像の上で線を描いて、字を書いて、色を塗って、具体的には以下のようです:
＜%@ Page Language = "C#" ContentType = "image/jpeg" %＞
＜%@ Import Namespace = "System" %＞
＜%@ Import Namespace = "System.Drawing" %＞
＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞
＜%@ Import Namespace = "System.Drawing.Imaging" %＞
＜html ＞
＜head ＞
＜script language = "C#" runat = "server" ＞
void Page_Load ( object sender , EventArgs e )
{
Bitmap image = new Bitmap ( 400 , 400 ) ;
Font axesFont = new Font ( "arial" , 10 ) ;
Brush blackBrush = new SolidBrush ( Color . Red ) ;
Pen redPen = new Pen ( Color . Red , 1 ) ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
Graphics g = Graphics . FromImage ( image ) ;
g . Clear ( Color . White ) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;
// , 、 、
g . DrawString ( " ， " , axesFont , blackBrush , 90 , 20 ) ;
// ， 、 、
g . DrawLine ( blackPen , 0 , 2 , 210 , 250 ) ;
g . DrawLine ( blackPen , 210 , 250 , 310 , 50 ) ;
g . DrawLine ( redPen , 310 , 50 , 210 , 350 ) ;
// "Jpeg" ，
// image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
image . Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
}
＜/script ＞
＜/head ＞
＜body ＞
＜/body ＞
＜/html ＞図04:画像に線を描き、字を書き、色を塗る
三.ASP.NETではデータグラフの完全なソースコードと実行インタフェースを実現する:画像を生成することを把握し、画像に色を塗ったり、画像に文字を出力したり、線を描いたりするなどの基本操作を行った後、各種の基本操作を十分に利用すれば、ASP.NETではデータグラフの完全なプログラムを実現し、次の図は実行インタフェースです.
図05:ASP.NETでのデータグラフの実行インタフェース
以下はASP.NETで実装されるデータグラフの完全なコード(chart 1.aspx)は、以下の通りです.
＜%@ Import Namespace = "System" %＞
＜%@ Import Namespace = "System.Drawing" %＞
＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞
＜%@ Import Namespace = "System.Drawing.Imaging" %＞
＜script language = "C#" runat = "server" ＞
class LineChart
{
public Bitmap b ;
public string Title = " ASP.NET " ;
public ArrayList chartValues = new ArrayList ( ) ;
public float Xorigin = 0 , Yorigin = 0 ;
public float ScaleX , ScaleY ;
public float Xdivs = 2 , Ydivs = 2 ;
private int Width , Height ;
private Graphics g ;
private Page p ;
struct datapoint {
public float x ;
public float y ;
public bool valid ;
}
//
public LineChart ( int myWidth , int myHeight , Page myPage ) {
Width = myWidth ; Height = myHeight ;
ScaleX = myWidth ; ScaleY = myHeight ;
b = new Bitmap ( myWidth , myHeight ) ;
g = Graphics . FromImage ( b ) ;
p = myPage ;
}
public void AddValue ( int x , int y ) {
datapoint myPoint ;
myPoint . x = x ;
myPoint . y = y ;
myPoint . valid = true ;
chartValues . Add ( myPoint ) ;
}
public void Draw ( ) {
int i ;
float x , y , x0 , y0 ;
string myLabel ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
Brush blackBrush = new SolidBrush ( Color . Black ) ;
Font axesFont = new Font ( "arial" , 10 ) ;
//
p . Response . ContentType = "image/jpeg" ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , Width , Height ) ;
int ChartInset = 50 ;
int ChartWidth = Width - ( 2 * ChartInset ) ;
int ChartHeight = Height - ( 2 * ChartInset ) ;
g . DrawRectangle ( new Pen ( Color . Black , 1 ) , ChartInset , ChartInset , ChartWidth , ChartHeight ) ;
//
g . DrawString ( Title , new Font ( "arial" , 14 ) , blackBrush , Width / 3 , 10 ) ;
// X X
for ( i = 0 ; i ＜= Xdivs ; i++ ) {
x = ChartInset + ( i * ChartWidth ) / Xdivs ;
y = ChartHeight + ChartInset ;
myLabel = ( Xorigin + ( ScaleX * i / Xdivs ) ) . ToString ( ) ;
g . DrawString ( myLabel , axesFont , blackBrush , x - 4 , y + 10 ) ;
g . DrawLine ( blackPen , x , y + 2 , x , y - 2 ) ;
}
// Y Y
for ( i = 0 ; i ＜= Ydivs ; i++ )
{
x = ChartInset ;
y = ChartHeight + ChartInset - ( i * ChartHeight / Ydivs ) ;
myLabel = ( Yorigin + ( ScaleY * i / Ydivs ) ) . ToString ( ) ;
g . DrawString ( myLabel , axesFont , blackBrush , 5 , y - 6 ) ;
g . DrawLine ( blackPen , x + 2 , y , x - 2 , y ) ;
}
g . RotateTransform ( 180 ) ;
g . TranslateTransform ( 0 , - Height ) ;
g . TranslateTransform ( - ChartInset , ChartInset ) ;
g . ScaleTransform ( - 1 , 1 ) ;
//
datapoint prevPoint = new datapoint ( ) ;
prevPoint . valid = false ;
foreach ( datapoint myPoint in chartValues ) {
if ( prevPoint . valid == true ) {
x0 = ChartWidth * ( prevPoint . x - Xorigin ) / ScaleX ;
y0 = ChartHeight * ( prevPoint . y - Yorigin ) / ScaleY ;
x = ChartWidth * ( myPoint . x - Xorigin ) / ScaleX ;
y = ChartHeight * ( myPoint . y - Yorigin ) / ScaleY ;
g . DrawLine ( blackPen , x0 , y0 , x , y ) ;
g . FillEllipse ( blackBrush , x0 - 2 , y0 - 2 , 4 , 4 ) ;
g . FillEllipse ( blackBrush , x - 2 , y - 2 , 4 , 4 ) ;
}
prevPoint = myPoint ;
}
//
b . Save ( p . Response . OutputStream , ImageFormat . Jpeg ) ;
}
~LineChart ( ) {
g . Dispose ( ) ;
b . Dispose ( ) ;
}
}
void Page_Load ( Object sender , EventArgs e )
{
LineChart c = new LineChart ( 640 , 480 , Page ) ;
c . Title = " ASP.NET " ;
c . Xorigin = 0 ; c . ScaleX = 500 ; c . Xdivs = 5 ;
c . Yorigin = 0 ; c . ScaleY = 1000 ; c . Ydivs = 5 ;
c . AddValue ( 0 , 150 ) ;
c . AddValue ( 50 , 50 ) ;
c . AddValue ( 100 , 700 ) ;
c . AddValue ( 200 , 150 ) ;
c . AddValue ( 300 , 450 ) ;
c . AddValue ( 400 , 75 ) ;
c . AddValue ( 450 , 450 ) ;
c . AddValue ( 500 , 250 ) ;
c . Draw ( ) ;
}
＜/script ＞四.総括:
グラフの実装は常にインターネットプログラミングの難点であり,本稿ではASP.NETページでどのようにデータグラフを実現するかは、何の良いコンポーネントも利用できない前提で、利用する.Net FrameWork SDK GDI+で提供される様々なグラフィック操作方法は,このようなプロセスはやや煩雑であるが,複雑なグラフの実現に非常に有用である.本文は読者がインターネット上のグラフの問題を解決するのに役立つだけでなく、読者のGDI+に対する理解もできることを望んでいる.