Blazor チャートのオーバーレイ

Blazor IgbDataChart を使用すると、IgbValueOverlay を使用して定義した単一の数値で水平線または垂直線を配置できます。特定のシリーズの平均値や中央値などのデータを視覚化するのに役立ちます。

Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。

無料で試してみる

Blazor 値オーバーレイの例

次の例は、いくつかの水平値オーバーレイがプロットされた縦棒チャートを示しています。

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 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コピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Blazor 値オーバーレイのプロパティ

データバインディングに DataSource を使用する他のシリーズ タイプとは異なり、値オーバーレイは ValueMemberPath プロパティを使用して単一の数値をバインドします。さらに、値オーバーレイでは、使用する単一の Axis を定義する必要があります。X 軸を使用する場合、値のオーバーレイは垂直線になり、Y 軸を使用する場合は、水平線になります。

数値の X 軸または Y 軸を使用する場合、ValueMemberPath プロパティは、値のオーバーレイを描画する軸上の実際の数値を反映する必要があります。カテゴリ X または Y 軸を使用する場合、ValueMemberPath は、値オーバーレイを表示するカテゴリのインデックスを反映する必要があります。

数値オーバーレイを角度角軸で使用すると、チャートの中心からの線として表示され、半径半径軸を使用すると、円として表示されます。

IgbValueOverlay 外観プロパティは、Series から継承されているため、例えば Brush と Thickness を使用でき、他のタイプのシリーズと同じように機能します。

IgbValueOverlay に軸注釈を表示して、所有する軸にオーバーレイの値を表示することもできます。これを示すために、IsAxisAnnotationEnabled プロパティを true に設定できます。

Blazor 値レイヤー

Blazor チャート コンポーネントは、値の線を使用して、最小値、最大値、平均値などのデータのさまざまな焦点を示す機能も公開します。

IgbCategoryChart および IgbFinancialChart コンポーネントに IgbValueLayer を適用するには、チャート上で ValueLines プロパティを設定します。このプロパティは、ValueLayerValueMode 列挙体のコレクションを受け取ります。複数の ValueLayerValueMode 列挙をチャートの ValueLines コレクションに追加することで、同じチャート内で複数の値レイヤーを組み合わせたりできます。

IgbDataChart では、これは、チャートの Series コレクションに IgbValueLayer を追加し、次に ValueMode プロパティを ValueLayerValueMode 列挙の 1 つに設定することによって行われます。これらの各列挙とその意味を以下に示します。

• Auto: ValueLayerValueMode 列挙体のデフォルト値モード。
• Average: 複数の値の線を適用して、チャートにプロットされた各系列の平均値を呼び出します。
• GlobalAverage: 単一の値線を適用して、チャート内のすべての系列値の平均を呼び出します。
• GlobalMaximum: 単一の値線を適用して、チャート内のすべての系列値の絶対最大値を呼び出します。
• GlobalMinimum: 単一の値線を適用して、チャート内のすべての系列値の絶対最小値を呼び出します。
• Maximum: チャートにプロットされた各系列の最大値を示すために、複数の値線を適用する可能性があります。
• Minimum: チャートにプロットされた各系列の最小値を示すために、複数の値線を適用する可能性があります。

IgbValueLayer 要素を使用するときに特定のシリーズが考慮されないようにする場合は、レイヤーに TargetSeries プロパティを設定できます。これにより、レイヤーは定義したシリーズを強制的にターゲットにするようになります。単一の IgbDataChart 内に必要な数の IgbValueLayer 要素を含めることができます。

次のサンプルは、IgbCategoryChart 内のさまざまな ValueLines の使用法を示しています。

EXAMPLE

DATA

MODULES

RAZOR

CSS

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
        });
    }
}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 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
@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="ValueListHandler"
            Name="ValueListEditor"
            @ref="valueListEditor"
            Label="Value List"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownValues="@(new string[] { "Auto", "Average", "GlobalAverage", "GlobalMaximum", "GlobalMinimum", "Maximum", "Minimum" })"
            DropDownNames="@(new string[] { "Auto", "Average", "GlobalAverage", "GlobalMaximum", "GlobalMinimum", "Maximum", "Minimum" })"
            PrimitiveValue="@("Auto")"
            Changed="EditorChangeUpdateValueLines">
            </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", "America", "Europe" })"
        ChartType="CategoryChartType.Column"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        CrosshairsDisplayMode="CrosshairsDisplayMode.None"
        IsTransitionInEnabled="false"
        YAxisMinimumValue="0"
        YAxisMaximumValue="100">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var propertyEditor = this.propertyEditor;
        var valueListEditor = this.valueListEditor;
        var chart = this.chart;

        this.BindElements = () => {
            propertyEditor.Target = this.chart;
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription valueListEditor;
    private IgbCategoryChart chart;

    public void EditorChangeUpdateValueLines(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
    {
        //var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First();
        //var value = (string)item.PrimitiveValue;
        var chart = this.chart;

        var valueLineType = (ValueLayerValueMode)Enum.Parse(typeof(ValueLayerValueMode), args.NewValue.ToString());
        chart.ValueLines.Clear();
        chart.ValueLines.Add(valueLineType);
    }

    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 株価チャートに組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。

その他のリソース

関連するチャート タイプの詳細については、以下のトピックを参照してください。

• チャート注釈
• 縦棒チ株価チャートャート
• 折れ線チャート
• 株価チャート

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。

• IgbDataChart
• DataSource
• IgbValueOverlay
• Axis
• Brush
• IsAxisAnnotationsEnabled
• Series
• Thickness
• IgbValueLayer
• ValueLayerValueMode
• ValueLines