Blazor チャート注釈
Blazor チャートのホバー操作と注釈は、シリーズ コレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。これらのレイヤーはカーソルの位置に依存します。これらの注釈レイヤーはそれぞれ、個別に使用することも、他のレイヤーと組み合わせて強力なホバー操作を提供することもできる、異なるホバー操作を提供します。
Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。
Blazor 注釈の例
次の例は、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();
}
}
}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
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
このサンプルが気に入りましたか? 完全な Blazor ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Blazor 十字線レイヤー
IgbCrosshairLayer は、対象にするために構成される各シリーズの実際値で、異なるセットの線を描画する各シリーズと交差する十字線として描画されます。
十字線のタイプは次のとおりです:
- Horizontal
- Vertical
- Both
チャートの十字線は、CrosshairsSnapToData プロパティを true に設定することでデータ ポイントにスナップするように構成することもできます。そうしないと、十字線がデータ ポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。
デフォルトではチャート コントロールのすべてのシリーズをターゲットにするため、特定のシリーズを 1 つだけ表示するように十字線レイヤーを構成できます。これには、TargetSeries プロパティを設定します。
デフォルトでは、十字線の色は交差するシリーズよりも軽い色になります。しかし、このデフォルト値は、十字線に使用される色を選択できるようにオーバーライドできます。これは、十字線レイヤーの Brush プロパティを設定することによって行われます。
次の例は、単一のシリーズをターゲットにして、タイプを垂直に設定し、ブラシの色をスタイリングすることによって、十字線レイヤーを構成する方法を示しています。
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(IgbDataChartInteractivityModule),
typeof(IgbLineSeriesModule),
typeof(IgbCrosshairLayerModule)
);
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="container vertical">
@if (Data != null)
{
<IgbDataChart Height="100%" Width="100%" Subtitle="Renewable Energy Generated">
<IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
<IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />
<IgbLineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="USA" />
<IgbCrosshairLayer HorizontalLineVisibility="Visibility.Collapsed" Brush="DodgerBlue" />
</IgbDataChart>
}
</div>
</div>
@code {
private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor 最終値レイヤー
IgbDataChart コントロールの IgbFinalValueLayer は、シリーズに表示された最終値の軸に沿ったクイック ビューをサポートします。
複数の最終値レイヤーを異なる設定で使用したい場合は、この注釈を設定して特定のシリーズをターゲットにすることができます。これには TargetSeries プロパティを設定します。
次のプロパティを設定して、この注釈をカスタマイズすることもできます:
AxisAnnotationBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。AxisAnnotationTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。AxisAnnotationOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。
次の例は、上記のプロパティを設定して、最終的な値レイヤーの注釈のスタイルを設定する方法を示しています。
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(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbLineSeriesModule),
typeof(IgbFinalValueLayerModule)
);
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="container vertical">
@if (Data != null)
{
<IgbDataChart Height="100%" Width="100%" Subtitle="Renewable Energy Generated">
<IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
<IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />
<IgbLineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="USA" />
<IgbFinalValueLayer AxisAnnotationBackground="Orange" AxisAnnotationTextColor="Black" AxisAnnotationOutline="Black"/>
</IgbDataChart>
}
</div>
</div>
@code {
private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor コールアウト レイヤー
IgbCalloutLayer はチャート コントロール既存または新しいデータの注釈を表示します。注釈は、データ ソース内の指定されたデータ値の横に表示されます。
コールアウト注釈を使用して、メモやデータ ポイントに関する特定の詳細など、ユーザーに追加情報を表示します。
複数のコールアウト レイヤーを異なる設定で使用する場合は、コールアウトを設定して特定のシリーズをターゲットにできます。これには TargetSeries プロパティを設定します。
次のプロパティを設定して、この注釈をカスタマイズすることもできます:
CalloutLeaderBrush: このプロパティは、レイヤーのコールアウトのリーダー線のブラシを選択するために使用されます。CalloutOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。CalloutBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。CalloutTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。CalloutStrokeThickness: このプロパティは、コールアウト バッキングの厚さを選択するために使用されます。CalloutCornerRadius: このプロパティは、コールアウトのコーナーをカーブさせるために使用されます。AllowedPositions: このプロパティは、コールアウト レイヤーが使用できる位置を選択するために使用されます。例: 上、下
次の例は、上記のプロパティを設定して、コールアウト レイヤーの注釈のスタイルを設定する方法を示しています。
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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbAnnotationLayerProxyModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container vertical fill">
<IgbDataChart
ShouldAutoExpandMarginForInitialLabels="true"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
Name="chart"
@ref="chart">
<IgbCategoryXAxis
Name="xAxis"
@ref="xAxis"
DataSource="CountryRenewableElectricity"
Label="Year">
</IgbCategoryXAxis>
<IgbNumericYAxis
Name="yAxis"
@ref="yAxis"
Title="TWh"
LabelLocation="AxisLabelsLocation.OutsideRight">
</IgbNumericYAxis>
<IgbLineSeries
Name="lineSeries1"
@ref="lineSeries1"
XAxisName="xAxis"
YAxisName="yAxis"
DataSource="CountryRenewableElectricity"
ValueMemberPath="America"
Brush="#8961a9"
MarkerOutline="#8961a9"
ShouldHideAutoCallouts="false">
</IgbLineSeries>
<IgbCalloutLayer
Name="CalloutLayer1"
@ref="calloutLayer1"
IsAutoCalloutBehaviorEnabled="true"
CalloutLeaderBrush="#8961a9"
CalloutOutline="#8961a9"
CalloutBackground="white"
CalloutTextColor="#8961a9"
CalloutStrokeThickness="1"
CalloutCollisionMode="CalloutCollisionMode.Greedy">
</IgbCalloutLayer>
</IgbDataChart>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var lineSeries1 = this.lineSeries1;
var calloutLayer1 = this.calloutLayer1;
}
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbLineSeries lineSeries1;
private IgbCalloutLayer calloutLayer1;
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
タイムラインのスタイル設定
次の例は、上記の AllowedPositions プロパティを設定して、データ チャートを注釈付きのタイムラインとしてスタイル設定する方法を示しています。
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(IgbDataChartVerticalCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartExtendedAxesModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbTimeXAxisModule),
typeof(IgbAnnotationLayerProxyModule),
typeof(IgbCalloutLayerModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
namespace Infragistics.Samples
{
public class SampleTimelineData
{
public static 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;
}
}
public class SampleTimelineItem
{
public string Details { get; set; }
public int X { get; set; }
public int Y { get; set; }
public string Year { get; set; }
public DateTime Date { get; set; }
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<IgbDataChart Height="100%" Width="100%"
@ref="Chart"
IsHorizontalZoomEnabled="false" IsVerticalZoomEnabled="false"
ChartTitle="Brexit Timeline"
Subtitle="Brexit: Key events in the process of the UK's exit from the EU"
TitleTopMargin=50
PlotAreaMarginLeft=100
PlotAreaMarginRight=100>
</IgbDataChart>
</div>
@code {
private List<SampleTimelineItem> CategoryData;
private IgbNumericYAxis NumericYAxis;
private IgbTimeXAxis TimeXAxis;
private IgbCalloutLayer CalloutLayer;
private IgbLineSeries LineSeries1;
private IgbDataChart _chart;
private IgbDataChart Chart
{
get { return _chart; }
set
{
_chart = value;
this.OnChart();
value.Axes.Add(this.TimeXAxis);
value.Axes.Add(this.NumericYAxis);
value.Series.Add(this.LineSeries1);
value.Series.Add(this.CalloutLayer);
StateHasChanged();
}
}
private void OnChart()
{
this.CategoryData = SampleTimelineData.Create();
this.InitAxes();
this.InitCategorySeries();
}
public void InitCategorySeries()
{
this.LineSeries1 = new IgbLineSeries()
{
Brush = "Navy",
DataSource = this.CategoryData,
XAxisName = "TimeXAxis",
YAxisName = "NumericYAxis",
ValueMemberPath = "Y",
Thickness = 15,
MarkerThickness = 15,
MarkerBrush = "#EC0D00",
MarkerOutline = "#EC0D00",
MarkerFillMode = MarkerFillMode.MatchMarkerOutline,
ShowDefaultTooltip = false,
};
this.CalloutLayer = new IgbCalloutLayer()
{
TargetSeries = this.LineSeries1,
DataSource = this.CategoryData,
XMemberPath = "Date",
YMemberPath = "Y",
LabelMemberPath = "Year",
IsAutoCalloutBehaviorEnabled = false,
UseValueForAutoCalloutLabels = false,
CalloutLeaderBrush = "#EC0D00",
CalloutTextColor = "Navy",
CalloutOutline = "#EC0D00",
CalloutBackground = "Transparent",
IsCalloutOffsettingEnabled = false,
TextStyle = "font-size: 25px",
CalloutPositionPadding = 50,
CalloutCollisionMode = CalloutCollisionMode.Greedy,
ShowDefaultTooltip = false,
};
this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Top);
this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopLeft);
this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopRight);
this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Bottom);
this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomLeft);
this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomRight);
}
public void InitAxes()
{
this.NumericYAxis = new IgbNumericYAxis() { Name = "NumericYAxis", Title = "Numeric Y Axis", MinimumValue=0, MaximumValue=10, LabelVisibility = Visibility.Collapsed, MajorStrokeThickness=0.0 };
this.TimeXAxis = new IgbTimeXAxis() { Name = "TimeXAxis", Title = "Time X Axis", DataSource = this.CategoryData, DateTimeMemberPath = "Date", LabelVisibility = Visibility.Collapsed };
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。