Compartir a través de

Descripción de gráficos: representación gráfico y datos subyacentes

  • Artículo

Los gráficos presentan los datos visualmente asignando valores de texto en dos ejes: el horizontal (x) y el vertical (y). El eje x se denomina eje de categoría y el eje y se denomina eje de serie. El eje de categoría puede mostrar valores numéricos y no numéricos, mientras el eje de series solo muestra valores numéricos.

Los gráficos de aplicaciones basadas en modelos se pueden clasificar en lo siguiente:

  • Gráficos de una sola serie: gráficos que muestran datos con un valor (y) de serie asignado a un valor de categoría (x).

  • Gráficos de varias series: gráficos que muestran datos con valores de varias series asignados a un valor de una categoría. Los gráficos de varias series incluyen gráficos de columnas apiladas, que muestran verticalmente la colaboración de cada serie a un total en las diferentes categorías, y gráficos de columna apiladas al 100%, que comparan el porcentaje que cada serie contribuye a un total en las diferentes categorías. Puede combinar varios tipos de gráficos compatibles en gráficos de varias series, por ejemplo, columna y línea, barra y línea, etc.

Nota

Los gráficos de varias categorías se pueden crear con la aplicación web o modificando las cadenas XML descritas aquí.

Durante la creación de un gráfico en aplicaciones basadas en modelos mediante el SDK, debe tener en cuenta los siguientes dos aspectos importantes:

  • Datos subyacentes del gráfico: especificados mediante la cadena XML de descripción de los datos.

  • Visualización de datos (apariencia): especificados mediante la cadena XML de la descripción de la visualización.

Nota

Controles de gráfico de Microsoft le permite crear varios tipos de gráficos como de columna, barras, áreas, líneas, circular, embudo, burbuja y radar. El diseñador de gráficos en aplicaciones basadas en modelos permite crear solo ciertos tipos de gráficos. Sin embargo, mediante el SDK, puede crear la mayoría de los tipos de gráficos compatibles con Controles de gráfico de Microsoft.

Use la cadena XML de descripción de datos para especificar datos del gráfico

La cadena XML de descripción de datos define los datos que se muestran en el gráfico. El contenido de la cadena XML se valida con el esquema de descripción de los datos de visualización. Para obtener más información acerca del esquema, consulte Esquema de descripción de los datos de visualización.

Puede especificar la cadena XML de descripción de datos mientras crea un gráfico mediante el atributo SavedQueryVisualization.DataDescription o UserQueryVisualization.DataDescription para el gráfico propiedad de la organización o propiedad del usuario respectivamente.

La cadena XML de descripción de datos contiene los siguientes dos elementos: <FetchCollection> y <CategoryCollection>.

El elemento <FetchCollection>

El elemento <FetchCollection> utiliza FetchXML para recuperar datos para el gráfico. La consulta FetchXML especifica información sobre las columnas de la tabla, las funciones agregadas y las cláusulas group by para que los datos se muestren en un gráfico. Todas las funciones agregadas FetchXML son compatibles con los gráficos. Para obtener más información sobre las funciones agregadas FetchXML , consulte Agregar datos usando FetchXml.

La consulta FetchXML le permite filtrar sus datos. Además, los filtros se aplican en gráficos a través de vistas. Por lo tanto, si ya se especifica una condición de filtro en la consulta FetchXML del elemento <FetchCollection> y, además, se aplica un filtro a través de una vista, el gráfico mostrará los datos que se devuelven después. Aplica todos los filtros. Para obtener más información sobre cómo utilizar la consulta FetchXML para filtrar datos, consulte Consultar datos usando FetchXml.

Nota

Aunque la cadena XML de descripción de datos se valida nuevamente en el esquema de descripción de datos de visualización, la consulta FetchXML dentro del elemento <FetchCollection> no lo es. La consulta FetchXML se valida con el esquema FetchXML . Para obtener más información, consulte Referencia de FetchXML.

Si el gráfico es un gráfico de comparación, el elemento <FetchCollection> contendrá dos cláusulas group by*.

