Todas Ignite UI for Blazor incluyen opciones para configurar muchas opciones de diseño de ejes, como la ubicación, además de tener la capacidad de compartir ejes entre series o tener múltiples ejes en el mismo gráfico. Estas funciones se muestran en los ejemplos que se muestran a continuación.
Los siguientes ejemplos se pueden aplicar a IgbCategoryChart así como a los controles IgbFinancialChart.
Para todos los ejes, puede especificar la ubicación del eje en relación con el área de trazado del gráfico. La propiedad XAxisLabelLocation de los gráficos Blazor le permite colocar la línea del eje x y sus etiquetas encima o debajo del área de trazado. De manera similar, puede utilizar la propiedad YAxisLabelLocation para colocar el eje y en el lado izquierdo o derecho del área de trazado.
El siguiente ejemplo muestra la cantidad de electricidad renovable producida desde 2009, representada por un Gráfico de líneas. Hay un menú desplegable que le permite configurar YAxisLabelLocation para que pueda visualizar cómo se ven los ejes cuando las etiquetas se colocan en el lado izquierdo o derecho en el interior o exterior del área de trazado del gráfico.
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassCountryRenewableElectricityItem
{
publicstring Year { get; set; }
publicdouble Europe { get; set; }
publicdouble China { get; set; }
publicdouble America { get; set; }
}
publicclassCountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
publicCountryRenewableElectricity()
{
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
});
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
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
¿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.
Escenarios avanzados de Axis
Para escenarios de diseño de ejes más avanzados, puede usar Blazor Gráfico de datos para compartir ejes, agregar múltiples ejes y o ejes x en la misma área de gráfico o incluso cruzar ejes en valores específicos. Los siguientes ejemplos muestran cómo usar estas funciones de IgbDataChart.
Ejemplo de eje compartido
Puede compartir y agregar múltiples ejes en la misma área de gráfico de Blazor IgbDataChart. Es un escenario común usar IgbTimeXAxis compartido y agregar múltiples IgbNumericYAxis para representar gráficamente muchas fuentes de datos que tienen una amplia gama de valores (por ejemplo, precios de acciones y volúmenes de transacciones de acciones).
El siguiente ejemplo muestra un gráfico de precio de acciones y volumen comercial con un gráfico de acciones y un Gráfico de columnas trazados. En este caso, el eje Y de la izquierda lo utiliza el Gráfico de columnas y el eje Y de la derecha lo utiliza el gráfico de acciones, mientras que el eje X se comparte entre los dos.
EXAMPLE
MODULES
DATA
RAZOR
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(IgbFinancialPriceSeriesModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbColumnSeriesModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassSharedAxisFinancialData
{
publicstatic Random random = new Random();
publicstatic List<SharedAxisFinancialItem> Create(int itemsCount = 400)
{
var data = new List<SharedAxisFinancialItem>();
// initial valuesvar 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, today.Month, today.Day);
var time = end.AddDays(-itemsCount);
for (var i = 0; i < itemsCount; i++)
{
var date = time.ToShortDateString();
var label = GetShortDate(time, false);
// adding new data itemvar item = new SharedAxisFinancialItem();
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 valuesvar mod = random.NextDouble() - 0.49;
o = Math.Round(o + (mod * 20));
o = Math.Max(o, 500);
o = Math.Min(o, 675);
v = Math.Round(v + (mod * 500));
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;
}
publicstaticstringGetShortDate(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;
}
}
publicclassSharedAxisFinancialItem
{
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Open { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
publicstring Label { get; set; }
publicstring Date { get; set; }
public DateTime Time { get; set; }
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Ejemplo de cruce de ejes
Además de colocar los ejes fuera del área del gráfico, Blazor IgbDataChart también ofrece opciones para colocar los ejes dentro del área del gráfico y hacer que se crucen en valores específicos. Por ejemplo, puede crear un gráfico trigonométrico configurando las propiedades CrossingAxis y CrossingValue tanto en el eje x como en el eje y para representar las líneas y las etiquetas de los ejes de modo que se crucen en el punto de origen (0, 0).
El siguiente ejemplo muestra una onda Sin y Cos representada por un gráfico de dispersión con los ejes X e Y cruzándose en el punto de origen (0, 0).
EXAMPLE
MODULES
RAZOR
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(IgbDataChartScatterModule),
typeof(IgbDataChartScatterCoreModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="options horizontal"><label>X-Axis Crossing Value: </label><labelclass="options-value" >@XAxisCrossingValue</label><inputtype="range"min="-360"max="360"step="10"value="0" @oninput="OnXAxisCrossingValueChanged" /><label>Y-Axis Crossing Value: </label><labelclass="options-value" >@YAxisCrossingValue</label><inputtype="range"min="-1.25"max="1.25"step="0.125"value="0" @oninput="OnYAxisCrossingValueChanged" /></div><divclass="container vertical">@if (SinData != null && CosData != null)
{<IgbDataChartHeight="100%"Width="100%"IsVerticalZoomEnabled="true"IsHorizontalZoomEnabled="true"PlotAreaMarginTop="60"PlotAreaMarginBottom="60"PlotAreaMarginLeft="30"PlotAreaMarginRight="30"><IgbNumericXAxisName="xAxis"Interval="40"MinimumValue="-360"MaximumValue="360"LabelLocation="AxisLabelsLocation.InsideBottom"LabelTopMargin="10"CrossingAxisName="yAxis"CrossingValue="@YAxisCrossingValue"StrokeThickness="1"Stroke="black"/><IgbNumericYAxisName="yAxis"MinimumValue="-1.25"MaximumValue="1.25"Interval="0.25"LabelLocation="AxisLabelsLocation.InsideLeft"LabelRightMargin="10"CrossingAxisName="xAxis"CrossingValue="@XAxisCrossingValue"StrokeThickness="1"Stroke="black"/><IgbScatterSplineSeriesXAxisName="xAxis"YAxisName="yAxis"DataSource="SinData"XMemberPath="X"YMemberPath="Y"MarkerType="MarkerType.Circle" /><IgbScatterSplineSeriesXAxisName="xAxis"YAxisName="yAxis"DataSource="CosData"XMemberPath="X"YMemberPath="Y"MarkerType="MarkerType.Circle" /></IgbDataChart>}</div></div>@code {private List<Point> SinData;
private List<Point> CosData;
privatedouble YAxisCrossingValue = 0;
privatedouble XAxisCrossingValue = 0;
protectedoverridevoidOnInitialized()
{
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;
}
privatevoidOnXAxisCrossingValueChanged(ChangeEventArgs args)
{
this.XAxisCrossingValue = double.Parse(args.Value.ToString());
}
privatevoidOnYAxisCrossingValueChanged(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
Ejemplo de línea de tiempo del eje
El siguiente ejemplo demuestra cómo aplicar estilo al gráfico de datos utilizando IgbTimeXAxis como línea de tiempo:
EXAMPLE
MODULES
DATA
RAZOR
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(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartVerticalCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartExtendedAxesModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbTimeXAxisModule),
typeof(IgbAnnotationLayerProxyModule),
typeof(IgbCalloutLayerModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassSampleTimelineData
{
publicstatic List<SampleTimelineItem> Create() {
var data = new List<SampleTimelineItem>() {
new SampleTimelineItem { Year = "JUN 06, 2016", Date = new DateTime(2016, 6, 23), Y = 5, Details = "UK votes to exit the EU"},
new SampleTimelineItem { Year = "MAR 29, 2017", Date = new DateTime(2017, 3, 29), Y = 5, Details = "The UK triggers Article 50"},
new SampleTimelineItem { Year = "JUN 19, 2017", Date = new DateTime(2017, 6, 19), Y = 5, Details = "Brexit negotiations begin"},
new SampleTimelineItem { Year = "MAR 19, 2018", Date = new DateTime(2018, 3, 19), Y = 5, Details = "The EU and the UK agree on a transition phase"},
new SampleTimelineItem { Year = "NOV 25, 2018", Date = new DateTime(2018, 12, 25), Y = 5, Details = "Draft withdrawl deal agreed"},
new SampleTimelineItem { Year = "OCT 29, 2019", Date = new DateTime(2019, 10, 29), Y = 5, Details = "EU heads of state and government approve postponing the Brexit date"},
new SampleTimelineItem { Year = "DEC 31, 2020", Date = new DateTime(2020, 12, 31), Y = 5, Details = "Transition period ends"},
};
return data;
}
}
publicclassSampleTimelineItem
{
publicstring Details { get; set; }
publicint X { get; set; }
publicint Y { get; set; }
publicstring Year { get; set; }
public DateTime Date { get; set; }
}
}cs