Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。
Ejemplo de resaltado de gráfico Blazor
El siguiente ejemplo demuestra las diferentes opciones de resaltado que están disponibles en el gráfico Blazor.
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 modules
namespace Infragistics.Samples
{
public class Program
{
public static async 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(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class TemperatureAnnotatedDataItem
{
public double Index { get; set; }
public string TempInfo { get; set; }
public double Temperature { get; set; }
public string Month { get; set; }
}
public class TemperatureAnnotatedData
: List<TemperatureAnnotatedDataItem>
{
public TemperatureAnnotatedData()
{
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 0,
TempInfo = @"27°C",
Temperature = 27,
Month = @"Jan"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 1,
TempInfo = @"25°C",
Temperature = 25,
Month = @"Feb"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 2,
TempInfo = @"21°C",
Temperature = 21,
Month = @"Mar"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 3,
TempInfo = @"19°C",
Temperature = 19,
Month = @"Apr"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 4,
TempInfo = @"16°C",
Temperature = 16,
Month = @"May"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 5,
TempInfo = @"13°C",
Temperature = 13,
Month = @"Jun"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 6,
TempInfo = @"14°C",
Temperature = 14,
Month = @"Jul"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 7,
TempInfo = @"15°C",
Temperature = 15,
Month = @"Aug"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 8,
TempInfo = @"19°C",
Temperature = 19,
Month = @"Sep"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 9,
TempInfo = @"22°C",
Temperature = 22,
Month = @"Oct"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 10,
TempInfo = @"26°C",
Temperature = 26,
Month = @"Nov"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 11,
TempInfo = @"30°C",
Temperature = 30,
Month = @"Dec"
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="HighlightingMode"
Name="HighlightingModeEditor"
@ref="highlightingModeEditor"
Label="Highlighting Mode: "
PrimitiveValue="@("FadeOthersSpecific")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="HighlightingBehavior"
Name="HighlightingBehaviorEditor"
@ref="highlightingBehaviorEditor"
Label="Highlighting Behavior: "
PrimitiveValue="@("NearestItemsAndSeries")">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="legend-title">
Average Temperature in Sydney
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Column"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
DataSource="TemperatureAnnotatedData"
HighlightingMode="SeriesHighlightingMode.FadeOthersSpecific"
HighlightingBehavior="SeriesHighlightingBehavior.NearestItemsAndSeries"
YAxisMaximumValue="35"
YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
ToolTipType="ToolTipType.None"
IsTransitionInEnabled="false">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var highlightingModeEditor = this.highlightingModeEditor;
var highlightingBehaviorEditor = this.highlightingBehaviorEditor;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription highlightingModeEditor;
private IgbPropertyEditorPropertyDescription highlightingBehaviorEditor;
private IgbCategoryChart chart;
private TemperatureAnnotatedData _temperatureAnnotatedData = null;
public TemperatureAnnotatedData TemperatureAnnotatedData
{
get
{
if (_temperatureAnnotatedData == null)
{
_temperatureAnnotatedData = new TemperatureAnnotatedData();
}
return _temperatureAnnotatedData;
}
}
}
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.
Modos y comportamientos de resaltado de gráficos Blazor
Todos los gráficos Blazor admiten una variedad de opciones de resaltado. HighlightingMode
se puede configurar para que brille o se atenúe cuando el mouse se desplaza sobre una serie o un elemento de datos representado en el área del gráfico. HighlightingBehavior
se puede configurar para que se muestre directamente sobre el elemento de datos más cercano para activar el efecto de resaltado. Los controles IgbCategoryChart
, IgbFinancialChart
e IgbDataChart
admiten modos y comportamientos de resaltado y tienen la misma API para usar la función de resaltado.
El siguiente ejemplo demuestra el gráfico HighlightingMode
Blazor.
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 modules
namespace Infragistics.Samples
{
public class Program
{
public static async 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(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class TemperatureAnnotatedDataItem
{
public double Index { get; set; }
public string TempInfo { get; set; }
public double Temperature { get; set; }
public string Month { get; set; }
}
public class TemperatureAnnotatedData
: List<TemperatureAnnotatedDataItem>
{
public TemperatureAnnotatedData()
{
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 0,
TempInfo = @"27°C",
Temperature = 27,
Month = @"Jan"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 1,
TempInfo = @"25°C",
Temperature = 25,
Month = @"Feb"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 2,
TempInfo = @"21°C",
Temperature = 21,
Month = @"Mar"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 3,
TempInfo = @"19°C",
Temperature = 19,
Month = @"Apr"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 4,
TempInfo = @"16°C",
Temperature = 16,
Month = @"May"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 5,
TempInfo = @"13°C",
Temperature = 13,
Month = @"Jun"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 6,
TempInfo = @"14°C",
Temperature = 14,
Month = @"Jul"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 7,
TempInfo = @"15°C",
Temperature = 15,
Month = @"Aug"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 8,
TempInfo = @"19°C",
Temperature = 19,
Month = @"Sep"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 9,
TempInfo = @"22°C",
Temperature = 22,
Month = @"Oct"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 10,
TempInfo = @"26°C",
Temperature = 26,
Month = @"Nov"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 11,
TempInfo = @"30°C",
Temperature = 30,
Month = @"Dec"
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="HighlightingMode"
Name="HighlightingModeEditor"
@ref="highlightingModeEditor"
Label="Highlighting Mode: "
PrimitiveValue="@("BrightenSpecific")">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Column"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
DataSource="TemperatureAnnotatedData"
HighlightingMode="SeriesHighlightingMode.BrightenSpecific"
ToolTipType="ToolTipType.None"
CrosshairsDisplayMode="CrosshairsDisplayMode.None"
IsTransitionInEnabled="false">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var highlightingModeEditor = this.highlightingModeEditor;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription highlightingModeEditor;
private IgbCategoryChart chart;
private TemperatureAnnotatedData _temperatureAnnotatedData = null;
public TemperatureAnnotatedData TemperatureAnnotatedData
{
get
{
if (_temperatureAnnotatedData == null)
{
_temperatureAnnotatedData = new TemperatureAnnotatedData();
}
return _temperatureAnnotatedData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
El siguiente ejemplo demuestra el gráfico Blazor HighlightingBehavior
.
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 modules
namespace Infragistics.Samples
{
public class Program
{
public static async 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(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class TemperatureAnnotatedDataItem
{
public double Index { get; set; }
public string TempInfo { get; set; }
public double Temperature { get; set; }
public string Month { get; set; }
}
public class TemperatureAnnotatedData
: List<TemperatureAnnotatedDataItem>
{
public TemperatureAnnotatedData()
{
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 0,
TempInfo = @"27°C",
Temperature = 27,
Month = @"Jan"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 1,
TempInfo = @"25°C",
Temperature = 25,
Month = @"Feb"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 2,
TempInfo = @"21°C",
Temperature = 21,
Month = @"Mar"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 3,
TempInfo = @"19°C",
Temperature = 19,
Month = @"Apr"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 4,
TempInfo = @"16°C",
Temperature = 16,
Month = @"May"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 5,
TempInfo = @"13°C",
Temperature = 13,
Month = @"Jun"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 6,
TempInfo = @"14°C",
Temperature = 14,
Month = @"Jul"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 7,
TempInfo = @"15°C",
Temperature = 15,
Month = @"Aug"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 8,
TempInfo = @"19°C",
Temperature = 19,
Month = @"Sep"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 9,
TempInfo = @"22°C",
Temperature = 22,
Month = @"Oct"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 10,
TempInfo = @"26°C",
Temperature = 26,
Month = @"Nov"
});
this.Add(new TemperatureAnnotatedDataItem()
{
Index = 11,
TempInfo = @"30°C",
Temperature = 30,
Month = @"Dec"
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="HighlightingBehavior"
Name="HighlightingBehaviorEditor"
@ref="highlightingBehaviorEditor"
Label="Highlighting Behavior: "
PrimitiveValue="@("DirectlyOver")">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Column"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
DataSource="TemperatureAnnotatedData"
HighlightingMode="SeriesHighlightingMode.Brighten"
HighlightingBehavior="SeriesHighlightingBehavior.DirectlyOver"
ToolTipType="ToolTipType.None"
CrosshairsDisplayMode="CrosshairsDisplayMode.None"
IsTransitionInEnabled="false">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var highlightingBehaviorEditor = this.highlightingBehaviorEditor;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription highlightingBehaviorEditor;
private IgbCategoryChart chart;
private TemperatureAnnotatedData _temperatureAnnotatedData = null;
public TemperatureAnnotatedData TemperatureAnnotatedData
{
get
{
if (_temperatureAnnotatedData == null)
{
_temperatureAnnotatedData = new TemperatureAnnotatedData();
}
return _temperatureAnnotatedData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Resaltado de leyendas en gráficos Blazor
Todos los gráficos Blazor admiten el resaltado de leyendas. Se puede habilitar LegendHighlightingMode
para que, cuando el mouse se desplace sobre un elemento de marcador de leyenda, la serie representada se resalte en el área del gráfico. El resaltado de leyendas es compatible con los controles IgbCategoryChart
, IgbFinancialChart
e IgbDataChart
y tienen la misma API para usar la función de resaltado.
El siguiente ejemplo demuestra la serie de leyendas resaltando el gráfico Blazor.
using System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
public string Franchise { get; set; }
public double TotalRevenue { get; set; }
public double HighestGrossing { get; set; }
}
public class HighestGrossingMovies
: List<HighestGrossingMoviesItem>
{
public HighestGrossingMovies()
{
this.Add(new HighestGrossingMoviesItem()
{
Franchise = @"Marvel Universe",
TotalRevenue = 22.55,
HighestGrossing = 2.8
});
this.Add(new HighestGrossingMoviesItem()
{
Franchise = @"Star Wars",
TotalRevenue = 10.32,
HighestGrossing = 2.07
});
this.Add(new HighestGrossingMoviesItem()
{
Franchise = @"Harry Potter",
TotalRevenue = 9.19,
HighestGrossing = 1.34
});
this.Add(new HighestGrossingMoviesItem()
{
Franchise = @"Avengers",
TotalRevenue = 7.76,
HighestGrossing = 2.8
});
this.Add(new HighestGrossingMoviesItem()
{
Franchise = @"Spider Man",
TotalRevenue = 7.22,
HighestGrossing = 1.28
});
this.Add(new HighestGrossingMoviesItem()
{
Franchise = @"James Bond",
TotalRevenue = 7.12,
HighestGrossing = 1.11
});
}
}
csusing 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 modules
namespace Infragistics.Samples
{
public class Program
{
public static async 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
<div class="container vertical">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="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"
HighlightingMode="SeriesHighlightingMode.Brighten"
LegendHighlightingMode="LegendHighlightingMode.MatchSeries"
IsTransitionInEnabled="false">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
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
Resaltar capas
La Ignite UI for Blazor IgbCategoryChart
puede habilitar tres tipos de resaltado al pasar el cursor sobre los elementos de datos.
El resaltado de series resaltará el único punto de datos representado por un marcador o columna cuando el puntero se coloque sobre él. Esto se habilita estableciendo la propiedad
IsSeriesHighlightingEnabled
en verdadero.El resaltado de elementos resalta los elementos de una serie, ya sea dibujando una forma de banda en su posición o representando un marcador en su posición. Esto se habilita estableciendo la propiedad
IsItemHighlightingEnabled
en verdadero.El resaltado de categorías apunta a todos los ejes de categorías del gráfico. Dibujan una forma que ilumina el área del eje más cercana a la posición del puntero. Esto se habilita estableciendo la propiedad
IsCategoryHighlightingEnabled
en verdadero.
El siguiente ejemplo demuestra las diferentes capas de resaltado que están disponibles en el gráfico Blazor.
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 modules
namespace Infragistics.Samples
{
public class Program
{
public static async 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(IgbPropertyEditorPanelModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical sample">
<div class="options horizontal">
<label class="options-label" style="margin-left: 0.25rem;">Highlight Target:</label>
<select @onchange="OnHighlightingTargetChanged" style="width: 7rem; margin-right: 1rem;">
<option>Series</option>
<option>Item</option>
<option>Category</option>
<option>None</option>
</select>
<label class="options-label">Mode:</label>
<select @bind="@HighlightingMode" style="width: 7rem; margin-right: 1rem;">
<option>@SeriesHighlightingMode.Auto</option>
<option>@SeriesHighlightingMode.Brighten</option>
<option>@SeriesHighlightingMode.BrightenSpecific</option>
<option>@SeriesHighlightingMode.FadeOthers</option>
<option>@SeriesHighlightingMode.FadeOthersSpecific</option>
<option>@SeriesHighlightingMode.None</option>
</select>
<label class="options-label">Behavior:</label>
<select @bind="@HighlightingBehavior" style="width: 7rem; margin-right: 1rem;" >
<option>@SeriesHighlightingBehavior.Auto</option>
<option>@SeriesHighlightingBehavior.DirectlyOver</option>
<option>@SeriesHighlightingBehavior.NearestItems</option>
<option>@SeriesHighlightingBehavior.NearestItemsAndSeries</option>
<option>@SeriesHighlightingBehavior.NearestItemsRetainMainShapes</option>
</select>
<label class="options-label">Legend:</label>
<select @bind="@HighlightingLegend" style="width: 7rem; margin-right: 1rem;"
title="Chart will highlight series when you hover over legend items">
<option>@LegendHighlightingMode.Auto</option>
<option>@LegendHighlightingMode.MatchSeries</option>
<option>@LegendHighlightingMode.None</option>
</select>
</div>
<div class="options vertical">
<label class="legend-title">Average Temperatures in the U.S. Cities</label>
<div class="legend">
<IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
</div>
</div>
<div class="container vertical">
<IgbCategoryChart Height="100%" Width="100%"
Legend="@Legend"
DataSource="Data"
ChartType="CategoryChartType.Column"
IsCategoryHighlightingEnabled="@IsCategoryHighlighting"
IsItemHighlightingEnabled="@IsItemHighlighting"
IsSeriesHighlightingEnabled="@IsSeriesHighlighting"
HighlightingMode="@HighlightingMode"
HighlightingBehavior="@HighlightingBehavior"
LegendHighlightingMode="@HighlightingLegend"
YAxisTitle="Temperatures in Celsius"
YAxisMinimumValue="0"
XAxisInterval="1">
</IgbCategoryChart>
</div>
</div>
@code {
private IgbLegend _Legend;
private IgbLegend Legend
{
get { return _Legend; }
set { _Legend = value; StateHasChanged(); }
}
private bool IsSeriesHighlighting = true;
private bool IsItemHighlighting = false;
private bool IsCategoryHighlighting = false;
private LegendHighlightingMode HighlightingLegend = LegendHighlightingMode.Auto;
private SeriesHighlightingMode HighlightingMode = SeriesHighlightingMode.Auto;
private SeriesHighlightingBehavior HighlightingBehavior = SeriesHighlightingBehavior.Auto;
private List<AverageTemperature> Data = new AverageTemperatureData();
private void OnHighlightingTargetChanged(ChangeEventArgs args)
{
var highlighingTarget = (string)args.Value;
if (highlighingTarget == "Series")
{
this.IsItemHighlighting = false;
this.IsSeriesHighlighting = true;
this.IsCategoryHighlighting = false;
}
else if(highlighingTarget == "Item")
{
this.IsItemHighlighting = true;
this.IsSeriesHighlighting = false;
this.IsCategoryHighlighting = false;
}
else if (highlighingTarget == "Category")
{
this.IsItemHighlighting = false;
this.IsSeriesHighlighting = false;
this.IsCategoryHighlighting = true;
}
else
{
this.IsItemHighlighting = false;
this.IsSeriesHighlighting = false;
this.IsCategoryHighlighting = false;
}
}
public class AverageTemperature
{
public string Month { get; set; }
public double NewYork { get; set; }
public double LosAngeles { get; set; }
}
public class AverageTemperatureData : List<AverageTemperature>
{
public AverageTemperatureData()
{
this.Add(new AverageTemperature { NewYork = 10.6, LosAngeles = 28.3, Month = "JAN" });
this.Add(new AverageTemperature { NewYork = 7.8, LosAngeles = 31.1, Month = "FEB" });
this.Add(new AverageTemperature { NewYork = 12.2, LosAngeles = 27.8, Month = "MAR" });
this.Add(new AverageTemperature { NewYork = 11.7, LosAngeles = 33.9, Month = "APR" });
this.Add(new AverageTemperature { NewYork = 19.4, LosAngeles = 35.0, Month = "MAY" });
this.Add(new AverageTemperature { NewYork = 23.3, LosAngeles = 36.7, Month = "JUN" });
this.Add(new AverageTemperature { NewYork = 27.2, LosAngeles = 33.3, Month = "JUL" });
this.Add(new AverageTemperature { NewYork = 25.6, LosAngeles = 36.7, Month = "AUG" });
this.Add(new AverageTemperature { NewYork = 22.8, LosAngeles = 43.9, Month = "SEP" });
this.Add(new AverageTemperature { NewYork = 17.8, LosAngeles = 38.3, Month = "OCT" });
this.Add(new AverageTemperature { NewYork = 17.8, LosAngeles = 32.8, Month = "NOV" });
this.Add(new AverageTemperature { NewYork = 8.3, LosAngeles = 28.9, Month = "DEC" });
}
}
}
razor/*
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:
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: