Compartir a través de

Tutorial: Crear un gráfico básico

  • Artículo

Este tutorial muestra cómo agregar un gráfico, mediante el control Chart, a una aplicación web o de Windows Forms y, a continuación, agregar datos, título, leyendas y anotaciones al gráfico.

Agregar un control Chart

Siga los pasos que se indican a continuación para agregar un control de gráfico a su aplicación de Windows Forms para web.

Para agregar un control de gráfico a una aplicación

  1. En la vista de diseño, abra el Cuadro de herramientas.

  2. Desde la categoría Datos, arrastre un control Chart hasta el área de diseño.

    Si no puede ver el control Chart en el Cuadro de herramientas, haga clic con el botón secundario del mouse en el Cuadro de herramientas, seleccione Elegir elementos y, a continuación, seleccione los siguientes espacios de nombres en la pestaña Componentes de .NET Framekwork:

    Nota

    Para encontrar el control Chart en el Cuadro de herramientas más fácilmente, oculte los controles inactivos.Para ello, haga clic con el botón secundario del mouse en el Cuadro de herramientas y desactive la opción Mostrar todo.

  3. Haga clic con el botón secundario sobre el control Chart en el área de diseño y seleccione Propiedades.

  4. En la ventana Propiedades, haga clic en el botón Por categorías.

  5. En la categoría Gráfico de la ventana Propiedades, haga clic en la propiedad de colección ChartAreas y, a continuación, haga clic en el botón de puntos suspensivos (…).Esto abre el Editor de colecciones ChartAreas.

    La colección ChartAreas (un objeto ChartAreaCollection) contiene todas las áreas de gráfico del control Chart.Observe que la colección ya contiene una área de gráfico denominada "ChartArea1".

  6. Haga clic en Agregar y, a continuación, en Aceptar.Un nuevo objeto ChartArea se agrega a la colección con el nombre predeterminado "ChartArea2".

    Observe que el gráfico en el área de diseño se reduce a la mitad de su tamaño original.Esto se debe a que el área del gráfico recién creada se coloca en la parte inferior, pero aún no contiene una serie de datos.

  7. En la ventana Propiedades, haga clic en la colección Series y, a continuación, haga clic en el botón de puntos suspensivos.Esto abre el Editor de colecciones de series.

    La colección de series (un objeto SeriesCollection) contiene todas las series de datos del control Chart.Observe que la colección ya contiene una serie denominada "Series1".

  8. En el Editor de colecciones de series, haga clic en Agregar y, a continuación, establezca las siguientes propiedades para el objeto Series recién creado:

    Propiedad

    Valor

    ChartArea

    ChartArea2

    ChartType

    Bar

    Name

    BarChart

  9. Haga clic en Aceptar y, a continuación, vuelva a hacer clic en Aceptar.

    Ahora existen varias áreas de gráfico y cada una contiene una serie de datos.Sin embargo, no verá nada al ejecutar su aplicación porque las series no tienen datos todavía.

Agregar datos al gráfico

Siga los pasos que se indican a continuación para agregar datos al control Chart recién creado.

Para agregar datos al gráfico

  1. Abra de nuevo el Editor de colecciones de series.

  2. En el área Miembros, seleccione Series1.

  3. En la categoría Datos del área de propiedades de Series1, haga clic en la propiedad de la colección de puntos y, a continuación, haga clic en el botón de puntos suspensivos.Esto abre el Editor de colecciones DataPoint.

    La colección de puntos (un objeto DataPointCollection) contiene todos los puntos de datos de la serie actual.

  4. En el Editor de colecciones DataPoint, haga clic en Agregar y, a continuación, asigne un valor a la propiedad YValues del objeto DataPoint recién creado.

    Repita este paso hasta que tenga cinco puntos de datos en la colección.

  5. Haga clic en Aceptar y, a continuación, repita los pasos anteriores para agregar puntos de datos a la serie de BarChart.

  6. En el Editor de colecciones de series, haga clic en Aceptar.

  7. Ejecute la aplicación.

    Ahora puede ver dos áreas de gráfico en el control Chart que muestran los puntos de datos creados en las dos series.Observe los tipos de gráfico diferentes de las dos series.

