DevExpress中国語のWebサイトにアクセスして、最新の製品情報を直接入手してください。
DevExpress Universal Subscriptionには、600を超えるUIコントロール、レポートプラットフォーム、DevExpress Dashboard eXpressAppフレームワーク、CodeRush for Visual Studio、一連の補助ツールなど、.NET開発に必要なすべてのプラットフォームコントロールがあります。
場合によっては、数年、数ヶ月の統計に基づいて、分析のために複数の数値指標を統合する必要があります。そのため、さまざまなデータをグラフに入れて表示する必要があります。これは多軸にもなり、複数のX軸である、Y軸である可能性もあり、それらの処理方法は類似しています。この記事では、良い参考になることを期待して、例を通してこの側面を紹介します。
まず、グラフの例を見てみましょう。内側のグラフの右側から、複数のY軸があり、1つのY軸が指標分析を表し、X軸が月であることがわかります。
上の図は、DevExpressのChartControlチャートコントロールを使用して実装されています。このコントロールは、複数の座標の問題を処理するためのSecondaryAxisYオブジェクトを提供します。
1つは、データを準備してバインドする
まず、ChartControlコントロールをフォームインターフェイスにドラッグしてから、レイアウトをデザインします。
次のコードに示すように、テスト用のデータをいくつか示し、それらを以下のリストのGridControlオブジェクトにバインドしてから、データをチャートオブジェクトにバインドします。特定の処理については、データベースから対応するインジケーターデータを取得して、動的バインディングを実現できます。
/// <summary>
///統合的数測定Content
/// </ summary>
/// <returns> </ returns>
private DataTable CreateData（）
{
DataTable dt = new DataTable（）;
dt.Columns.Add（new DataColumn（ "クラス型"））;
dt.Columns.Add（new DataColumn（ "2005- 1月"、typeof（decimal）））;
dt.Columns.Add（new DataColumn（ "2005- 2月"、typeof（decimal）））;
dt.Columns.Add（new DataColumn（ "2005- 3月"、typeof（decimal）））;
dt.Columns.Add（new DataColumn（ "2005- 4月"、typeof（decimal）））;
dt.Columns.Add（new DataColumn（ "2005- 5月"、typeof（decimal）））;
dt.Columns.Add（new DataColumn（ "2005- 6月"、typeof（decimal）））;
dt.Rows.Add（new object [] {"员工床"、437、437、414、397、387、
dt.Rows.Add（new object [] {"人均月衣"、3964、3961、3979、3974、
dt.Rows.Add（new object [] {"Cost TEU"、3104、1339、3595.8、3154.5、2499.8、3026}）;
dt.Rows.Add（new object [] {"1人当たりの生産性"、7.1、3.06 、
8.69、7.95、6.46、8.01 }）; dt.Rows.Add（new object [] {"2005年3月の人々の割合" 、1.06、1.06、1、0.96、0.93、0.91}）;
return dt;
}
private void Form1_Load（object sender、EventArgs e）
{
DataTable dt = CreateData（）;
this.gridControl1.DataSource = dt;
CreateChart（dt）;
}
次に、チャートグラフィックを作成します
private void CreateChart（DataTable dt）
{
＃region Series
//複数のグラフィカルオブジェクトを作成します
Seriesseries1 = CreateSeries（ "Number of employee"、ViewType.Line、dt、0）;
Series series2 = CreateSeries（ "Per capita Monthly Salary"、ViewType
。Line 、dt、1）; Series series3 = CreateSeries（ "cost TEU"、ViewType.Line、dt、2）;
Series series4 = CreateSeries（ "Per Capita Productivity"、ViewType.Line、dt、3）;
Series series5 = CreateSeries（ "2005年3月の人の割合"、ViewType.Line、dt、4）;
#endregion
List <Series> list = new List <Series>（）{series1、series2、series3、series4、series5};
chartControl1.Series 。AddRange（list.ToArray（））;
chartControl1.Legend.Visible = false;
chartControl1.SeriesTemplate.LabelsVisibility = DefaultBoolean.True;
for（int i = 0; i <list.Count; i ++）
{
list [i] .View.Color = colorList [i];
CreateAxisY（list [i]）;
}
}
コードを簡素化し、処理を容易にするために、上記のコードから2つの関数を抽出して、独立した処理を行います。
CreateSeriesは、曲線などの一般的なグラフを作成するために使用されます。CreateAxisYは、複数の軸を作成するために使用されます。
CreateSeriesが典型的なグラフを作成するために使用するソースコードを以下に示します。series.ArgumentScaleType = ScaleType.Qualitative ;このコードを設定する必要があることに注意してください 。設定しないと、「2005年1月」のコンテンツがデフォルトで日付タイプに変換され、不適切なコンテンツが表示されます。
値））; } ArgumentScaleTypeの種類を設定しなければならない//、別段の表示が望ましくない形式で、その結果、日付形式に変換され display.//Inすなわち、表示文字列のパラメータはScaleType.Qualitativeに設定する必要があり series.ArgumentScaleType = ScaleType.Qualitative; series .LabelsVisibility = DevExpress.Utils.DefaultBoolean.True; //ラベルラベルの表示は シリーズを返します; }
CreateAxisYが複数の座標軸を作成するために使用するコードを以下に示します。ここでの複数の座標は、シリーズと同じView.Color色を使用しているため、簡単に区別できます。
myAxis.Label.TextColor = color; myAxis.Color =色; myAxisを返します。 }
3.Webインターフェイスの表示とコード処理
DevExpressコントロールを使用して上記のグラフをWebに実装するのは面倒だと思いました。オブジェクトの関係とプロパティが完全に同じであるとは思っていませんでした。コードをコピーすると基本的に問題が解決し、インターフェイスコードには少し変わった。
<％@ Page Language = "C＃" AutoEventWireup = "true" CodeBehind = "Default.aspx.cs" Inherits = "WebLineStatisticChart.Default"％> <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns =" http://www.w3.org/1999/xhtml "> <head runat = "server"> <title> </ title> </ head> <body> <form id = "form1" runat = "server"> <p> <h3 align = "center" style = "text-align：left" > D線を量、薪コンパイラ、人员、生成率趋势図</ h3> </ p> <dx：WebChartControl ID = "chartControl1" runat = "server" Height = "452px" Width = "1013px"> </ dx：WebChartControl> <div> </ div> <br /> <dx：ASPxGridView ID = "ASPxGridView1" runat = "server" Theme = "Aqua"> <SettingsPager Visible = "False"> </ SettingsPager> </ dx：ASPxGridView> </ form> </ body> </ html>
データをバインドするためのコードがわずかに異なることを除いて、バックグラウンドコードは完全に同じです。
public partial class Default：System.Web.UI.Page
{
protected void Page_Load（object sender、EventArgs e）
{
if（！this.IsPostBack）
{
// Dライン出力、給与、人員、生産率トレンドグラフ
DataTable dt = CreateData （）;
//データソースをテーブルにバインドします
this.ASPxGridView1.DataSource = dt;
this.ASPxGridView1.DataBind（）;
CreateChart（dt）;
}
}
............。
Webでのグラフの効果を以下に示します。マウスをグラフノードに置き、動的なプロンプトが表示されます。これは非常に使いやすいです。
4、チャート印刷
ChartControlは優れた印刷機能を提供し、コードは非常に単純です。
private void btnPrint_Click（object sender、EventArgs e）
{
this.chartControl1.ShowPrintPreview（DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom）;
}
得られた結果は以下のとおりで、基本的に要件を満たすことができます。もちろん、複雑なカスタム印刷には追加の処理コードが必要です。
次のコードは印刷にも使用できます。効果は似ていますが、カスタマイズがより強力です。
private void btnPrint_Click（object sender、EventArgs e）
{
// this.chartControl1.ShowPrintPreview（DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom）;
DevExpress.XtraPrintingLinks.CompositeLink CompositeLink = new DevExpress.XtraPrintingLinks.CompositeLink（）;
DevExpress.XtraPrinting.PrintingSystem ps = new DevExpress.XtraPrinting.PrintingSystem（）;
CompositeLink.PrintingSystem = ps;
CompositeLink.Landscape = true;
CompositeLink.PaperKind = System.Drawing.Printing.PaperKind.A4;
DevExpress.XtraPrinting.PrintableComponentLink link = new DevExpress.XtraPrinting.PrintableComponentLink（ps）;
ps.PageSettings.Landscape = true;
link.Component = this.chartControl1;
CompositeLink.Links.Add（link）;
link.CreateDocument（）; //ドキュメントを作成します
ps.PreviewFormEx.Show（）; // Preview
}
この記事はブログガーデンから複製されています-WuHuacong
DevExpress Technical Exchange Group 3：700924826グループディスカッションへようこそ