Información sobre herramientas de gráficos de Blazor
En los gráficos de Blazor, la información sobre herramientas proporciona detalles sobre los datos enlazados y se representan en ventanas emergentes cuando el usuario final pasa el cursor sobre los puntos de datos. La información sobre herramientas es compatible con los IgbCategoryChart controles , IgbFinancialChart, y IgbDataChart.
Blazor Tipos de información sobre herramientas de gráficos
Blazor gráfico proporciona tres tipos de información sobre herramientas que puede tener habilitada la información sobre herramientas estableciendo la ToolTipType propiedad. En el ejemplo siguiente se muestra el Gráfico de columnas con un cuadro combinado que puede utilizar para cambiar el tipo de información sobre herramientas.
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="ToolTipType"Name="ToolTipTypeEditor"
@ref="toolTipTypeEditor"Label="ToolTip Type: "PrimitiveValue="@("Data")"></IgbPropertyEditorPropertyDescription></IgbPropertyEditorPanel></div><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><IgbLegendName="legend"
@ref="legend"></IgbLegend></div><divclass="container vertical fill"><IgbCategoryChartName="chart"
@ref="chart"ChartType="CategoryChartType.Column"DataSource="HighestGrossingMovies"XAxisInterval="1"YAxisTitle="Billions of U.S. Dollars"YAxisTitleLeftMargin="10"YAxisTitleRightMargin="5"YAxisLabelLeftMargin="0"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"CrosshairsSnapToData="true"></IgbCategoryChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var toolTipTypeEditor = this.toolTipTypeEditor;
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription toolTipTypeEditor;
private IgbLegend legend;
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.
La propiedad ToolTipType es configurable y se puede establecer en una de las siguientes opciones:
El valor de la propiedad
Descripción
DefaultInformación sobre herramientas
Muestra información sobre herramientas para un solo elemento cuando el puntero se coloca sobre él.
DataInformación sobre herramientas
Muestra información sobre herramientas de datos para todas las series del gráfico.
ItemInformación sobre herramientas
Muestre información sobre herramientas para cada elemento de datos en la categoría sobre la que se coloca el puntero.
CategoryInformación sobre herramientas
Muestra información sobre herramientas agrupada para todos los puntos de datos de la categoría sobre la que está colocado el puntero.
Blazor Plantilla de información sobre herramientas de gráfico
Si ninguno de los tipos integrados de información sobre herramientas se ajusta a sus requisitos, puede crear su propia información sobre herramientas para mostrar y aplicar estilo al título de la serie, los valores de datos y los valores de los ejes. En las secciones siguientes se muestra cómo hacerlo en diferentes tipos de gráficos de Blazor.
Información sobre herramientas personalizadas en Gráfico de categorías
En este ejemplo se muestra cómo crear información sobre herramientas personalizada para todas las series del control Blazor IgbCategoryChart. Tenga en cuenta que también puede aplicar la misma lógica a la información sobre herramientas personalizada en Blazor IgbFinancialChart control.
EXAMPLE
MODULES
DATA
RAZOR
JS
CSS
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(IgbInputModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbCategoryChartModule)
);
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 personalizadas en Gráfico de datos
En este ejemplo se muestra cómo crear información sobre herramientas personalizada para cada serie Blazor Gráfico de datos control.
EXAMPLE
MODULES
DATA
RAZOR
JS
CSS
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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbColumnSeriesModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicstaticclassEnergyProductionData
{
publicclassEnergy
{
publicstring Country { get; set; }
publicdouble Coal { get; set; }
publicdouble Oil { get; set; }
publicdouble Gas { get; set; }
publicdouble Nuclear { get; set; }
publicdouble Hydro { get; set; }
}
publicstatic List<Energy> Generate()
{
var data = new List<Energy>() {
new Energy { Country = "Canada", Coal = 400, Oil = 100, Gas = 175, Nuclear = 225, Hydro = 350 },
new Energy { Country = "China", Coal = 925, Oil = 200, Gas = 350, Nuclear = 400, Hydro = 625 },
new Energy { Country = "Russia", Coal = 550, Oil = 200, Gas = 250, Nuclear = 475, Hydro = 425 },
new Energy { Country = "Australia", Coal = 450, Oil = 100, Gas = 150, Nuclear = 175, Hydro = 350 },
new Energy { Country = "United States", Coal = 800, Oil = 250, Gas = 475, Nuclear = 575, Hydro = 750 },
new Energy { Country = "France", Coal = 375, Oil = 150, Gas = 350, Nuclear = 275, Hydro = 325 }
};
return data;
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical">@if (Data != null)
{<IgbDataChartHeight="100%"Width="100%"Subtitle="Energy Source of Biggest Countries"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"SeriesMouseEnterScript="onSeriesMouseEnter">@*note the onSeriesMouseEnter" function is implemented .JS file in wwwroot folder*@<IgbCategoryXAxisName="xAxis"DataSource="Data"Label="Country"></IgbCategoryXAxis><IgbNumericYAxisName="yAxis"></IgbNumericYAxis><IgbColumnSeriesTitle="Coal"XAxisName="xAxis"YAxisName="yAxis"ValueMemberPath="Coal"DataSource="Data"ShowDefaultTooltip="false"/><IgbColumnSeriesTitle="Hydro"XAxisName="xAxis"YAxisName="yAxis"ValueMemberPath="Hydro"DataSource="Data"ShowDefaultTooltip="false"/><IgbColumnSeriesTitle="Nuclear"XAxisName="xAxis"YAxisName="yAxis"ValueMemberPath="Nuclear"DataSource="Data"ShowDefaultTooltip="false"/><IgbColumnSeriesTitle="Gas"XAxisName="xAxis"YAxisName="yAxis"ValueMemberPath="Gas"DataSource="Data"ShowDefaultTooltip="false"/><IgbColumnSeriesTitle="Oil"XAxisName="xAxis"YAxisName="yAxis"ValueMemberPath="Oil"DataSource="Data"ShowDefaultTooltip="false"/></IgbDataChart>}</div>@code {private List<EnergyProductionData.Energy> Data;
protectedoverridevoidOnInitialized()
{
this.Data = EnergyProductionData.Generate();
}
}razor
functiononSeriesMouseEnter(o, e) {
if (e.series.tooltipTemplate === null ||
e.series.tooltipTemplate === undefined) {
e.series.tooltipTemplate = createDataChartTooltip;
console.log("onSeriesMouseEnter");
}
}
igRegisterScript("onSeriesMouseEnter", onSeriesMouseEnter, false);
functioncreateDataChartTooltip(context) {
if (!context) returnnull;
var dataItem = context.item;
if (!dataItem) returnnull;
var dataSeries = context.series;
if (!dataSeries) returnnull;
var tooltip = document.createElement("div");
tooltip.className = "ui-tooltip-content";
var title = document.createElement("div");
title.innerHTML = dataItem.Country + " Production";
title.className = "tooltipTitle";
tooltip.appendChild(title);
var line1 = createDataChartTooltipLine(dataSeries, "Coal", dataItem.Coal);
var line2 = createDataChartTooltipLine(dataSeries, "Hydro", dataItem.Hydro);
var line3 = createDataChartTooltipLine(dataSeries, "Nuclear", dataItem.Nuclear);
var line4 = createDataChartTooltipLine(dataSeries, "Gas", dataItem.Gas);
var line5 = createDataChartTooltipLine(dataSeries, "Oil", dataItem.Oil);
tooltip.appendChild(line1);
tooltip.appendChild(line2);
tooltip.appendChild(line3);
tooltip.appendChild(line4);
tooltip.appendChild(line5);
return tooltip;
}
functioncreateDataChartTooltipLine(dataSeries, dataName, dataValue) {
var label = document.createElement("label");
label.innerHTML = dataName + ":";
label.className = "tooltipLbl";
label.style.width = "4rem";
var value = document.createElement("label");
value.innerHTML = dataValue;
value.className = "tooltipVal";
var line = document.createElement("div");
line.className = "tooltipHorizontal";
// applying conditional styling based on mapping of the current seriesvar isMatching = dataSeries.valueMemberPath == dataName;
if (isMatching)
line.style.color = dataSeries.actualBrush;
else
line.style.color = "black";
line.appendChild(label);
line.appendChild(value);
return line;
}
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas: