Blazor 軸グリッド線
すべての Ignite UI for Blazor チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。
次の例は、IgbCategoryChart および IgbFinancialChart コントロールに適用されます。
軸の主グリッド線は、軸ラベルの位置から水平 (Y 軸) または垂直 (X 軸) に伸びる長い線であり、チャートのプロット領域を介して描画されます。軸の副グリッド線は、軸の主グリッド線の間に描画される線です。
軸目盛りは、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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing 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
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="propertyEditorPanel1"
@ref="propertyEditorPanel1">
<IgbPropertyEditorPropertyDescription
PropertyPath="XAxisStroke"
Name="XAxisStroke"
@ref="xAxisStroke"
Label="X Axis Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("gray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="XAxisMajorStroke"
Name="XAxisMajorStroke"
@ref="xAxisMajorStroke"
Label="X Axis Major Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("darkslategray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="YAxisStroke"
Name="YAxisStroke"
@ref="yAxisStroke"
Label="Y Axis Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("gray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="YAxisMajorStroke"
Name="YAxisMajorStroke"
@ref="yAxisMajorStroke"
Label="Y Axis Major Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("darkslategray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="YAxisMinorStroke"
Name="YAxisMinorStroke"
@ref="yAxisMinorStroke"
Label="Y Axis Minor Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("gray")">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
ChartType="CategoryChartType.Line"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
XAxisStroke="#919191"
XAxisStrokeThickness="2"
XAxisInterval="1"
XAxisMajorStroke="#474747"
XAxisMajorStrokeThickness="0.5"
YAxisStroke="gray"
YAxisStrokeThickness="2"
YAxisInterval="20"
YAxisMajorStroke="darkslategray"
YAxisMajorStrokeThickness="1"
YAxisMinorInterval="5"
YAxisMinorStroke="gray"
YAxisMinorStrokeThickness="0.5"
Thickness="2">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var propertyEditorPanel1 = this.propertyEditorPanel1;
var xAxisStroke = this.xAxisStroke;
var xAxisMajorStroke = this.xAxisMajorStroke;
var yAxisStroke = this.yAxisStroke;
var yAxisMajorStroke = this.yAxisMajorStroke;
var yAxisMinorStroke = this.yAxisMinorStroke;
var chart = this.chart;
this.BindElements = () => {
propertyEditorPanel1.Target = this.chart;
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbPropertyEditorPanel propertyEditorPanel1;
private IgbPropertyEditorPropertyDescription xAxisStroke;
private IgbPropertyEditorPropertyDescription xAxisMajorStroke;
private IgbPropertyEditorPropertyDescription yAxisStroke;
private IgbPropertyEditorPropertyDescription yAxisMajorStroke;
private IgbPropertyEditorPropertyDescription yAxisMinorStroke;
private IgbCategoryChart chart;
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
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Blazor 軸グリッド線のプロパティ
軸間隔プロパティを設定すると、主グリッド線と軸ラベルが軸に描画される頻度を指定します。同様に、軸副間隔のプロパティは副グリッド線が軸に描画される頻度を指定します。
副間隔に対応する副グリッド線を表示するには、軸に XAxisMinorStroke
と XAxisMinorStrokeThickness
プロパティを設定する必要があります。これは、副グリッド線にはデフォルトの色または太さがなく、最初に割り当てるまで表示されないためです。
以下のプロパティを設定して、Blazor チャートでのグリッド線の表示をカスタマイズできます。
軸ビジュアル | タイプ | プロパティ名 | 説明 |
---|---|---|---|
主なストロークの色 | 文字列 | XAxisMajorStroke YAxisMajorStroke |
これらのプロパティは、軸の主グリッド線の色を設定します。 |
副ストロークの色 | 文字列 | XAxisMinorStroke YAxisMinorStroke |
これらのプロパティは、軸の副グリッド線の色を設定します。 |
主なストロークの太さ | 数 | XAxisMajorStrokeThickness YAxisMajorStrokeThickness |
これらのプロパティは、軸の主グリッド線の太さをピクセル単位で設定します。 |
副ストロークの太さ | 数 | XAxisMinorStrokeThickness YAxisMinorStrokeThickness |
これらのプロパティは、軸の副グリッド線の太さをピクセル単位で設定します。 |
主間隔 | 数 | XAxisInterval YAxisInterval |
これらのプロパティは、軸の主グリッド線とラベルの間隔を設定します。 |
副間隔 | 数 | XAxisMinorInterval YAxisMinorInterval |
これらのプロパティは、軸の副グリッド線の間隔を設定します (使用する場合)。 |
軸線のストローク色 | 文字列 | XAxisStroke YAxisStroke |
これらのプロパティは、軸線の色を設定します。 |
軸のストロークの太さ | 数 | XAxisStrokeThickness YAxisStrokeThickness |
これらのプロパティは、軸線のピクセル単位の太さを設定します。 |
上記のテーブルの主間隔と副間隔については、軸ラベルの主間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。副間隔グリッド線は常に主グリッド線の間に描画されるため、副間隔プロパティは常に主間隔プロパティの値よりもはるかに小さい値 (通常は 2〜5 倍小さい値) に設定する必要があります。
カテゴリ軸では、間隔は、最初の項目から最後のカテゴリ項目の範囲のインデックスとして表されます。通常、この値は、主間隔のカテゴリ項目の合計数の 10~20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。副間隔の場合、主間隔プロパティの一部として表されます。通常、この値の範囲は 0.25~0.5 です。
数値軸では、間隔値は軸の最小値と最大値の間の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。
日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。
以下の例は、上記のプロパティを設定してグリッド線をカスタマイズする方法を示しています。
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing 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
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="propertyEditorPanel1"
@ref="propertyEditorPanel1">
<IgbPropertyEditorPropertyDescription
PropertyPath="XAxisStroke"
Name="XAxisStroke"
@ref="xAxisStroke"
Label="X Axis Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("gray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="XAxisMajorStroke"
Name="XAxisMajorStroke"
@ref="xAxisMajorStroke"
Label="X Axis Major Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("darkslategray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="YAxisStroke"
Name="YAxisStroke"
@ref="yAxisStroke"
Label="Y Axis Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("gray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="YAxisMajorStroke"
Name="YAxisMajorStroke"
@ref="yAxisMajorStroke"
Label="Y Axis Major Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("darkslategray")">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
PropertyPath="YAxisMinorStroke"
Name="YAxisMinorStroke"
@ref="yAxisMinorStroke"
Label="Y Axis Minor Stroke"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
PrimitiveValue="@("gray")">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
ChartType="CategoryChartType.Line"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
XAxisStroke="#919191"
XAxisStrokeThickness="2"
XAxisInterval="1"
XAxisMajorStroke="#474747"
XAxisMajorStrokeThickness="0.5"
YAxisStroke="gray"
YAxisStrokeThickness="2"
YAxisInterval="20"
YAxisMajorStroke="darkslategray"
YAxisMajorStrokeThickness="1"
YAxisMinorInterval="5"
YAxisMinorStroke="gray"
YAxisMinorStrokeThickness="0.5"
Thickness="2">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var propertyEditorPanel1 = this.propertyEditorPanel1;
var xAxisStroke = this.xAxisStroke;
var xAxisMajorStroke = this.xAxisMajorStroke;
var yAxisStroke = this.yAxisStroke;
var yAxisMajorStroke = this.yAxisMajorStroke;
var yAxisMinorStroke = this.yAxisMinorStroke;
var chart = this.chart;
this.BindElements = () => {
propertyEditorPanel1.Target = this.chart;
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbPropertyEditorPanel propertyEditorPanel1;
private IgbPropertyEditorPropertyDescription xAxisStroke;
private IgbPropertyEditorPropertyDescription xAxisMajorStroke;
private IgbPropertyEditorPropertyDescription yAxisStroke;
private IgbPropertyEditorPropertyDescription yAxisMajorStroke;
private IgbPropertyEditorPropertyDescription yAxisMinorStroke;
private IgbCategoryChart chart;
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
IgbDataChart
の軸には、それぞれ MajorStrokeDashArray
プロパティと MinorStrokeDashArray
プロパティを利用して、主グリッド線と副グリッド線にダッシュ配列を配置する機能もあります。対応する軸の StrokeDashArray
プロパティを設定することで、実際の軸線も破線にすることができます。これらのプロパティは、対応するグリッド線のダッシュの長さを記述する数値の配列を受け取ります。
次の例は、上記のダッシュ配列プロパティが設定された IgbDataChart
を示しています。
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(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}
csusing 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
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="Legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbDataChart
Name="chart"
@ref="chart"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
<IgbCategoryXAxis
Name="xAxis"
@ref="xAxis"
DataSource="CountryRenewableElectricity"
Label="Year"
Interval="1"
MajorStroke="#474747"
MajorStrokeThickness="0.5"
Stroke="#919191"
StrokeThickness="2"
StrokeDashArray="@(new double[] { 5, 5 })"
MajorStrokeDashArray="@(new double[] { 5, 5 })"
TickLength="0">
</IgbCategoryXAxis>
<IgbNumericYAxis
Name="yAxis"
@ref="yAxis"
Stroke="gray"
StrokeThickness="2"
Interval="20"
MajorStroke="darkslategray"
MajorStrokeThickness="1"
MinorInterval="5"
MinorStroke="gray"
MinorStrokeThickness="0.5"
StrokeDashArray="@(new double[] { 5, 5 })"
MajorStrokeDashArray="@(new double[] { 5, 5 })"
MinorStrokeDashArray="@(new double[] { 2.5, 2.5 })"
TickLength="0">
</IgbNumericYAxis>
<IgbLineSeries
Name="LineSeries1"
@ref="lineSeries1"
Title="Europe"
XAxisName="xAxis"
YAxisName="yAxis"
MarkerType="MarkerType.Circle"
DataSource="CountryRenewableElectricity"
ValueMemberPath="Europe"
ShowDefaultTooltip="true">
</IgbLineSeries>
<IgbLineSeries
Name="LineSeries2"
@ref="lineSeries2"
Title="China"
XAxisName="xAxis"
YAxisName="yAxis"
MarkerType="MarkerType.Circle"
DataSource="CountryRenewableElectricity"
ValueMemberPath="China"
ShowDefaultTooltip="true">
</IgbLineSeries>
<IgbLineSeries
Name="LineSeries3"
@ref="lineSeries3"
Title="America"
XAxisName="xAxis"
YAxisName="yAxis"
MarkerType="MarkerType.Circle"
DataSource="CountryRenewableElectricity"
ValueMemberPath="America"
ShowDefaultTooltip="true">
</IgbLineSeries>
</IgbDataChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var lineSeries1 = this.lineSeries1;
var lineSeries2 = this.lineSeries2;
var lineSeries3 = this.lineSeries3;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbLineSeries lineSeries1;
private IgbLineSeries lineSeries2;
private IgbLineSeries lineSeries3;
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
Blazor 軸目盛りの例
軸の目盛りは、XAxisTickLength
と YAxisTickLength
プロパティを 0 より大きい値に設定することで有効になります。これらのプロパティは、目盛りを形成する線セグメントの長さを指定します。
目盛りは常に軸線から伸び、ラベルの方向を指します。ラベルは、重ならないように目盛りの長さの値でオフセットされます。たとえば、YAxisTickLength
プロパティが 5 に設定されている場合、軸ラベルはその量だけ左にシフトされます。
以下の例は、上記のプロパティを設定して目盛りをカスタマイズする方法を示します。
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing 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
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="propertyEditorPanel1"
@ref="propertyEditorPanel1">
<IgbPropertyEditorPropertyDescription
PropertyPath="XAxisTickLength"
Name="XAxisTickLength"
@ref="xAxisTickLength"
Label="X Axis Tick Length"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.Slider"
Min="0"
Max="20"
PrimitiveValue="10">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
ChartType="CategoryChartType.Line"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
XAxisTickLength="10"
XAxisTickStrokeThickness="1"
XAxisTickStroke="gray"
YAxisTickLength="0"
YAxisTickStrokeThickness="0"
YAxisTickStroke="#00000000">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var propertyEditorPanel1 = this.propertyEditorPanel1;
var xAxisTickLength = this.xAxisTickLength;
var chart = this.chart;
this.BindElements = () => {
propertyEditorPanel1.Target = this.chart;
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbPropertyEditorPanel propertyEditorPanel1;
private IgbPropertyEditorPropertyDescription xAxisTickLength;
private IgbCategoryChart chart;
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
Blazor 軸目盛りのプロパティ
以下のプロパティを設定して、Blazor チャートで軸の目盛りの表示方法をカスタマイズできます。
軸ビジュアル | タイプ | プロパティ名 | 説明 |
---|---|---|---|
目盛りストロークの色 | 文字列 | XAxisTickStroke YAxisTickStroke |
これらのプロパティは、目盛りの色を設定します。 |
目盛りストロークの太さ | 数 | XAxisTickStrokeThickness YAxisTickStrokeThickness |
これらのプロパティは、軸の目盛りの太さを設定します。 |
目盛りストロークの長さ | 数 | XAxisTickLength YAxisTickLength |
これらのプロパティは、軸の目盛りの長さを設定します。 |
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明されている API メンバーのリストです。