Descarga de la versión completa de DevExpress v20.2
Visite el sitio web de DevExpress en chino para obtener la información más reciente sobre productos
DevExpress Universal Subscription tiene todos los controles de plataforma necesarios para el desarrollo de .NET, incluidos más de 600 controles de interfaz de usuario, plataforma de informes, marco DevExpress Dashboard eXpressApp, CodeRush para Visual Studio y una serie de herramientas auxiliares.
En ocasiones, con base en las estadísticas de algunos años y meses, es necesario integrar múltiples indicadores numéricos para el análisis. Por lo tanto, es necesario poner una variedad de datos en un gráfico para mostrar, que también se convierte en un multieje, que puede ser eje X múltiple, también puede ser el eje Y, y sus métodos de procesamiento son similares. Este artículo presenta este aspecto a través de un ejemplo, con la esperanza de darle una buena referencia.
Primero, echemos un vistazo a un ejemplo de un gráfico. Desde el lado derecho del gráfico en el interior, podemos ver que hay varios ejes Y, un eje Y representa un análisis de indicador y el eje X es el mes.
La figura anterior se implementa utilizando el control de gráfico ChartControl de DevExpress. Este control proporciona un objeto SecondaryAxisY para manejar el problema de múltiples coordenadas.
Uno, preparar datos y enlazar
Primero, arrastre el control ChartControl a la interfaz del formulario y luego diseñe el diseño.
Aquí hay algunos datos para probar, vincúlelos al objeto GridControl en la lista a continuación y luego vincule los datos al objeto de gráfico, como se muestra en el siguiente código. Para un procesamiento específico, podemos obtener los datos del indicador correspondiente de la base de datos para lograr un enlace dinámico.
/// <summary>
/// 准备 数据 内容
/// </summary>
/// <returns> </returns>
private DataTable CreateData ()
{
DataTable dt = new DataTable ();
dt.Columns.Add (nueva columna de datos ("类型"));
dt.Columns.Add (new DataColumn ("2005-1 月", typeof (decimal)));
dt.Columns.Add (new DataColumn ("2005-2 月", typeof (decimal)));
dt.Columns.Add (nueva DataColumn ("2005-3 月", tipo de (decimal)));
dt.Columns.Add (new DataColumn ("2005- 4 月", typeof (decimal)));
dt.Columns.Add (nueva DataColumn ("2005-5 月", tipo de (decimal)));
dt.Columns.Add (nueva DataColumn ("2005- 6 月", typeof (decimal)));
dt.Rows.Add (nuevo objeto [] {"员工 人数", 437, 437, 414, 397, 387,
dt.Rows.Add (nuevo objeto [] {"人均 月薪", 3964, 3961, 3979, 3974,
dt.Rows.Add (nuevo objeto [] {"Coste TEU", 3104, 1339, 3595.8, 3154.5, 2499.8, 3026});
dt.Rows.Add (nuevo objeto [] {"Productividad per cápita", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01});
dt.Rows.Add (nuevo object [] {"Proporción de personas en marzo de 2005", 1.06, 1.06, 1, 0.96, 0.93, 0.91});
return dt;
}
private void Form1_Load (object remitente, EventArgs e)
{
DataTable dt = CreateData ();
esto .gridControl1 .DataSource = dt;
CreateChart (dt);
}
En segundo lugar, cree gráficos de gráficos
private void CreateChart (DataTable dt)
{
#region Series
// Crea varios objetos gráficos
Series series1 = CreateSeries ("Número de empleados", ViewType.Line, dt, 0);
Series series2 = CreateSeries ("Salario mensual per cápita", ViewType . Line, dt, 1);
Series series3 = CreateSeries ("costo TEU", ViewType.Line, dt, 2);
Series series4 = CreateSeries ("Productividad per cápita", ViewType.Line, dt, 3);
Series series5 = CreateSeries ("Proporción de personas en marzo de 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 (lista [i]);
}
}
Para simplificar el código y facilitar el procesamiento, se extraen dos funciones del código anterior para su procesamiento independiente.
CreateSeries se utiliza para crear un gráfico típico, como una curva. CreateAxisY se utiliza para crear un eje múltiple.
El código fuente utilizado por CreateSeries para crear un gráfico típico se muestra a continuación. Vale la pena señalar que series.ArgumentScaleType = ScaleType.Qualitative ; este código debe establecerse, de lo contrario, el contenido de "Enero 2005" se convertirá al tipo de fecha de forma predeterminada y se mostrará el contenido inapropiado.
valor)); } // El tipo de ArgumentScaleType debe establecerse; de lo contrario, la visualización se convertirá a un formato de fecha, lo que dará como resultado una visualización de formato no deseado. // En otras palabras, los parámetros de la cadena de visualización deben establecerse en ScaleType.Qualitative series.ArgumentScaleType = ScaleType.Qualitative; series .LabelsVisibility = DevExpress.Utils.DefaultBoolean.True; // Mostrar etiquetas de etiquetas return series; }
El código utilizado por CreateAxisY para crear un eje de coordenadas múltiples se muestra a continuación. Tenga en cuenta que las coordenadas múltiples aquí usan el mismo color View.Color que la Serie , por lo que es fácil de distinguir.
return myAxis; } myAxis.Label.TextColor = color;
3. Visualización de la interfaz web y procesamiento de código
Pensé que sería problemático usar el control DevExpress para implementar el gráfico anterior en la Web. No esperaba que sus relaciones de objeto y propiedades fueran exactamente las mismas. Copiar el código básicamente resolverá el problema, y el código de la interfaz tiene cambiado un poco.
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default.aspx.cs" Inherits = "WebLineStatisticChart.Default"%> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // ES "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns =" http://www.w3.org/1999/xhtml "> <head runat = "servidor"> <title> </title> </head> <body> <form id = "form1" runat = "server"> <p> <h3 align = "center" style = "text-align: left" > D 线 产量 、 薪酬 、 人员 、 生成 率 趋势 图 </h3> </p> <dx: ID de WebChartControl = "chartControl1" runat = "servidor" Altura = "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>
El código de fondo es completamente el mismo, excepto que el código para vincular datos es ligeramente diferente.
public parcial class Predeterminado: System.Web.UI.Page
{
protected void Page_Load (objeto remitente, EventArgs e)
{
if (! this.IsPostBack)
{
// D línea de salida, salario, personal, gráfico de tendencia de tasa de producción
DataTable dt = CreateData ();
// Vincular la fuente de datos a la tabla
this.ASPxGridView1.DataSource = dt;
this.ASPxGridView1.DataBind ();
CreateChart (dt);
}
}
.............
El efecto del gráfico en la web se muestra a continuación, el mouse se coloca en el nodo del gráfico y hay indicaciones dinámicas, lo cual es muy amigable.
Cuatro, impresión de gráficos
ChartControl proporciona una buena función de impresión y el código es muy simple.
btnPrint_Click vacío privado (remitente del objeto, EventArgs e)
{
this.chartControl1.ShowPrintPreview (DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
}
Los resultados obtenidos son los siguientes, que básicamente pueden cumplir con los requisitos: Por supuesto, la impresión personalizada compleja requiere un código de procesamiento adicional.
El siguiente código también se puede usar para imprimir, el efecto es similar, pero la personalización es más fuerte.
private void btnPrint_Click (remitente del objeto, EventArgs e)
{
//this.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
DevExpress.XtraPrintingLinks.CompositeLink compositeLink = nuevo DevExpress.XtraPrintingLinks.CompositeLink ();
DevExpress.XtraPrinting.PrintingSystem ps = nuevo DevExpress.XtraPrinting.PrintingSystem ();
compositeLink.PrintingSystem = ps;
compositeLink.Landscape = verdadero;
compositeLink.PaperKind = System.Drawing.Printing.PaperKind.A4;
DevExpress.XtraPrinting.PrintableComponentLink enlace = nuevo DevExpress.XtraPrinting.PrintableComponentLink (ps);
ps.PageSettings.Landscape = true;
link.Component = this.chartControl1;
compositeLink.Links.Add (enlace);
link.CreateDocument (); // Crea un documento
ps.PreviewFormEx.Show (); // Vista previa
}
Este artículo es una reproducción del blog garden-Wu Huacong
DevExpress Technical Exchange Group 3: 700924826 Bienvenido a unirse a la discusión grupal