Agregar leyendas al gráfico

Siga los pasos que se indican a continuación para agregar una leyenda para cada una de las series que ha creado.

Para agregar una leyenda para cada serie

  1. En la categoría Gráfico de la ventana Propiedades, haga clic en la propiedad de colección de Leyendas y, a continuación, haga clic en el botón … situado a la derecha.Esto abre el Editor de colecciones de leyendas.

    La colección de leyendas (un objeto LegendCollection) contiene todas las leyendas del control Chart.

  2. Si no hay ninguna leyenda en el Editor de colecciones de leyendas, haga clic en Agregar.

  3. Establezca las siguientes propiedades para el objeto Legend:

    Propiedad

    Valor

    DockedToChartArea

    ChartArea1

    Docking

    Right

    IsDockedInsideChartArea

    False

  4. Haga clic de nuevo en Agregar y, a continuación, establezca las siguientes propiedades para el objeto Legend recién creado:

    Propiedad

    Valor

    DockedToChartArea

    ChartArea2

    Docking

    Right

  5. Haga clic en Aceptar.

    Observe que en el área de diseño, la segunda leyenda se muestra vacía.De forma predeterminada, ambas series se asignan a la primera leyenda.Puede asignar cada serie a una leyenda diferente.

  6. Abra de nuevo el Editor de colecciones de series.

  7. En el área Miembros, seleccione BarChart.

  8. En la categoría Leyenda del área de propiedades de BarChart, en la lista desplegable de la propiedad Legend, seleccione Legend2.

  9. Haga clic en Aceptar.

  10. Ejecute la aplicación.

Agregar un título al gráfico

Siga los pasos que se indican a continuación para agregar un título al gráfico.

Para agregar un título al gráfico

  1. En la categoría Gráfico de la ventana Propiedades, haga clic en la propiedad de colección Títulos y, a continuación, haga clic en el botón de puntos suspensivos.Esto abre el Editor de colecciones de títulos.

    La colección de títulos (un objeto TitleCollection) contiene todos los títulos incluidos en el control Chart.

  2. En el Editor de colecciones de leyendas, haga clic en Agregar.

  3. En la categoría Apariencia del área de propiedades de Title1, escriba un título del gráfico en la propiedad Text.

  4. Haga clic en Aceptar.

  5. Ejecute la aplicación.

Marcar un punto de datos con una anotación

Siga los pasos que se indican a continuación si desea utilizar una anotación para marcar un punto de datos en el gráfico.

Para marcar un punto de datos con una anotación

  1. En la categoría Gráfico de la ventana Propiedades, haga clic en la propiedad de colección de Anotaciones y, a continuación, haga clic en el botón de puntos suspensivos.Esto abre el Editor de colecciones de anotaciones.

    La colección de anotaciones (un objeto AnnotationCollection) contiene todas las anotaciones incluidas en el control Chart.

  2. En el Editor de colecciones de anotaciones, haga clic en la flecha Agregar y seleccione ArrowAnnotation.

  3. En la categoría Delimitador del área de propiedades de ArrowAnnotation1, haga clic en la flecha de AnchorDataPoint y seleccione el primer punto de datos de Series1.

  4. Establezca las siguientes propiedades para el objeto Legend recién creado:

    Propiedad

    Valor

    Height

    -5

    Width

    0

    AnchorOffSetY

    -2.5

  5. En la categoría Varios, expanda la propiedad SmartLabelStyle y establezca su propiedad IsOverlappedHidden en False.

  6. Haga clic en Aceptar.

  7. Ejecute la aplicación.

Paso siguiente

Ha aprendido cómo agregar un gráfico, mediante el control Chart, a una aplicación web o de Windows Forms y, a continuación, agregar datos, título, leyendas y anotaciones al gráfico.Para obtener información sobre cómo utilizar los gráficos 3D, vea Tutorial: Cambiar a un gráfico 3D.

Vea también

Referencia

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

Otros recursos

Introducción

Utilizar controles Chart