Blazor チャート トレンドライン

Ignite UI for Blazor チャートでは、トレンドラインはトレンドの識別やデータ内のパターンの検索に役立ちます。トレンドラインは、常にチャートにバインドされたデータ ポイントの前に描画されます。積層シリーズ、シェイプ シリーズ、および範囲シリーズを除き、これらは IgbCategoryChart、IgbFinancialChart、および IgbDataChart (積層型シリーズ、シェイプ シリーズ、範囲シリーズを除く) でサポートされています。

トレンドラインはデフォルトでオフになっていますが、TrendLineType プロパティを設定することで有効にできます。また、ブラシ、期間、太さなど、トレンドラインの複数の外観プロパティを変更できます。

トレンドラインを有効にすると、ダッシュ配列を適用することもできます。これを行うには、TrendLineDashArray プロパティを数値の配列に設定します。数値配列は、トレンドラインの破線の長さを表します。

Blazor チャート トレンドラインの例

次のサンプルは、QuinticFit トレンドラインが最初に適用された、2013 年から 2017 年までの Microsoft の株価トレンドを示す IgbFinancialChart を示しています。適用されるトレンドラインのタイプを変更できるドロップダウンがあり、可能なすべてのトレンドライン タイプがそのドロップダウン内に一覧表示されます。

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 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();
        }
    }
}csコピー

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

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

Blazor チャート トレンドラインのダッシュ配列の例

次のサンプルは、TrendLineDashArray プロパティを介して適用された QuarticFit 破線トレンドラインを持つ IgbFinancialPriceSeries を示す IgbDataChart を示しています。

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 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(IgbDataChartCategoryCoreModule),
                typeof(IgbDataChartCategoryTrendLineModule),
                typeof(IgbDataChartFinancialCoreModule),
                typeof(IgbDataChartFinancialModule),
                typeof(IgbDataChartFinancialOverlaysModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class Stock2YearsItem
{
    public string Month { 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 class Stock2Years
    : List<Stock2YearsItem>
{
    public Stock2Years()
    {
        this.Add(new Stock2YearsItem()
        {
            Month = @"2020",
            Open = 41.1,
            High = 41.6,
            Low = 41.1,
            Close = 41.4,
            Volume = 32610
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"FEB",
            Open = 41.4,
            High = 41.7,
            Low = 41.2,
            Close = 41.4,
            Volume = 28666
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"MAR",
            Open = 41.3,
            High = 41.3,
            Low = 40.7,
            Close = 41,
            Volume = 30139
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"APR",
            Open = 41.3,
            High = 41.4,
            Low = 39.6,
            Close = 39.9,
            Volume = 51409
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"MAY",
            Open = 40,
            High = 40.3,
            Low = 39.7,
            Close = 39.8,
            Volume = 37559
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"JUN",
            Open = 39.8,
            High = 39.9,
            Low = 39.2,
            Close = 39.8,
            Volume = 35919
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"JUL",
            Open = 39.9,
            High = 40.5,
            Low = 39.9,
            Close = 40.5,
            Volume = 27398
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"AUG",
            Open = 40.4,
            High = 40.7,
            Low = 39.1,
            Close = 39.4,
            Volume = 45960
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"SEP",
            Open = 39,
            High = 39.8,
            Low = 39,
            Close = 39.2,
            Volume = 34333
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"OCT",
            Open = 39.1,
            High = 39.4,
            Low = 38.9,
            Close = 39.2,
            Volume = 32006
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"NOV",
            Open = 39.3,
            High = 40,
            Low = 39,
            Close = 39.8,
            Volume = 33978
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"DEC",
            Open = 40.1,
            High = 40.4,
            Low = 39.9,
            Close = 40.4,
            Volume = 30616
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"2021",
            Open = 40,
            High = 40.2,
            Low = 39.5,
            Close = 40,
            Volume = 36689
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"FEB",
            Open = 40.1,
            High = 40.1,
            Low = 39.8,
            Close = 39.9,
            Volume = 22222
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"MAR",
            Open = 40,
            High = 40.1,
            Low = 39.8,
            Close = 40,
            Volume = 27057
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"APR",
            Open = 40,
            High = 40,
            Low = 39.5,
            Close = 39.7,
            Volume = 24602
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"MAY",
            Open = 39.7,
            High = 40,
            Low = 39.3,
            Close = 39.9,
            Volume = 42381
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"JUN",
            Open = 40.3,
            High = 40.7,
            Low = 39.8,
            Close = 39.9,
            Volume = 56883
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"JUL",
            Open = 40.1,
            High = 41.3,
            Low = 40.1,
            Close = 40.9,
            Volume = 50610
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"AUG",
            Open = 41.1,
            High = 41.2,
            Low = 40.4,
            Close = 40.5,
            Volume = 29637
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"SEP",
            Open = 39,
            High = 39.8,
            Low = 39,
            Close = 39.2,
            Volume = 34333
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"OCT",
            Open = 39.1,
            High = 39.4,
            Low = 38.9,
            Close = 39.2,
            Volume = 32006
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"NOV",
            Open = 39.3,
            High = 40,
            Low = 39,
            Close = 39.8,
            Volume = 33978
        });
        this.Add(new Stock2YearsItem()
        {
            Month = @"DEC",
            Open = 40.1,
            High = 40.4,
            Low = 39.9,
            Close = 40.4,
            Volume = 30616
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical fill">
        <IgbDataChart
        Name="chart"
        @ref="chart"
        ShouldAutoExpandMarginForInitialLabels="true"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsVerticalZoomEnabled="true"
        IsHorizontalZoomEnabled="true">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="Stock2Years"
            LabelLocation="AxisLabelsLocation.OutsideBottom"
            Label="Month"
            Interval="1"
            LabelExtent="30">
            </IgbCategoryXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            LabelLocation="AxisLabelsLocation.OutsideRight">
            </IgbNumericYAxis>

            <IgbFinancialPriceSeries
            Name="Series1"
            @ref="series1"
            Title="Stock Price"
            DisplayType="PriceDisplayType.Candlestick"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="Stock2Years"
            OpenMemberPath="Open"
            HighMemberPath="High"
            LowMemberPath="Low"
            CloseMemberPath="Close"
            VolumeMemberPath="Volume"
            ShowDefaultTooltip="true"
            TrendLineType="TrendLineType.QuarticFit"
            TrendLineBrush="dodgerblue"
            TrendLineDashArray="@(new double[] { 5, 5 })">
            </IgbFinancialPriceSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var chart = this.chart;
        var xAxis = this.xAxis;
        var yAxis = this.yAxis;
        var series1 = this.series1;

    }

    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbFinancialPriceSeries series1;

    private Stock2Years _stock2Years = null;
    public Stock2Years Stock2Years
    {
        get
        {
            if (_stock2Years == null)
            {
                _stock2Years = new Stock2Years();
            }
            return _stock2Years;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

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

無料で試してみる

その他のリソース

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

• チャート注釈
• チャートのハイライト表示

API リファレンス

IgbCategoryChart コンポーネントと IgbFinancialChart コンポーネントは、次の API プロパティを共有します:

• TrendLineBrushes
• TrendLinePeriod
• TrendLineThickness
• TrendLineType

IgbDataChart コンポーネントでは、シリーズのほとんどのタイプに次の API プロパティがあります:

• TrendLineBrush
• TrendLineDashArray
• TrendLinePeriod
• TrendLineThickness
• TrendLineType