El elemento <CategoryCollection>

El elemento <CategoryCollection> contiene información acerca de los ejes de categoría (horizontal) y de series (vertical) de un gráfico.

  • Cada subelemento de <Category> tiene un elemento secundario llamado <MeasureCollection> que se asigna al elemento <Series> en el XML de descripción de la presentación. Un único gráfico de serie dispone de un solo elemento secundario <MeasureCollection>, mientras que un gráfico de varias series tendrá varios elementos secundarios <MeasureCollection>, cada uno asignado al elemento <Series> correspondiente en el XML de descripción de la presentación.

  • Cada elemento secundario de <MeasureCollection> tiene un elemento denominado <Measure> que se corresponde al valor del eje de serie (vertical), correspondiente a cada valor del eje de categorías (horizontal).

Ejemplo

A continuación se facilita una cadena XML de descripción de datos de ejemplo:

<datadefinition>  
  <fetchcollection>  
    <fetch mapping="logical" count="10">  
      <entity name="opportunity">  
        <attribute name="estimatedvalue" />  
        <order attribute="estimatedvalue" descending="true" />  
      </entity>  
    </fetch>  
  </fetchcollection>  
  <categorycollection>  
    <category>  
      <measurecollection>  
        <measure alias="estimatedvalue" />  
      </measurecollection>  
    </category>  
  </categorycollection></datadefinition>

Para obtener más cadenas XML de descripción de los datos de ejemplo, consulte Gráficos de muestra.

Use la cadena XML de descripción de presentación para especificar la representación de datos

La cadena XML de la descripción de la presentación contiene información acerca de la apariencia del gráfico, como el título del gráfico, el color del gráfico, el tipo de gráfico (barra, columna, línea, etc.). No hay ninguna definición de esquema para esta cadena XML. Sin embargo, XML es una serialización de la clase Gráfico en Controles de gráfico de Microsoft. Más información: Controles de gráfico

Puede especificar la cadena XML de descripción de presentación mientras crea un gráfico mediante SavedQueryVisualization.PresentationDescription o UserQueryVisualization.PresentationDescription para el gráfico propiedad de la organización o propiedad del usuario respectivamente.

Importante

En la Interfaz unificada solo se admite un subconjunto de las propiedades. Más información: Métodos y propiedades admitidos en la Interfaz unificada

Ejemplo para cliente web

A continuación se muestra una cadena XML de descripción de la presentación de ejemplo para cliente web:

<Chart Palette="BrightPastel">  
  <Series>  
    <Series _Template_="All" Color="153, 204, 255" BorderColor="164, 164, 164" BorderDashStyle="Solid" BorderWidth="1" ShadowColor="128, 128, 128, 128" ShadowOffset="1" IsValueShownAsLabel="true" Font="{0}, 6.75pt" BackGradientStyle="TopBottom" BackSecondaryColor="0, 102, 153" LabelForeColor="100, 100, 100" ChartType="Column">  
      <SmartLabelStyle Enabled="True" />  
      <Points />  
    </Series>  
  </Series>  
  <ChartAreas>  
    <ChartArea _Template_="All" BackColor="White" BorderColor="26, 59, 105" BorderWidth="0" BorderDashStyle="Solid">      <AxisY LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">  
        <MajorTickMark LineColor="Gray" />  
        <MajorGrid Enabled="false" />  
        <LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />  
      </AxisY>  
      <AxisX LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">        <MajorTickMark LineColor="Gray" />        <MajorGrid Enabled="false" />  
        <LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />  
      </AxisX>  
    </ChartArea>  
  </ChartAreas>  
  <Titles>  
    <Title _Template_="All" Font="{0}, 9pt, style=Bold, GdiCharSet=0" ForeColor="100, 100, 100"></Title>  
  </Titles>  
  <BorderSkin PageColor="Control" BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" />  
</Chart>

Para obtener más cadenas XML de descripción de los datos de ejemplo, consulte Gráficos de muestra.

Métodos y propiedades admitidos en la Interfaz unificada

En la siguiente sección se muestran los métodos y las propiedades que se admiten en la Interfaz unificada:

AxisX

Obtiene o establece el tipo de eje X de la serie.

Propiedades

Nombre de la propiedad Descripción
Habilitados Obtiene o define un valor que indica si un eje está habilitado.
LabelStyle Enabled Obtiene o establece una marca que indica si la etiqueta está habilitada.
LabelStyle ForeColor Obtiene o establece el color de la etiqueta.
LabelStyle Format Obtiene o establece la cadena de formato para el texto de la etiqueta. Más información: Formato numérico admitido para gráficos
LineColor Obtiene o establece el color de línea de un eje. Más información: Formato de color admitido
IsReversed Obtiene o establece una marca que indica si el eje está invertido.
Si se establece en verdadero, tiene dos efectos para el eje x:
- Se da la vuelta a las etiquetas del eje x en el orden inverso (de derecha a izquierda)
- También se lleva el eje y al lado opuesto, para acomodar arriba a la derecha la etiqueta del eje x de derecha a izquierda.
MajorGrid Enabled Obtiene o establece una marca que determina si se habilitan las líneas de cuadrícula principales o secundarias.
MajorGrid LineColor Obtiene o establece el color de línea de una cuadrícula. Más información: Formato de color admitido
MajorTickMark Enabled Obtiene o establece una marca que determina si se habilitan las líneas de cuadrícula principales.
MajorTickMark LineColor Obtiene o establece el color de línea de una cuadrícula.
Título Obtiene o establece el título del eje.
TitleForeColor Obtiene o establece el color del texto de un título de eje. Más información: Formato de color admitido

Sugerencia

  • Cuando hay demasiadas LABELS, HighCharts omite cada segunda etiqueta e intenta representar de nuevo. Una solución rápida es eliminar los registros o alejar en el navegador.

Ejemplo

 <AxisX Enabled="True" LineColor="165, 172, 181" Title="Test XAxis Title" TitleForeColor="91,151,213" IsReversed="true">
    <MajorTickMark LineColor="165, 172, 181" Enabled="true" />
    <MajorGrid LineColor="green" Enabled="true"/>
    <LabelStyle ForeColor="red" Format="#,0,.##K" Enabled="true" />
 </AxisX>

AxisY

Obtiene o establece el tipo de eje Y de la serie.

Propiedades

Nombre de la propiedad Descripción
AxisY2 Obtiene o establece un objeto Axis que representa el eje Y secundario.
- El segundo eje Y solo se aplica a gráficos de varias series.
- Si crea varias series de gráficos con el editor de gráficos, la propiedad YAxisType=Secondary se agregará de forma predeterminada a la segunda serie del gráfico, y se agregará un nodo AxisY2 al código XML.
- Si desea que se mida otra serie con el segundo eje Y, puede mover YAxisType=Secondary a ese nodo de serie.
- Si no desea utilizar un segundo eje Y, puede eliminar YAxisType=Secondary.
- Si un eje Y (primario o secundario) mide más de una serie, no se agregará el título a ese eje Y, puesto que el título del eje Y no sabe qué serie mostrar.
Habilitados Obtiene o define un valor que indica si un eje está habilitado.
Intervalo Obtiene o establece el intervalo de un eje.
LabelStyle Enabled Obtiene o establece una marca que indica si la etiqueta está habilitada.
LabelStyle ForeColor Obtiene o establece el color de la etiqueta.
LabelStyle Format Obtiene o establece la cadena de formato para el texto de la etiqueta. Más información: Formato numérico admitido para gráficos
LineColor Obtiene o establece el color de línea de un eje. Más información: Formato de color admitido
MajorGrid Enabled Obtiene o establece una marca que determina si se habilitan las líneas de cuadrícula principales.
MajorGrid LineColor Obtiene o establece el color de línea de una cuadrícula. Más información: Formato de color admitido
MajorTickMark Enabled Obtiene o establece una marca que determina si se habilitan las líneas de cuadrícula principales.
MajorTickMark LineColor Obtiene o establece el color de línea de una cuadrícula.
Máximo Obtiene o establece el valor máximo de un eje.
Mínimo Obtiene o establece el valor mínimo de un eje.
Título Obtiene o establece el título del eje.
TitleForeColor Obtiene o establece el color del texto de un título de eje. Más información: Formato de color admitido

