En Ignite UI for Blazor, DataToolTip muestra los valores y títulos de las series, así como las leyendas de las series en una información sobre herramientas. Además, proporciona muchas propiedades de configuración de IgbDataLegend para filtrar filas de series y columnas de valores, aplicar estilos y formatear valores. Este tipo de información sobre herramientas se actualiza al mover el mouse dentro del área de gráfico de los componentes IgbCategoryChart, IgbFinancialChart e IgbDataChart.
Propiedades de información sobre herramientas de datos Blazor
Todas las propiedades de IgbDataToolTipLayer tienen el prefijo DataToolTip y se exponen en la API de los componentes IgbCategoryChart e IgbFinancialChart. Sin embargo, deberá crear una instancia de IgbDataToolTipLayer y agregarla a la colección de series del componente IgbDataChart si desea utilizarlo con gráficos radiales, gráficos polares y gráficos de dispersión.
Elementos de información sobre herramientas de datos Blazor
DataToolTip muestra contenido utilizando un conjunto de tres tipos de filas y cuatro tipos de columnas.
Filas de información sobre herramientas de datos Blazor
Las filas de DataToolTip incluyen la fila de encabezado, las filas de serie y la fila de resumen.
La fila del encabezado muestra la etiqueta del eje del punto sobre el que se desplaza el cursor y se puede cambiar mediante la propiedad DataToolTipHeaderText.
La fila de la serie puede ser en realidad un conjunto de filas correspondientes a cada serie trazada en el gráfico. Estas filas mostrarán la insignia de leyenda, el título de la serie, el valor real/abreviado de la serie y el símbolo y la unidad de abreviatura, si se especifica.
Finalmente, hay una fila de resumen que muestra el total de todos los valores de la serie. El título del resumen predeterminado se puede cambiar utilizando la propiedad DataToolTipSummaryTitleText de la leyenda. Además, puede utilizar la propiedad DataToolTipSummaryType para personalizar si muestra los valores total, mínimo, máximo o promedio de la serie en la fila de resumen.
El siguiente ejemplo demuestra la información sobre herramientas de datos con un resumen aplicado:
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="container vertical fill"><IgbCategoryChartName="chart"
@ref="chart"ChartType="CategoryChartType.Column"DataSource="HighestGrossingMovies"ToolTipType="ToolTipType.Data"XAxisInterval="1"YAxisTitle="Billions of U.S. Dollars"YAxisTitleLeftMargin="10"YAxisTitleRightMargin="5"YAxisLabelLeftMargin="0"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"CrosshairsDisplayMode="CrosshairsDisplayMode.None"IsCategoryHighlightingEnabled="true"HighlightingMode="SeriesHighlightingMode.FadeOthersSpecific"HighlightingBehavior="SeriesHighlightingBehavior.NearestItemsAndSeries"></IgbCategoryChart></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
}
private IgbCategoryChart chart;
private HighestGrossingMovies _highestGrossingMovies = null;
public HighestGrossingMovies HighestGrossingMovies
{
get
{
if (_highestGrossingMovies == null)
{
_highestGrossingMovies = new HighestGrossingMovies();
}
return _highestGrossingMovies;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Columnas de información sobre herramientas de datos Blazor
La columna de título muestra insignias de leyenda y títulos de series, que provienen de la propiedad ChartTitle de las diferentes Series trazadas en el gráfico.
La columna de valor muestra los valores de la serie como texto abreviado al que se le puede dar formato utilizando la propiedad DataToolTipValueFormatAbbreviation para aplicar la misma abreviatura a todos los números estableciendo esta propiedad en Auto o Shared. Alternativamente, un usuario puede seleccionar otras abreviaturas como Independent, Kilo, Million, etc. La precisión de los valores abreviados se controla utilizando DataToolTipValueFormatMinFractions y DataToolTipValueFormatMaxFractions para dígitos mínimo y máximo, respectivamente.
La columna de unidades muestra un símbolo de abreviatura y/o texto de unidad, que se puede configurar en DataToolTip configurando DataToolTipUnitsText para todas las columnas o usando las siguientes propiedades en cada serie del gráfico:
Serie de categorías (por ejemplo, Serie de columnas)
ValueMemberAsLegendUnit="K"
Serie de Precios Financieros:
OpenMemberAsLegendUnit="K"
LowMemberAsLegendUnit="K"
HighMemberAsLegendUnit="K"
CloseMemberAsLegendUnit="K"
Range Series:
LowMemberAsLegendUnit="K"
HighMemberAsLegendUnit="K"
Radial Series:
ValueMemberAsLegendUnit="km"
Polar Series:
RadiusMemberAsLegendUnit="km"
AngleMemberAsLegendUnit="degrees"
Para las propiedades mencionadas anteriormente, existen propiedades correspondientes que terminan en MemberAsLegendLabel para determinar el texto en las columnas de etiquetas mencionadas anteriormente.
Las columnas incluidas en las colecciones DataToolTipIncludedColumns y DataToolTipExcludedColumns generalmente corresponden a las rutas de valor de los elementos de datos subyacentes, pero la serie financiera tiene la opción de incluir algunas especiales además de las rutas High, Low, Open y Close que son necesarias para la serie financiera para trazar correctamente. Tiene la capacidad de mostrar las opciones TypicalPrice, Change y Volume dentro de la información sobre herramientas.
El siguiente ejemplo muestra una información sobre herramientas de datos con las columnas agregadas de Abrir, Alto, Bajo, Cerrar y Cambiar:
EXAMPLE
DATA
MODULES
RAZOR
CSS
//begin async datausing System;
using System.Collections.Generic;
using System.Text.Json;
using System.Threading;
using System.Threading.Tasks;
using System.Net.Http;
using System.Collections.ObjectModel;
using IgniteUI.Blazor.Controls;
publicclassMultipleStocks : List<TitledStockData>
{
publicasyncstatic Task<MultipleStocks> Fetch()
{
var google = await MultipleStocks.GetGoogleStock();
var amazon = await MultipleStocks.GetAmazonStock();
var val = new MultipleStocks();
val.Add(google);
val.Add(amazon);
return val;
}
/** gets Amazon stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Amazon";
return stockData;
}
/** gets Tesla stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Tesla";
return stockData;
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Microsoft";
return stockData;
}
/** gets Google stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Google";
return stockData;
}
privateasyncstatic Task<Dictionary<string, object>[]> Fetch(string url)
{
HttpClient client = new HttpClient();
var str = await client.GetStringAsync(url);
var arr = JsonSerializer.Deserialize<Dictionary<string, object>[]>(str);
return arr;
}
publicstatic TitledStockData ConvertData(Dictionary<string, object>[] arr)
{
var ret = new TitledStockData();
foreach (var json in arr)
{
var date = ((JsonElement)json["date"]).GetString();
var parts = date.Split('-'); // "2020-01-01"var item = new MultipleStocksItem();
item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]));
item.Open = ((JsonElement)json["open"]).GetDouble();
item.High = ((JsonElement)json["high"]).GetDouble();
item.Low = ((JsonElement)json["low"]).GetDouble();
item.Close = ((JsonElement)json["close"]).GetDouble();
item.Volume = ((JsonElement)json["volume"]).GetDouble();
ret.Add(item);
}
return ret;
}
}
publicclassMultipleStocksItem
{
[DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)]
publicstring Title { get; set; }
public DateTime Date { get; set; }
publicdouble Open { get; set; }
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
}
publicclassTitledStockData
: ObservableCollection<MultipleStocksItem>
{
}
//end async datacs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbFinancialChartModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataLegendModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Información sobre herramientas de datos Blazor: agrupación para Gráfico de datos
DataLegendGroup se puede establecer, en todos los tipos de series, en una cadena que categorizará un grupo de series en Data Legend. Cada grupo tendrá su propia fila de resumen antes de que se muestre otro grupo de series: De forma predeterminada, DataLegend ocultará los nombres de los grupos, pero puede mostrar los nombres de los grupos estableciendo la GroupRowVisible propiedad en true. GroupingMode debe establecerse en "Agrupado" y LabelDisplayMode debe establecerse en "Visible" en la capa de información sobre herramientas de datos.
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassOlympicMedalsTopCountriesWithTotalsItem
{
publicstring Year { get; set; }
publicdouble America { get; set; }
publicdouble AmericaGold { get; set; }
publicdouble China { get; set; }
publicdouble ChinaGold { get; set; }
publicdouble Russia { get; set; }
publicdouble RussiaGold { get; set; }
publicdouble Total { get; set; }
}
publicclassOlympicMedalsTopCountriesWithTotals
: List<OlympicMedalsTopCountriesWithTotalsItem>
{
publicOlympicMedalsTopCountriesWithTotals()
{
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"1996",
America = 148,
AmericaGold = 50,
China = 110,
ChinaGold = 40,
Russia = 95,
RussiaGold = 20,
Total = 353
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2000",
America = 142,
AmericaGold = 40,
China = 115,
ChinaGold = 45,
Russia = 91,
RussiaGold = 40,
Total = 348
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2004",
America = 134,
AmericaGold = 35,
China = 121,
ChinaGold = 55,
Russia = 86,
RussiaGold = 25,
Total = 341
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2008",
America = 131,
AmericaGold = 20,
China = 129,
ChinaGold = 35,
Russia = 65,
RussiaGold = 35,
Total = 325
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2012",
America = 135,
AmericaGold = 25,
China = 115,
ChinaGold = 50,
Russia = 77,
RussiaGold = 15,
Total = 327
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2016",
America = 146,
AmericaGold = 45,
China = 112,
ChinaGold = 45,
Russia = 88,
RussiaGold = 30,
Total = 346
});
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="container vertical fill"><IgbDataChartShouldAutoExpandMarginForInitialLabels="true"ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"Name="chart"
@ref="chart"><IgbCategoryXAxisName="xAxis"
@ref="xAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Label="Year"></IgbCategoryXAxis><IgbNumericYAxisName="yAxis"
@ref="yAxis"></IgbNumericYAxis><IgbColumnSeriesName="ColumnSeries1"
@ref="columnSeries1"XAxisName="xAxis"YAxisName="yAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Title="America"ValueMemberPath="America"DataLegendGroup="Medals by Country"></IgbColumnSeries><IgbColumnSeriesName="ColumnSeries2"
@ref="columnSeries2"XAxisName="xAxis"YAxisName="yAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Title="China"ValueMemberPath="China"DataLegendGroup="Medals by Country"></IgbColumnSeries><IgbColumnSeriesName="ColumnSeries3"
@ref="columnSeries3"XAxisName="xAxis"YAxisName="yAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Title="Russia"ValueMemberPath="Russia"DataLegendGroup="Medals by Country"></IgbColumnSeries><IgbDataToolTipLayerName="dataToolTipLayer"
@ref="dataToolTipLayer"GroupRowVisible="true"GroupingMode="DataToolTipLayerGroupingMode.Grouped"></IgbDataToolTipLayer></IgbDataChart></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var columnSeries1 = this.columnSeries1;
var columnSeries2 = this.columnSeries2;
var columnSeries3 = this.columnSeries3;
var dataToolTipLayer = this.dataToolTipLayer;
}
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbColumnSeries columnSeries1;
private IgbColumnSeries columnSeries2;
private IgbColumnSeries columnSeries3;
private IgbDataToolTipLayer dataToolTipLayer;
private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null;
public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals
{
get
{
if (_olympicMedalsTopCountriesWithTotals == null)
{
_olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
}
return _olympicMedalsTopCountriesWithTotals;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Información sobre herramientas de datos Blazor: Agrupamiento y posicionamiento para Gráfico de categorías y Gráfico financiero
Puede establecer la propiedad DataToolTipGroupingMode en Grouped o Individual para agrupar el contenido de varias series en una sola información sobre herramientas o separar el contenido de cada serie en varias descripciones sobre herramientas. En el modo Grouped, puede personalizar dónde se muestra la información sobre herramientas configurando las propiedades DataToolTipGroupedPositionModeX y DataToolTipGroupedPositionModeY. Básicamente, esto le permite personalizar las alineaciones horizontales y verticales de la información sobre herramientas y si desea que realice un seguimiento de los puntos de la serie más cercanos a la posición del mouse o fije la información sobre herramientas al borde del área de trazado.
El siguiente ejemplo muestra una información sobre herramientas de datos ubicada en la parte superior derecha del gráfico:
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="options vertical"><IgbPropertyEditorPanelName="PropertyEditor"
@ref="propertyEditor"DescriptionType="CategoryChart"IsHorizontal="true"IsWrappingEnabled="true"><IgbPropertyEditorPropertyDescriptionPropertyPath="DataToolTipGroupedPositionModeX"PrimitiveValue="@("PinRight")"Name="GroupedPositionXEditor"
@ref="groupedPositionXEditor"Label="Grouped X Position: "></IgbPropertyEditorPropertyDescription><IgbPropertyEditorPropertyDescriptionPropertyPath="DataToolTipGroupedPositionModeY"PrimitiveValue="@("PinTop")"Name="GroupedPositionYEditor"
@ref="groupedPositionYEditor"Label="Grouped Y Position: "></IgbPropertyEditorPropertyDescription><IgbPropertyEditorPropertyDescriptionPropertyPath="DataToolTipGroupingMode"PrimitiveValue="@("Grouped")"Name="GroupingModeEditor"
@ref="groupingModeEditor"Label="Grouping Mode: "></IgbPropertyEditorPropertyDescription></IgbPropertyEditorPanel></div><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="container vertical fill"><IgbCategoryChartName="chart"
@ref="chart"ChartType="CategoryChartType.Column"DataSource="HighestGrossingMovies"ToolTipType="ToolTipType.Data"DataToolTipGroupedPositionModeX="DataTooltipGroupedPositionX.PinRight"DataToolTipGroupedPositionModeY="DataTooltipGroupedPositionY.PinTop"DataToolTipGroupingMode="DataToolTipLayerGroupingMode.Grouped"XAxisInterval="1"YAxisTitle="Billions of U.S. Dollars"YAxisTitleLeftMargin="10"YAxisTitleRightMargin="5"YAxisLabelLeftMargin="0"CrosshairsDisplayMode="CrosshairsDisplayMode.None"></IgbCategoryChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var groupedPositionXEditor = this.groupedPositionXEditor;
var groupedPositionYEditor = this.groupedPositionYEditor;
var groupingModeEditor = this.groupingModeEditor;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription groupedPositionXEditor;
private IgbPropertyEditorPropertyDescription groupedPositionYEditor;
private IgbPropertyEditorPropertyDescription groupingModeEditor;
private IgbCategoryChart chart;
private HighestGrossingMovies _highestGrossingMovies = null;
public HighestGrossingMovies HighestGrossingMovies
{
get
{
if (_highestGrossingMovies == null)
{
_highestGrossingMovies = new HighestGrossingMovies();
}
return _highestGrossingMovies;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Formato de valor de información sobre herramientas de datos Blazor
DataToolTip proporciona abreviatura automática de números grandes utilizando su propiedad DataToolTipValueFormatAbbreviation. Esto agrega un multiplicador en la columna de unidades, como kilo, millón, mil millones, etc. Puede personalizar el número de dígitos fraccionarios que se muestran configurando DataToolTipValueFormatMinFractions y DataToolTipValueFormatMaxFractions. Esto le permitirá determinar el número mínimo y máximo de dígitos que aparecen después del punto decimal, respectivamente.
El siguiente ejemplo demuestra una información sobre herramientas de datos con las fracciones mínima y máxima configuradas:
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="container vertical fill"><IgbCategoryChartName="chart"
@ref="chart"ChartType="CategoryChartType.Column"DataSource="HighestGrossingMovies"ToolTipType="ToolTipType.Data"DataToolTipUnitsText="B"DataToolTipValueFormatMode="DataLegendValueMode.Decimal"DataToolTipValueFormatMinFractions="2"XAxisInterval="1"YAxisTitle="Billions of U.S. Dollars"YAxisTitleLeftMargin="10"YAxisTitleRightMargin="5"YAxisLabelLeftMargin="0"IsCategoryHighlightingEnabled="true"CrosshairsDisplayMode="CrosshairsDisplayMode.None"HighlightingMode="SeriesHighlightingMode.FadeOthersSpecific"HighlightingBehavior="SeriesHighlightingBehavior.NearestItemsAndSeries"></IgbCategoryChart></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
}
private IgbCategoryChart chart;
private HighestGrossingMovies _highestGrossingMovies = null;
public HighestGrossingMovies HighestGrossingMovies
{
get
{
if (_highestGrossingMovies == null)
{
_highestGrossingMovies = new HighestGrossingMovies();
}
return _highestGrossingMovies;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Modo de valor de información sobre herramientas de datos Blazor
Puede cambiar la visualización decimal predeterminada de los valores dentro de DataToolTip para que sean moneda cambiando la propiedad DataToolTipValueFormatMode de la capa. DataToolTip también expone la capacidad de modificar la cultura del símbolo de moneda mostrado mediante su propiedad DataToolTipValueFormatCulture y configurándola en su etiqueta cultural correspondiente. Por ejemplo, el siguiente ejemplo muestra un gráfico con DataToolTipValueFormatCulture establecido en "en-GB":
EXAMPLE
DATA
MODULES
RAZOR
CSS
//begin async datausing System;
using System.Collections.Generic;
using System.Text.Json;
using System.Threading;
using System.Threading.Tasks;
using System.Net.Http;
using System.Collections.ObjectModel;
using IgniteUI.Blazor.Controls;
publicclassMultipleStocks : List<TitledStockData>
{
publicasyncstatic Task<MultipleStocks> Fetch()
{
var google = await MultipleStocks.GetGoogleStock();
var amazon = await MultipleStocks.GetAmazonStock();
var val = new MultipleStocks();
val.Add(google);
val.Add(amazon);
return val;
}
/** gets Amazon stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Amazon";
return stockData;
}
/** gets Tesla stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Tesla";
return stockData;
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Microsoft";
return stockData;
}
/** gets Google stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Google";
return stockData;
}
privateasyncstatic Task<Dictionary<string, object>[]> Fetch(string url)
{
HttpClient client = new HttpClient();
var str = await client.GetStringAsync(url);
var arr = JsonSerializer.Deserialize<Dictionary<string, object>[]>(str);
return arr;
}
publicstatic TitledStockData ConvertData(Dictionary<string, object>[] arr)
{
var ret = new TitledStockData();
foreach (var json in arr)
{
var date = ((JsonElement)json["date"]).GetString();
var parts = date.Split('-'); // "2020-01-01"var item = new MultipleStocksItem();
item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]));
item.Open = ((JsonElement)json["open"]).GetDouble();
item.High = ((JsonElement)json["high"]).GetDouble();
item.Low = ((JsonElement)json["low"]).GetDouble();
item.Close = ((JsonElement)json["close"]).GetDouble();
item.Volume = ((JsonElement)json["volume"]).GetDouble();
ret.Add(item);
}
return ret;
}
}
publicclassMultipleStocksItem
{
[DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)]
publicstring Title { get; set; }
public DateTime Date { get; set; }
publicdouble Open { get; set; }
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
}
publicclassTitledStockData
: ObservableCollection<MultipleStocksItem>
{
}
//end async datacs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbFinancialChartModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbLegendModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Estilo de información sobre herramientas de datos Blazor
La información sobre herramientas de datos proporciona propiedades para diseñar cada tipo de columna. Cada una de estas propiedades comienza con Título, Etiqueta, Valor o Unidades, y puede diseñar el color, la fuente y el margen del texto. Por ejemplo, si quisiera establecer el color del texto de cada uno de estos, establecería las propiedades DataToolTipTitleTextColor, DataToolTipLabelTextColor, DataToolTipValueTextColor y DataToolTipUnitsTextColor.
El siguiente ejemplo demuestra el uso de las propiedades de estilo mencionadas anteriormente:
EXAMPLE
Se exponen varias propiedades, incluidas las partes de agrupación de la información sobre herramientas.