DevExpress v20.2 full version download
Go to DevExpress Chinese website to get first-hand latest product information!
DevExpress Universal Subscription has all the platform controls needed for .NET development, including more than 600 UI controls, reporting platform, DevExpress Dashboard eXpressApp framework, CodeRush for Visual Studio and a series of auxiliary tools.
Sometimes, based on the statistics of some years and months, it is necessary to integrate multiple numerical indicators for analysis. Therefore, it is necessary to put a variety of data in a graph to display, which also becomes a multi-axis, which can be multiple X-axis , It can also be the Y axis, and their processing methods are similar. This article introduces this aspect through an example, hoping to give you a good reference.
First, let’s take a look at an example of a graph. From the right side of the graph inside, we can see that there are multiple Y axes, one Y axis represents an indicator analysis, and the X axis is the month.
The above figure is implemented using DevExpress's ChartControl chart control. This control provides a SecondaryAxisY object to handle the problem of multiple coordinates.
One, prepare data and bind
First, drag the ChartControl control to the Form interface, and then design the layout.
Here are a few pieces of data for testing, bind them to the GridControl object in the list below, and then bind the data to the chart object, as shown in the following code. For specific processing, we can obtain the corresponding indicator data from the database to achieve dynamic binding.
/// <summary>
/// 准备数据内容
/// </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, 378 });
dt.Rows.Add(new object[] {"Per Capita Monthly Salary", 3964, 3961, 3979, 3974, 3967, 3972 });
dt.Rows.Add(new object[] {"Cost TEU", 3104, 1339, 3595.8, 3154.5, 2499.8, 3026 });
dt.Rows.Add(new object[] {"Per capita productivity", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });
dt.Rows.Add(new object[] {"Proportion of people in March 2005", 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);
}
Second, create chart graphics
private void CreateChart(DataTable dt)
{
#region Series
//Create several graphical objects
Series series1 = CreateSeries("Number of employees", 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( "Proportion of people in March 2005", 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]);
}
}
In order to simplify the code and facilitate processing, two functions are extracted from the above code for independent processing.
CreateSeries is used to create a typical graph, such as a curve. CreateAxisY is used to create a multiple axis.
The source code used by CreateSeries to create a typical graph is shown below. It is worth noting that series.ArgumentScaleType = ScaleType.Qualitative ; this code must be set, otherwise the content of "January 2005" will be converted to date type by default, and inappropriate content will be displayed.
/// <summary>
/// Create a graphic display based on the data
/// </summary>
/// <param name="caption">graphic title</param>
/// <param name="viewType"> Graphic type</param>
/// <param name="dt">DataDataTable</param>
/// <param name="rowIndex">row number of the graphic data</param>
/// <returns>< /returns>
private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)
{
Series series = new Series(caption, viewType);
for (int i = 1; i <dt.Columns.Count; i++)
{
string argument = dt.Columns[i].ColumnName;//Parameter name
decimal value = (decimal)dt.Rows[rowIndex][i];//Parameter value
series.Points.Add(new SeriesPoint(argument,value));
}
//The type of ArgumentScaleType must be set, otherwise the display will be converted to a date format, resulting in an undesired format
display.//In other words, the parameters of the display string must be set to ScaleType.Qualitative
series.ArgumentScaleType = ScaleType.Qualitative;
series .LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//Display label labels
return series;
}
The code used by CreateAxisY to create a multiple coordinate axis is shown below. Note that the multiple coordinates here use the same View.Color color as the Series , so that it is easy to distinguish.
/// <summary>
/// Create the second coordinate system of the chart
/// </summary>
/// <param name="series">Series object</param>
/// <returns></returns>
private SecondaryAxisY CreateAxisY(Series series)
{
SecondaryAxisY myAxis = new SecondaryAxisY(series.Name);
((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(myAxis);
((LineSeriesView)series.View).AxisY = myAxis;
myAxis. Title.Text = series.Name;
myAxis.Title.Alignment = StringAlignment.Far; //Top alignment
myAxis.Title.Visible = true; //Display title
myAxis.Title.Font = new Font("宋体", 9.0f) ;
Color color = series.View.Color;//Set the color of the coordinate to be consistent with the color of the chart line
myAxis.Title.TextColor = color;
myAxis.Label.TextColor = color;
myAxis.Color = color;
return myAxis;
}
3. Web interface display and code processing
I thought it would be troublesome to use the DevExpress control to implement the above chart on the Web. I didn't expect that their object relationships and properties are exactly the same. Copying the code will basically solve the problem, and the interface code has changed a little.
<%@ 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>
The background code is completely the same except that the code for binding data is slightly different.
public partial class Default: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
//D line output, salary, personnel, production rate trend graph
DataTable dt = CreateData ();
// Bind the data source to the table
this.ASPxGridView1.DataSource = dt;
this.ASPxGridView1.DataBind();
CreateChart(dt);
}
}
.............
The effect of the graph on the web is shown below, the mouse is placed on the graph node, and there are dynamic prompts, which is very friendly.
Four, chart printing
ChartControl provides a good printing function, and the code is very simple.
private void btnPrint_Click(object sender, EventArgs e)
{
this.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
}
The results obtained are as follows, which can basically meet the requirements. Of course, complex custom printing requires additional processing code.
The following code can also be used for printing, the effect is similar, but the customization is stronger.
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(); //Create a document
ps.PreviewFormEx.Show();//Preview
}
This article is reproduced from the blog garden-Wu Huacong
DevExpress Technical Exchange Group 3: 700924826 Welcome to join the group discussion