Descripción de gráficos: representación gráfico y datos subyacentes
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> usa FetchXML para recuperar los datos para el gráfico. La consulta de FetchXML especifica la información acerca de las columnas de tabla, las funciones agregadas y el grupo por cláusulas de los datos que se mostrarán en un gráfico. Todas las funciones agregadas FetchXML son compatibles con los gráficos. Para obtener más información acerca de las funciones agregadas FetchXML, consulte Agregar datos mediante FetchXML.
La consulta de FetchXML permite filtrar los datos. Además, los filtros se aplican en gráficos a través de vistas. Por lo tanto, si ya se ha especificado una condición de filtrado en la consulta de FetchXML en el 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 de aplicar todos los filtros. Para obtener más información sobre cómo usar la consulta FetchXML para filtrar datos, consulte Consultar datos mediante FetchXML.
Nota
Aunque la cadena XML de descripción de datos se valide de nuevo en el esquema de descripción de los datos de visualización, la consulta FetchXML del elemento <FetchCollection> no. La consulta FetchXML se valida en 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,HighChartsomite 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.#VALy#TOTALno 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).
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de