Blazor Chart Features
Los gráficos de Ignite UI for Blazor le permiten mostrar muchas características diferentes para representar la historia completa de los datos que se contarán con su gráfico. Cada una de estas características es totalmente personalizable y se puede diseñar para adaptarse a sus necesidades de diseño, lo que le permite un control total. Las interacciones, como el resaltado y las anotaciones, le permiten destacar detalles de datos importantes, lo que permite un análisis de datos más profundo dentro de su gráfico.
Los gráficos de Blazor ofrecen las siguientes características de gráfico:
Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。
Axis
Modifique o personalice todos los aspectos del eje X y del eje Y utilizando las diferentes propiedades del eje. Puede mostrar líneas de cuadrícula, personalizar el estilo de las marcas de graduación, cambiar los títulos de los ejes e incluso modificar las ubicaciones de los ejes y los valores de cruce. Puede obtener más información sobre las personalizaciones del tema Líneas de cuadrícula de ejes, Diseños de ejes y Opciones de eje del gráfico de 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(IgbDataChartCoreModule),
typeof(IgbDataChartScatterModule),
typeof(IgbDataChartScatterCoreModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<label>X-Axis Crossing Value: </label>
<label class="options-value" >@XAxisCrossingValue</label>
<input type="range" min="-360" max="360" step="10" value="0" @oninput="OnXAxisCrossingValueChanged" />
<label>Y-Axis Crossing Value: </label>
<label class="options-value" >@YAxisCrossingValue</label>
<input type="range" min="-1.25" max="1.25" step="0.125" value="0" @oninput="OnYAxisCrossingValueChanged" />
</div>
<div class="container vertical">
@if (SinData != null && CosData != null)
{
<IgbDataChart Height="100%" Width="100%" IsVerticalZoomEnabled="true" IsHorizontalZoomEnabled="true"
PlotAreaMarginTop="60" PlotAreaMarginBottom="60"
PlotAreaMarginLeft="30" PlotAreaMarginRight="30">
<IgbNumericXAxis Name="xAxis" Interval="40" MinimumValue="-360" MaximumValue="360"
LabelLocation="AxisLabelsLocation.InsideBottom"
LabelTopMargin="10"
CrossingAxisName="yAxis"
CrossingValue="@YAxisCrossingValue"
StrokeThickness="1" Stroke="black"/>
<IgbNumericYAxis Name="yAxis" MinimumValue="-1.25" MaximumValue="1.25" Interval="0.25"
LabelLocation="AxisLabelsLocation.InsideLeft"
LabelRightMargin="10"
CrossingAxisName="xAxis"
CrossingValue="@XAxisCrossingValue"
StrokeThickness="1" Stroke="black"/>
<IgbScatterSplineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="SinData"
XMemberPath="X" YMemberPath="Y" MarkerType="MarkerType.Circle" />
<IgbScatterSplineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="CosData"
XMemberPath="X" YMemberPath="Y" MarkerType="MarkerType.Circle" />
</IgbDataChart>
}
</div>
</div>
@code {
private List<Point> SinData;
private List<Point> CosData;
private double YAxisCrossingValue = 0;
private double XAxisCrossingValue = 0;
protected override void OnInitialized()
{
List<Point> _sinData = new List<Point>();
List<Point> _cosData = new List<Point>();
for (int i = - 360; i <= 360; i += 10)
{
double radians = (i * Math.PI) / 180;
double sin = Math.Sin(radians);
double cos = Math.Cos(radians);
_sinData.Add(new Point() { X = i, Y = sin });
_cosData.Add(new Point() { X = i, Y = cos });
}
this.SinData = _sinData;
this.CosData = _cosData;
}
private void OnXAxisCrossingValueChanged(ChangeEventArgs args)
{
this.XAxisCrossingValue = double.Parse(args.Value.ToString());
}
private void OnYAxisCrossingValueChanged(ChangeEventArgs args)
{
this.YAxisCrossingValue = double.Parse(args.Value.ToString());
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Annotations
Estas capas adicionales están en la parte superior del gráfico y dependen del tacto o del mouse. Usados individualmente o combinados, proporcionan interacciones poderosas que ayudan a resaltar ciertos valores dentro del gráfico. Puede obtener más información sobre esta función en el tema Anotaciones de gráficos.
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();
}
}
}csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Infragistics.Samples
{
public class EnergyRenewableInfo
{
public string Year { get; set; }
public int Europe { get; set; }
public int China { get; set; }
public int USA { get; set; }
}
public class EnergyRenewableData : List<EnergyRenewableInfo>
{
public EnergyRenewableData()
{
Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<label class="options-label">Annotations: </label>
<label class="options-item">
<input type="checkbox" @onchange="OnCrosshairsVisibleCheckboxChange" checked="@CrosshairsVisible" /> Crosshair
</label>
<label class="options-item">
<input type="checkbox" @onchange="OnCalloutsVisibleCheckboxChange" checked="@CalloutsVisible" /> Callouts
</label>
<label class="options-item">
<input type="checkbox" @onchange="OnFinalValuesCheckboxChange" checked="@FinalValuesVisible" /> Final Values
</label>
<label class="options-item">
<input type="checkbox" @onchange="OnMarkersVisibleCheckBoxChange" checked="@MarkersVisible" /> Markers
</label>
</div>
<div class="container vertical">
@if (Data != null)
{
<IgbCategoryChart Height="100%" Width="100%"
@ref="Chart"
DataSource="Data"
ChartType="CategoryChartType.Line"
Subtitle="Renewable Electricity Generated"
YAxisTitle="TWh"
Thickness="2"
CrosshairsSnapToData="true"
CrosshairsDisplayMode="@CrosshairMode"
CrosshairsAnnotationEnabled="@CrosshairsVisible"
FinalValueAnnotationsVisible="@FinalValuesVisible"
YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
CalloutsVisible="@CalloutsVisible"
CalloutsYMemberPath="Value"
CalloutsXMemberPath="Index"
CalloutsLabelMemberPath="Label"
CalloutsDataSource="CalloutData"
ExcludedProperties="@(new string[] { "China", "Europe" })"
ComputedPlotAreaMarginMode=ComputedPlotAreaMarginMode.Series>
</IgbCategoryChart>
}
</div>
</div>
@code {
private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
private List<CalloutInfo> CalloutData = new List<CalloutInfo>();
private IgbCategoryChart _Chart;
private IgbCategoryChart Chart
{
get { return _Chart; }
set { _Chart = value;
Chart.MarkerTypes.Add(MarkerType.Circle);
StateHasChanged(); }
}
private bool MarkersVisible = true;
private bool FinalValuesVisible = true;
private bool CalloutsVisible = true;
private bool CrosshairsVisible = true;
private CrosshairsDisplayMode CrosshairMode = CrosshairsDisplayMode.Both;
private void OnMarkersVisibleCheckBoxChange(ChangeEventArgs args)
{
Chart.MarkerTypes.Clear();
bool value = args.Value != null ? (bool)args.Value : false;
if (value == true)
{
Chart.MarkerTypes.Add(MarkerType.Automatic);
}
else {
Chart.MarkerTypes.Add(MarkerType.None);
}
this.MarkersVisible = value;
}
private void OnFinalValuesCheckboxChange(ChangeEventArgs args)
{
this.FinalValuesVisible = (bool)args.Value;
}
private void OnCalloutsVisibleCheckboxChange(ChangeEventArgs args)
{
this.CalloutsVisible = (bool)args.Value;
}
private void OnCrosshairsVisibleCheckboxChange(ChangeEventArgs args)
{
bool isVisible = (bool)args.Value;
this.CrosshairMode = isVisible ? CrosshairsDisplayMode.Both : CrosshairsDisplayMode.None;
}
protected override void OnInitialized()
{
for (int i = 0; i < this.Data.Count; i++)
{
CalloutData.Add(
new CalloutInfo {
Index = i, Label =
this.Data[i].USA + " " + "TWh",
Value = this.Data[i].USA });
}
}
public class CalloutInfo
{
public int Index { get; set; }
public int Value { get; set; }
public string Label { get; set; }
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Animations
Anime su gráfico mientras carga una nueva fuente de datos habilitando animaciones. Estos se pueden personalizar configurando diferentes tipos de animaciones y la velocidad a la que se realizan esas animaciones. Puede obtener más información sobre esta función en el tema Animaciones de gráficos.
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();
}
}
}csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Infragistics.Samples
{
public class EnergyRenewableInfo
{
public string Year { get; set; }
public int Europe { get; set; }
public int China { get; set; }
public int USA { get; set; }
}
public class EnergyRenewableData : List<EnergyRenewableInfo>
{
public EnergyRenewableData()
{
Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<span class="options-label">Transition Type </span>
<select @bind="@SelectedTransition">
<option>@CategoryTransitionInMode.AccordionFromBottom</option>
<option>@CategoryTransitionInMode.AccordionFromCategoryAxisMaximum</option>
<option>@CategoryTransitionInMode.AccordionFromCategoryAxisMinimum</option>
<option>@CategoryTransitionInMode.AccordionFromLeft</option>
<option>@CategoryTransitionInMode.AccordionFromRight</option>
<option>@CategoryTransitionInMode.AccordionFromTop</option>
<option>@CategoryTransitionInMode.AccordionFromValueAxisMaximum</option>
<option>@CategoryTransitionInMode.AccordionFromValueAxisMinimum</option>
<option>@CategoryTransitionInMode.Expand</option>
<option>@CategoryTransitionInMode.FromZero</option>
<option>@CategoryTransitionInMode.SweepFromBottom</option>
<option>@CategoryTransitionInMode.SweepFromCategoryAxisMaximum</option>
<option>@CategoryTransitionInMode.SweepFromCategoryAxisMinimum</option>
<option>@CategoryTransitionInMode.SweepFromCenter</option>
<option>@CategoryTransitionInMode.SweepFromLeft</option>
<option>@CategoryTransitionInMode.SweepFromRight</option>
<option>@CategoryTransitionInMode.SweepFromTop</option>
<option>@CategoryTransitionInMode.SweepFromValueAxisMaximum</option>
<option>@CategoryTransitionInMode.SweepFromValueAxisMinimum</option>
<option>@CategoryTransitionInMode.Auto</option>
</select>
<label class="options-value" style="width: 75px">@IntervalLabel</label>
<input class="options-slider" type="range" min="50" max="2000" step="50"
value=@TransitionInInterval @onchange="OnTransitionIntervalChange" />
<button @onclick="OnReloadChart">Reload Chart</button>
</div>
<div class="container vertical">
@if (Data != null)
{
<IgbCategoryChart Height="100%" Width="100%"
@ref="Chart"
DataSource="Data"
ChartType="CategoryChartType.Line"
IsTransitionInEnabled="true"
TransitionInMode="@SelectedTransition"
TransitionInDuration="@TransitionInInterval"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
YAxisTitle="TWh"
YAxisTitleLeftMargin="10"
YAxisTitleRightMargin="5"
YAxisLabelLeftMargin="0"
ComputedPlotAreaMarginMode=ComputedPlotAreaMarginMode.Series>
</IgbCategoryChart>
}
</div>
</div>
@code {
private int _transitionInterval = 1000; // milliseconds
private int TransitionInInterval
{
get { return _transitionInterval; }
set
{
_transitionInterval = value;
StateHasChanged();
}
}
private string IntervalLabel
{
get
{
return (_transitionInterval).ToString("0") + "ms";
}
}
private CategoryTransitionInMode _selectedTransition;
private CategoryTransitionInMode SelectedTransition
{
get { return _selectedTransition; }
set
{
_selectedTransition = value;
StateHasChanged();
}
}
private IgbCategoryChart _Chart;
private IgbCategoryChart Chart
{
get { return _Chart; }
set { _Chart = value;
StateHasChanged();
}
}
private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
private void OnTransitionIntervalChange(ChangeEventArgs args)
{
this.TransitionInInterval = int.Parse(args.Value.ToString());
}
private void OnReloadChart()
{
this.Chart.ReplayTransitionIn();
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Highlighting
Enfoque elementos visuales como líneas, columnas o marcadores resaltándolos mientras pasa el mouse sobre los elementos de datos. Esta función está habilitada en todos los tipos de gráficos. Puede obtener más información sobre esta función en el tema Resaltado de gráficos.
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
Markers
Identifique puntos de datos rápidamente, incluso si el valor se encuentra entre las principales líneas de la cuadrícula con el uso de marcadores en la serie de gráficos. Estos son totalmente personalizables en estilo, color y forma. Puede obtener más información sobre esta función en el tema Marcadores de gráficos.
using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
public string Year { get; set; }
public double Europe { get; set; }
public double China { get; set; }
public double America { get; set; }
}
public class CountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
public CountryRenewableElectricity()
{
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2009",
Europe = 34,
China = 21,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2010",
Europe = 43,
China = 26,
America = 24
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2011",
Europe = 66,
China = 29,
America = 28
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2012",
Europe = 69,
China = 32,
America = 26
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2013",
Europe = 58,
China = 47,
America = 38
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2014",
Europe = 40,
China = 46,
America = 31
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2015",
Europe = 78,
China = 50,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2016",
Europe = 13,
China = 90,
America = 52
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2017",
Europe = 78,
China = 132,
America = 50
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2019",
Europe = 80,
China = 96,
America = 38
});
}
}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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbCategoryChartModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System
@using System.Linq
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="ChartType"
Name="ChartTypeEditor"
@ref="chartTypeEditor"
Label="Chart Type"
PrimitiveValue="@("Line")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="MarkerTypeHandler"
Name="MarkerTypeEditor"
@ref="markerTypeEditor"
Label="Marker Type"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownValues="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })"
DropDownNames="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })"
PrimitiveValue="@("Circle")"
Changed="EditorChangeUpdateMarkerType">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
IsSeriesHighlightingEnabled="true"
ChartType="CategoryChartType.Line"
DataSource="CountryRenewableElectricity"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var chartTypeEditor = this.chartTypeEditor;
var markerTypeEditor = this.markerTypeEditor;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription chartTypeEditor;
private IgbPropertyEditorPropertyDescription markerTypeEditor;
private IgbCategoryChart chart;
public void EditorChangeUpdateMarkerType(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
{
//var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First();
//var value = (string)item.PrimitiveValue;
var chart = this.chart;
var markerVal = (MarkerType)Enum.Parse(typeof(MarkerType), args.NewValue.ToString());
chart.MarkerTypes.Clear();
chart.MarkerTypes.Add(markerVal);
}
private CountryRenewableElectricity _countryRenewableElectricity = null;
public CountryRenewableElectricity CountryRenewableElectricity
{
get
{
if (_countryRenewableElectricity == null)
{
_countryRenewableElectricity = new CountryRenewableElectricity();
}
return _countryRenewableElectricity;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Navigation
Puede navegar por el gráfico haciendo zoom y desplazándose con el mouse, el teclado y las interacciones táctiles. Puede obtener más información sobre esta función en el tema Navegación de gráficos.
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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartFinancialModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
namespace Infragistics.Samples
{
public class SampleFinancialData
{
public static Random random = new Random();
public static List<SampleFinancialItem> Create(int itemsCount = 365)
{
var data = new List<SampleFinancialItem>();
// initial values
var v = 10000.0;
var o = 500.0;
var h = Math.Round(o + (random.NextDouble() * 5));
var l = Math.Round(o - (random.NextDouble() * 5));
var c = Math.Round(l + (random.NextDouble() * (h - l)));
var today = DateTime.Now;
var end = new DateTime(today.Year, 12, 31);
var time = end.AddDays(-itemsCount);
for (var i = 0; i < itemsCount; i++)
{
var date = time.ToShortDateString();
var label = GetShortDate(time, false);
// adding new data item
var item = new SampleFinancialItem();
item.Time = time;
item.Date = date;
item.Label = label;
item.Close = c;
item.Open = o;
item.High = h;
item.Low = l;
item.Volume = v;
data.Add(item);
// generating new values
var mod = random.NextDouble() - 0.49;
o = Math.Round(o + (mod * 5 * 4));
v = Math.Round(v + (mod * 5 * 100));
h = Math.Round(o + (random.NextDouble() * 15));
l = Math.Round(o - (random.NextDouble() * 15));
c = Math.Round(l + (random.NextDouble() * (h - l)));
time = time.AddDays(1);
}
return data;
}
public static string GetShortDate(DateTime dt, bool showYear)
{
var months = new List<string> {
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
};
var ind = dt.Month - 1;
var day = dt.Day;
var label = months[ind] + " " + day;
if (showYear)
{
label += " " + dt.Year;
}
return label;
}
}
public class SampleFinancialItem
{
public double High { get; set; }
public double Low { get; set; }
public double Open { get; set; }
public double Close { get; set; }
public double Volume { get; set; }
public string Label { get; set; }
public string Date { get; set; }
public DateTime Time { get; set; }
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<div class="options vertical" style="width: 100px">
<button @onclick="OnPanUp">Pan Up</button>
<button @onclick="OnPanDown">Pan Down</button>
</div>
<div class="options vertical" style="width: 100px">
<button @onclick="OnPanLeft">Pan Left</button>
<button @onclick="OnPanRight">Pan Right</button>
</div>
<div class="options vertical" style="width: 100px">
<button @onclick="OnZoomIn">Zoom In</button>
<button @onclick="OnZoomOut">Zoom Out</button>
</div>
<div class="options vertical" style="width: 120px; align-self: center">
<label class="options-label" style="margin: 5px">Pan Modifier:</label>
<label class="options-label" style="margin: 5px">Zoom Modifier:</label>
</div>
<div class="options vertical" style="width: 100px">
<select @bind="@PanModifier" style="margin: 5px">
<option>@ModifierKeys.Alt</option>
<option>@ModifierKeys.Control</option>
<option>@ModifierKeys.Shift</option>
<option>@ModifierKeys.Windows</option>
<option>@ModifierKeys.Apple</option>
<option>@ModifierKeys.None</option>
</select>
<select @bind="@DragModifier" style="margin: 5px">
<option>@ModifierKeys.Alt</option>
<option>@ModifierKeys.Control</option>
<option>@ModifierKeys.Shift</option>
<option>@ModifierKeys.Windows</option>
<option>@ModifierKeys.Apple</option>
<option>@ModifierKeys.None</option>
</select>
</div>
<div class="options vertical" style="width: 150px; align-self: center">
<label class="options-label" style="margin: 5px;">Interaction:</label>
<label class="options-label" style="margin: 5px;">Zooming:</label>
</div>
<div class="options vertical" style="width: 100px">
<select @bind="@DefaultInteraction" style="margin: 5px">
<option>@InteractionState.DragZoom</option>
<option>@InteractionState.DragPan</option>
<option>@InteractionState.None</option>
</select>
<input class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
</div>
</div>
<div class="container vertical">
<IgbDataChart @ref="Chart" Height="100%" Width="100%"
Subtitle="Stock Prices Series in Candlestick Display Type"
SubtitleTopMargin="10"
IsHorizontalZoomEnabled="@IsZoomingEnabled"
IsVerticalZoomEnabled="@IsZoomingEnabled"
PanModifier="@PanModifier"
DragModifier="@DragModifier"
DefaultInteraction="@DefaultInteraction">
<IgbCategoryXAxis Name="xAxis" Label="Label" DataSource="Data" />
<IgbNumericYAxis Name="yAxis" Title="Amount (in USD)" TitleRightMargin="10"
LabelRightMargin="10"
LabelHorizontalAlignment="HorizontalAlignment.Left"
LabelLocation="AxisLabelsLocation.OutsideRight" />
<IgbFinancialPriceSeries XAxisName="xAxis"
YAxisName="yAxis"
DataSource="Data"
DisplayType="PriceDisplayType.Candlestick"
OpenMemberPath="Open"
CloseMemberPath="Close"
HighMemberPath="High"
LowMemberPath="Low"
VolumeMemberPath="Volume"
ShowDefaultTooltip="true"
IsTransitionInEnabled="true"
Title="Price" />
</IgbDataChart>
</div>
</div>
@code {
private List<SampleFinancialItem> Data;
private bool IsZoomingEnabled = true;
private ModifierKeys PanModifier = ModifierKeys.Alt;
private ModifierKeys DragModifier = ModifierKeys.Shift;
private InteractionState DefaultInteraction = InteractionState.DragPan;
private IgbDataChart _chart;
public IgbDataChart Chart
{
get { return _chart; }
set {
_chart = value;
this.Chart.ActualWindowScaleHorizontal = 0.60;
this.Chart.ActualWindowScaleVertical = 0.60;
this.Chart.ActualWindowPositionVertical = 0.20;
this.Chart.ActualWindowPositionHorizontal = 0.20;
StateHasChanged();
}
}
protected override void OnInitialized()
{
Data = SampleFinancialData.Create();
}
private void OnPanUp()
{
this.Chart.ActualWindowPositionVertical -= 0.05;
}
private void OnPanDown()
{
this.Chart.ActualWindowPositionVertical += 0.05;
}
private void OnPanLeft()
{
this.Chart.ActualWindowPositionHorizontal -= 0.05;
}
private void OnPanRight()
{
this.Chart.ActualWindowPositionHorizontal += 0.05;
}
private void OnZoomIn()
{
if (this.Chart.ActualWindowPositionHorizontal < 1.0)
this.Chart.ActualWindowPositionHorizontal += 0.025;
if (this.Chart.ActualWindowPositionVertical < 1.0)
this.Chart.ActualWindowPositionVertical += 0.025;
if (this.Chart.ActualWindowScaleHorizontal > 0.05)
this.Chart.ActualWindowScaleHorizontal -= 0.05;
if (this.Chart.ActualWindowScaleVertical > 0.05)
this.Chart.ActualWindowScaleVertical -= 0.05;
}
private void OnZoomOut()
{
if (this.Chart.ActualWindowPositionHorizontal > 0.025)
this.Chart.ActualWindowPositionHorizontal -= 0.025;
if (this.Chart.ActualWindowPositionVertical > 0.025)
this.Chart.ActualWindowPositionVertical -= 0.025;
if (this.Chart.ActualWindowScaleHorizontal < 1.0)
this.Chart.ActualWindowScaleHorizontal += 0.05;
if (this.Chart.ActualWindowScaleVertical < 1.0)
this.Chart.ActualWindowScaleVertical += 0.05;
}
private void OnEnableZoomingChange(ChangeEventArgs args)
{
this.IsZoomingEnabled = (bool)args.Value;
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Overlays
Las superposiciones le permiten anotar valores y umbrales importantes trazando líneas horizontales o verticales en los gráficos. Puede obtener más información sobre esta función en el tema Superposiciones de gráficos.
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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbColumnSeriesModule),
typeof(IgbValueOverlayModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical">
@if (Data != null)
{
<IgbDataChart Height="100%" Width="100%" IsHorizontalZoomEnabled="true" IsVerticalZoomEnabled="true">
<IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Label" />
<IgbNumericYAxis Name="yAxis" MinimumValue="0" MaximumValue="10" />
<IgbColumnSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="Value" />
<IgbValueOverlay AxisName="yAxis" Value="2.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="3.6" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="5.8" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="1.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="8.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="7.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="5.0" Thickness="5" />
</IgbDataChart>
}
</div>
</div>
@code {
private List<OverlayDataItem> Data;
protected override void OnInitialized()
{
var data = new List<OverlayDataItem>() {
new OverlayDataItem() { Label = "1", Value = 1.0 },
new OverlayDataItem() { Label = "2", Value = 2.0 },
new OverlayDataItem() { Label = "3", Value = 6.0 },
new OverlayDataItem() { Label = "4", Value = 8.0 },
new OverlayDataItem() { Label = "5", Value = 2.0 },
new OverlayDataItem() { Label = "6", Value = 6.0 },
new OverlayDataItem() { Label = "7", Value = 4.0 },
new OverlayDataItem() { Label = "8", Value = 2.0 },
new OverlayDataItem() { Label = "9", Value = 1.0 }
};
this.Data = data;
}
public class OverlayDataItem {
public string Label { get; set; }
public double Value { get; set; }
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Performance
Blazor gráficos están optimizados para un alto rendimiento de representación de millones de puntos de datos y actualización cada pocos milisegundos. Sin embargo, hay varias características de los gráficos que afectan al rendimiento de los gráficos y se deben tener en cuenta a la hora de optimizar el rendimiento de la aplicación. Puede obtener más información sobre esta función en el tema Rendimiento de los gráficos.
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">
<div class="options horizontal">
<label class="options-label">Data Points: </label>
<label class="options-value">@DataInfo</label>
<input class="options-slider" type="range" min="10000" max="1000000" step="10000"
value="@DataPoints" @onchange="OnDataPointsChanged" />
<button @onclick="OnDataGenerateClick">Generate Data</button>
</div>
<div class="container vertical">
<IgbCategoryChart @ref="chart"
Height="100%" Width="100%"
DataSourceScript="getHighVolumeData"
YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
YAxisTitle="Value of Data Points"
XAxisTitle="Index of Data Points"
ToolTipType="ToolTipType.Default"
XAxisEnhancedIntervalPreferMoreCategoryLabels="false"
ShouldAutoExpandMarginForInitialLabels="false"
CrosshairsDisplayMode="CrosshairsDisplayMode.None"
SeriesAdded="OnSeriesAdded">
</IgbCategoryChart>
</div>
</div>
@code {
private IgbCategoryChart chart;
private int DataPoints = 1000000;
private string DataInfo;
protected override void OnInitialized()
{
this.DataInfo = ToShortString(this.DataPoints);
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints);
}
}
private void OnSeriesAdded(IgbChartSeriesEventArgs e)
{
((IgbCategoryChart)e.Parent).MarkerTypes.Clear();
((IgbCategoryChart)e.Parent).MarkerTypes.Add(MarkerType.None);
}
private void OnDataPointsChanged(ChangeEventArgs args)
{
this.DataPoints = int.Parse(args.Value.ToString());
this.DataInfo = ToShortString(this.DataPoints);
}
private void OnDataGenerateClick()
{
Task.Delay(1).ContinueWith((t) => GenerateData());
}
private async Task GenerateData()
{
await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints);
}
public static string ToShortString(double largeValue)
{
double roundValue;
if (largeValue >= 1000000)
{
roundValue = Math.Round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000)
{
roundValue = Math.Round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.Round(largeValue);
return roundValue + "";
}
}razor
var __highVolumeDataCount = 1000000;
var __highVolumeData = [];
function setHighVolumeDataCount(dataCount) {
__highVolumeDataCount = dataCount;
__highVoluenData = generateHighVolumeData();
var chart = document.querySelectorAll("igc-category-chart");
if (chart && chart.length > 0) {
for (var i = 0; i < chart.length; i++) {
if (chart[i].dataSource === __highVolumeData) {
chart[i].notifyClearItems(__highVolumeData);
}
}
}
}
function generateHighVolumeData() {
var dataCount = __highVolumeDataCount;
var curr = 100.0;
var data = __highVolumeData;
var index = "";
__highVolumeData.length = dataCount;
for (var i = 0; i <= dataCount; i++) {
curr += Math.random() * 4.0 - 2.0;
index = toStringWithCommas(i);
data[i] = { Label: index, Value: curr };
}
return data;
}
function toStringWithCommas(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function getHighVolumeData() {
return __highVolumeData;
}
igRegisterScript("getHighVolumeData", getHighVolumeData, true);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Tooltips
Muestre toda la información relevante para el tipo de serie particular a través de información sobre herramientas. Hay diferentes información sobre herramientas que se pueden habilitar, como información sobre herramientas a nivel de elemento y a nivel de categoría. Puede obtener más información sobre esta función en el tema Información sobre herramientas de gráficos.
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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}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="ToolTipType"
Name="ToolTipTypeEditor"
@ref="toolTipTypeEditor"
Label="ToolTip Type: "
PrimitiveValue="@("Data")">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<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"
CrosshairsSnapToData="true">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async 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
Trendlines
Utilice las líneas de tendencia para identificar una tendencia o encontrar patrones en los datos. Hay muchas líneas de tendencia diferentes compatibles con el gráfico Blazor, como CubicFit y LinearFit. Puede obtener más información sobre esta función en el tema Líneas de tendencia de los gráficos.
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(IgbFinancialChartModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Net.Http;
using System.Net.Http.Json;
using System.Text.Json;
using System.Text.Json.Serialization;
using System.Globalization;
namespace Infragistics.Samples
{
public class StocksHistory
{
public static async Task<List<StockPrice[]>> GetMultipleStocks()
{
// getting prices of multiples stocks asynchronously
var dataSources = new List<StockPrice[]> {
//await GetAmazonStock(),
await GetGoogleStock(),
await GetMicrosoftStock(),
//await GetTeslaStock()
};
return dataSources;
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async Task<StockPrice[]> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
//var serializeOptions = new JsonSerializerOptions();
//serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async Task<StockPrice[]> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
var serializeOptions = new JsonSerializerOptions();
serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async Task<StockPrice[]> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
var serializeOptions = new JsonSerializerOptions();
serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
public static async Task<StockPrice[]> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
var serializeOptions = new JsonSerializerOptions();
serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
}
public class DateTimeConverter : JsonConverter<DateTime>
{
public override DateTime Read(
ref Utf8JsonReader reader,
Type typeToConvert,
JsonSerializerOptions options)
{
return DateTime.Now;
}
public override void Write(
Utf8JsonWriter writer,
DateTime date,
JsonSerializerOptions options) =>
writer.WriteStringValue(date.ToString());
}
public class StockPrice
{
public string Date { get; set; }
public DateTime Time { get; set; }
public double Open { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Close { get; set; }
public double Volume { get; set; }
public int Index { get; set; }
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<label class="options-label">Trendlines: </label>
<label class="options-item">
<select @bind="@TrendLineType">
<option>@TrendLineType.CubicFit</option>
<option>@TrendLineType.LinearFit</option>
<option>@TrendLineType.QuinticFit</option>
<option>@TrendLineType.QuarticFit</option>
<option>@TrendLineType.ExponentialFit</option>
<option>@TrendLineType.PowerLawFit</option>
<option>@TrendLineType.LogarithmicFit</option>
<option>@TrendLineType.CumulativeAverage</option>
<option>@TrendLineType.ExponentialAverage</option>
<option>@TrendLineType.SimpleAverage</option>
<option>@TrendLineType.ModifiedAverage</option>
<option>@TrendLineType.WeightedAverage</option>
<option>@TrendLineType.None</option>
</select>
</label>
</div>
<div class="container vertical">
@if (Data != null)
{
<IgbFinancialChart Width="100%"
Height="100%"
ChartType=FinancialChartType.Bar
Thickness=2
DataSource="Data"
TrendLineType="@TrendLineType"
TrendLineThickness=2
TrendLinePeriod=10
TrendLineBrushes="rgba(0, 101, 209, 1)"
ChartTitle="Microsoft Trend"
Subtitle="Between 2013 and 2017"
ZoomSliderType="FinancialChartZoomSliderType.None"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"/>
}
</div>
</div>
@code {
protected StockPrice[] Data;
protected TrendLineType TrendLineType = TrendLineType.QuinticFit;
protected override async Task OnInitializedAsync()
{
this.Data = await StocksHistory.GetMicrosoftStock();
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css