Ejemplo

<AxisY Enabled="True" LineColor="165, 172, 181" Title="Test YAxis Title" TitleForeColor="91,151,213" Interval="1" Minimum="0" Maximum="5">
  <MajorTickMark LineColor="165, 172, 181" Enabled="true" />
  <MajorGrid LineColor="green" Enabled="true"/>
  <LabelStyle ForeColor="red" Enabled="true" />
</AxisY>
<AxisY2 Enabled="True" LineColor="165, 172, 181" Title="Test YAxis2 Title" TitleForeColor="91,151,213" Interval="10" Minimum="0" Maximum="100">
  <MajorTickMark LineColor="165, 172, 181" Enabled="true" />
  <MajorGrid LineColor="green" Enabled="true"/>
  <LabelStyle ForeColor="red" Enabled="true" />
</AxisY2>

Gráfico

La clase raíz de los gráficos.

Propiedades

Nombre de la propiedad Descripción
PaletteCustomColor Obtiene o establece una matriz de colores de paleta personalizados. Sigue la prioridad que se muestra a continuación:
- Reproduce el color definido en el nodo Series.
- Si se especifica la paleta de colores, el gráfico usa la paleta de colores para elegir la paleta de color.
- Si no se especifica ninguno, usa la paleta de colores predeterminada. Más información: Formato de color admitido

Ejemplo

<Chart Palette="None" PaletteCustomColors="91, 151, 213; #4169E1, red, 127,97,142,206">

ChartArea

Representa un área de gráfico en la imagen del gráfico.

Propiedades

Nombre de la propiedad Descripción
Area3DStyle Enable3D Obtiene o establece un valor que indica si la marca activa y desactiva el efecto 3D para un área de gráfico. Admite los siguientes tipos de gráficos 3D:
- Columnas 3D
- Barras 3D
- StackedColumn 3D
- StackedBar 3D
- StackedColumn100 3D
- StackedBar100 3D
- Tarta 3D
BackColor Permite a los usuarios establecer como fondo de trazado un color sólido o un color de degradado. Más información: Formato de color admitido
BackSecondaryColor Permite a los usuarios establecer como fondo de trazado un color sólido o un color de degradado. Más información: Formato de color admitido
BackGradientStyle Permite a los usuarios establecer como fondo de trazado un color sólido o un color de degradado.

Ejemplo

<ChartArea BackColor="orange" BackSecondaryColor="purple" BackGradientStyle="LeftRight" >
  <Area3DStyle Enable3D="true" />
</ChartArea>

Leyenda

Representa la leyenda de la imagen del gráfico.

Propiedades

Nombre de la propiedad Descripción
Habilitados Define si la leyenda está habilitada. De forma predeterminada, se establece en True.

Ejemplo

<Legends>
  <Legend Enabled="True"/>
</Legends>

Serie

Almacena puntos de datos y series.

Propiedades

Nombre de la propiedad Descripción
BorderColor Obtiene o establece el color del borde del punto de datos. Más información: Formato de color admitido
BorderWidth Obtiene o establece el ancho del borde del punto de datos.
ChartType Valor de enumeración que indica el tipo de gráfico que se utiliza para representar la serie. El valor predeterminado es Columna. Admite los siguientes tipos de gráficos:
- Columna
- StackedColumn
- StackedColumn100
- Gráfico de barras
- StackedBar
- StackedBar100
- Área
- StackedArea
- StackedArea100
- Line
- Gráfico circular
- Embudo
- Etiqueta
- Anillo
- Punto
Color Obtiene o establece el color del punto de datos. Para los gráficos circulares y de embudo se ignora la propiedad de color definida en el nodo de la serie, pero se usa la paleta de colores para seleccionar el color del gráfico. Más información: Formato de color admitido
IsValueShownAsLabel Obtiene o establece una marca que indica si se muestra el valor del punto de datos en la etiqueta.
CustomProperties Permite a los usuarios configurar FunnelNeckHeight y FunnelNeckWidth para personalizar la forma del gráfico de embudo. FunnelNeckHeight y FunnelNeckWidth representan el porcentaje. Este parámetro solo es compatible con los gráficos de embudo.
IsVisibleInLegend Obtiene o establece una marca que indica si el elemento se muestra en la leyenda.
LabelForeColor Obtiene o establece el color del texto de la etiqueta. Más información: Formato de color admitido
LabelFormat Obtiene o establece el formato de la etiqueta del punto de datos. Más información: Formato numérico admitido para gráficos
LegendText Obtiene o establece el texto del elemento en la leyenda. Para gráficos circulares y de embudo, la leyenda muestra el valor de cada punto de datos en una serie. En lugar de mostrar el nombre de la serie como un todo.
YAxisType Obtiene o establece el tipo de eje Y de una serie. Solo se admite un segundo eje Y, no un segundo eje X.

Nota

  • Actualmente, apoyamos parcialmente #PERCENT. #VAL y #TOTAL no son compatibles en Interfaz unificada.
  • Para gráficos no comparativos, admitimos un máximo de 5 series (1 categoría). Para los gráficos comparativos, solo admitimos 1 serie y 2 categorías.

Ejemplo

<Series>
  <Series ChartType="Column" Color="91, 151, 213" LegendText="Est Revenue" IsVisibleInLegend="True" BorderColor="red" BorderWidth="1" IsValueShownAsLabel="True" LabelFormat="$#,0,.##K" LabelForeColor="59, 59, 59">
  </Series>
  <Series ChartType="Column" Color="237, 125, 49" LegendText="Actual Revenue" IsVisibleInLegend="True" BorderColor="red" BorderWidth="1" IsValueShownAsLabel="True" LabelFormat="$#,0,.##K" LabelForeColor="59, 59, 59" YAxisType="Secondary">
  </Series>
</Series>

Formato de color admitido en Interfaz unificada

La Interfaz unificada admite los siguientes formatos de color en el código XML de presentación de un gráfico, que es compatible con el cliente web:

  • Formato decimal RGB: 97,142,206
  • Formato hexadecimal RGB: #4169E1
  • Formato decimal ARGB: 127,90,138,57
  • Colores con nombre reconocidos por el navegador: rojo, transparente

Formato numérico admitido para gráficos en la Interfaz unificada

Valores de formato Descripción
#,0 Sin escala, sin decimales, cero inicial
#,0,.##K Miles, hasta 2 decimales, cero inicial
#,0,,.##M Millones, hasta 2 decimales, cero inicial
#,0,,,.##B Miles de millones, hasta 2 decimales, cero inicial
C Divisa con decimales predeterminados
C0 Divisa sin decimales
C2 Divisa con 2 decimales
F0 Punto fijo
#,0;(#,0);' ' Sin escala, sin decimales, cero inicial, valor negativo mostrado entre llaves, supresión de ceros
#,0,.##K;(#,0,.##K);' ' Miles, hasta 2 decimales, cero inicial, valor negativo mostrado entre llaves, supresión de ceros
#,0,,.##M;(#,0,,.##M);' ' Millones, hasta 2 decimales, cero inicial, valor negativo mostrado entre llaves, supresión de ceros
#,0,,,.##B;(#,0,,,.##B);' ' Miles de millones, hasta 2 decimales, cero inicial, valor negativo mostrado entre llaves, supresión de ceros
% En una cadena de formato, el signo de porcentaje (%) hace que un número se multiplique por 100 antes de aplicar el formato

Consultar también

Visualizaciones (gráficos)
Acciones en visualizaciones (gráficos)
Crear un gráfico
Consultar datos mediante FetchXML
Esquema de descripción de los datos de visualización
Gráficos de muestra
Clase de gráfico (Controles de gráficos de Microsoft)

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).