Blazor チャート ツールチップ

Blazor チャートでは、ツールチップはバインドされたデータに関する詳細を提供し、エンドユーザーがデータ ポイントにカーソルを合わせるとポップアップで表示されます。ツールチップは、IgbCategoryChart、IgbFinancialChart、および IgbDataChart コンポーネントでサポートされています。

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

無料で試してみる

Blazor チャート ツールチップのタイプ

次の例は、開始時に ToolTipType プロパティを "Default" に設定することでツールチップが有効にした縦棒チャートを示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。

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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
    public string Franchise { get; set; }
    public double TotalRevenue { get; set; }
    public double HighestGrossing { get; set; }
}

public class HighestGrossingMovies
    : List<HighestGrossingMoviesItem>
{
    public HighestGrossingMovies()
    {
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Marvel Universe",
            TotalRevenue = 22.55,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Star Wars",
            TotalRevenue = 10.32,
            HighestGrossing = 2.07
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Harry Potter",
            TotalRevenue = 9.19,
            HighestGrossing = 1.34
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Avengers",
            TotalRevenue = 7.76,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Spider Man",
            TotalRevenue = 7.22,
            HighestGrossing = 1.28
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"James Bond",
            TotalRevenue = 7.12,
            HighestGrossing = 1.11
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="ToolTipType"
            Name="ToolTipTypeEditor"
            @ref="toolTipTypeEditor"
            Label="ToolTip Type: "
            PrimitiveValue="@("Data")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Column"
        DataSource="HighestGrossingMovies"
        XAxisInterval="1"
        YAxisTitle="Billions of U.S. Dollars"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        CrosshairsSnapToData="true">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

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

    private HighestGrossingMovies _highestGrossingMovies = null;
    public HighestGrossingMovies HighestGrossingMovies
    {
        get
        {
            if (_highestGrossingMovies == null)
            {
                _highestGrossingMovies = new HighestGrossingMovies();
            }
            return _highestGrossingMovies;
        }
    }

}razorコピー

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

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

ToolTipType プロパティは構成可能であり、次のいずれかのオプションに設定できます。

プロパティの値	説明
Default ツールチップ	ツールチップは、ポインタがその上に位置されると、単一の項目のツールチップを表示します。
Data ツールチップ	チャートのすべてのシリーズのデータ ツールチップを表示します。
Item ツールチップ	ツールチップは、ポインタが位置されているカテゴリの各データ項目のツールチップを表示します。
Category ツールチップ	ツールチップはポインターがデータ ポイント上に配置されたときにすべてのデータ ポイントに対してツールチップを表示できます。

Blazor チャート ツールチップ テンプレート

組み込みタイプのツールチップがいずれも要件に一致しない場合は、独自のツールチップを作成して、シリーズ タイトル、データ値、および軸値を表示およびスタイル設定できます。次のセクションでは、さまざまなタイプの Blazor チャートでこれを行う方法を示します。

カテゴリ チャートのカスタム ツールチップ

この例は、Blazor IgbCategoryChart コントロールですべてのシリーズのカスタム ツールチップを作成する方法を示しています。Blazor IgbFinancialChart コントロールのカスタム ツールチップにも同じロジックを適用できることに注意してください。

EXAMPLE

MODULES

DATA

RAZOR

JS

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(IgbLegendModule),
                typeof(IgbInputModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class FilmFranchiseInfo
    {
        public string Franchise { get; set; }
        public double TotalRevenue { get; set; }
        public double HighestGrossing { get; set; }
    }

    public class FilmFranchiseData : List<FilmFranchiseInfo>
    {
        public FilmFranchiseData()
        {
            Add(new FilmFranchiseInfo { Franchise = "Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 });
            Add(new FilmFranchiseInfo { Franchise = "Star Wars",       TotalRevenue = 10.32, HighestGrossing = 2.07 });
            Add(new FilmFranchiseInfo { Franchise = "Harry Potter",    TotalRevenue = 9.19,  HighestGrossing = 1.34 });
            Add(new FilmFranchiseInfo { Franchise = "Avengers",        TotalRevenue = 7.76,  HighestGrossing = 2.8 });
            Add(new FilmFranchiseInfo { Franchise = "Spider Man",      TotalRevenue = 7.22,  HighestGrossing = 1.28 });
            Add(new FilmFranchiseInfo { Franchise = "James Bond",      TotalRevenue = 7.12,  HighestGrossing = 1.11 });
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options vertical">
        <span class="legend-title">Highest Grossing Movie Franchises</span>
        <div class="legend">
            <IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
        </div>
    </div>
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbCategoryChart Height="100%" Width="100%"
                           DataSource="Data"
                           IsTransitionInEnabled="true" XAxisInterval="1"
                           ChartType="CategoryChartType.Column"
                           ToolTipType="ToolTipType.None"
                           SeriesPointerEnterScript="onCategoryChatTooltipCreated"
                           SeriesAddedScript="onCategoryChatTooltipSeriesAdded">
            </IgbCategoryChart>
        }
    </div>
</div>

@code {
    

    private List<FilmFranchiseInfo> Data = new FilmFranchiseData();

    private IgbLegend _Legend;
    private IgbLegend Legend
    {
        get { return _Legend; }
        set { _Legend = value; StateHasChanged(); }
    }

}razorコピー

function onCategoryChatTooltipCreated(o, e) {
    console.log("onCategoryChatTooltipCreated ");
}
igRegisterScript("onCategoryChatTooltipCreated", onCategoryChatTooltipCreated, false);

function onCategoryChatTooltipSeriesAdded(o, e) {
    console.log("onCategoryChatTooltipSeriesAdded");

    if (e.series) {
        e.series.tooltipTemplate = createCategoryChatTooltipTooltip;
        //console.log("onCategoryChatTooltipSeriesAdded tooltipTemplate");
    }
}
igRegisterScript("onCategoryChatTooltipSeriesAdded", onCategoryChatTooltipSeriesAdded, false);

function createCategoryChatTooltipTooltip(context) {

    //console.log("createCategoryChatTooltipTooltip ");

    if (!context) return null;

    var dataItem = context.item;
    if (!dataItem) return null;

    var tooltipItem1 = document.createElement("div");
    tooltipItem1.innerHTML = "Franchise: " + dataItem.Franchise;
    tooltipItem1.className = "tooltipTitle";

    var tooltipItem2 = document.createElement("div");
    tooltipItem2.innerHTML = "Revenue of All Movies: " + dataItem.TotalRevenue;
    tooltipItem2.className = "tooltipLbl";

    var tooltipItem3= document.createElement("div");
    tooltipItem3.innerHTML = "Highest Grossing Movie: $" + dataItem.HighestGrossing;
    tooltipItem3.className = "tooltipLbl";

    var tooltip = document.createElement("div");
    tooltip.className = "tooltipVertical";
    tooltip.appendChild(tooltipItem1);
    tooltip.appendChild(tooltipItem2);
    tooltip.appendChild(tooltipItem3);

    return tooltip;
}jsコピー

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

データ チャートのカスタム ツールチップ

この例は、Blazor データ チャート コントロールで各シリーズのカスタム ツールチップを作成する方法を示しています。

EXAMPLE

MODULES

DATA

RAZOR

JS

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(IgbDataChartInteractivityModule),
                typeof(IgbColumnSeriesModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public static class EnergyProductionData
    {
        public class Energy
        {
            public string Country { get; set; }
            public double Coal { get; set; }
            public double Oil { get; set; }
            public double Gas { get; set; }
            public double Nuclear { get; set; }
            public double Hydro { get; set; }
        }

        public static List<Energy> Generate()
        {
            var data = new List<Energy>() {
                new Energy { Country = "Canada", Coal = 400, Oil = 100, Gas = 175, Nuclear = 225, Hydro = 350 },
                new Energy { Country = "China", Coal = 925, Oil = 200, Gas = 350, Nuclear = 400, Hydro = 625 },
                new Energy { Country = "Russia", Coal = 550, Oil = 200, Gas = 250, Nuclear = 475, Hydro = 425 },
                new Energy { Country = "Australia", Coal = 450, Oil = 100, Gas = 150, Nuclear = 175, Hydro = 350 },
                new Energy { Country = "United States", Coal = 800, Oil = 250, Gas = 475, Nuclear = 575, Hydro = 750 },
                new Energy { Country = "France", Coal = 375, Oil = 150, Gas = 350, Nuclear = 275, Hydro = 325 }
            };
            return data;
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
        @if (Data != null)
        {
          <IgbDataChart Height="100%" Width="100%" Subtitle="Energy Source of Biggest Countries"
                     IsHorizontalZoomEnabled="false" IsVerticalZoomEnabled="false"
                     SeriesMouseEnterScript="onSeriesMouseEnter">
              @*note the onSeriesMouseEnter" function is implemented .JS file in wwwroot folder*@

              <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Country"></IgbCategoryXAxis>
              <IgbNumericYAxis  Name="yAxis"></IgbNumericYAxis>

              <IgbColumnSeries Title="Coal" XAxisName="xAxis" YAxisName="yAxis" ValueMemberPath="Coal"
                            DataSource="Data" ShowDefaultTooltip="false"/>
              <IgbColumnSeries Title="Hydro" XAxisName="xAxis" YAxisName="yAxis" ValueMemberPath="Hydro"
                            DataSource="Data" ShowDefaultTooltip="false"/>
              <IgbColumnSeries Title="Nuclear" XAxisName="xAxis" YAxisName="yAxis" ValueMemberPath="Nuclear"
                            DataSource="Data" ShowDefaultTooltip="false"/>
              <IgbColumnSeries Title="Gas" XAxisName="xAxis" YAxisName="yAxis" ValueMemberPath="Gas"
                            DataSource="Data" ShowDefaultTooltip="false"/>
              <IgbColumnSeries Title="Oil" XAxisName="xAxis" YAxisName="yAxis" ValueMemberPath="Oil"
                            DataSource="Data" ShowDefaultTooltip="false"/>
          </IgbDataChart>

        }
</div>

@code {

    private List<EnergyProductionData.Energy> Data;

    protected override void OnInitialized()
    {

        this.Data = EnergyProductionData.Generate();
    }
}razorコピー

function onSeriesMouseEnter(o, e) {
    if (e.series.tooltipTemplate === null ||
        e.series.tooltipTemplate === undefined) {
        e.series.tooltipTemplate = createDataChartTooltip;
        console.log("onSeriesMouseEnter");
    }
}
igRegisterScript("onSeriesMouseEnter", onSeriesMouseEnter, false);

function createDataChartTooltip(context) {
    if (!context) return null;

    var dataItem = context.item;
    if (!dataItem) return null;

    var dataSeries = context.series;
    if (!dataSeries) return null;

    var tooltip = document.createElement("div");
    tooltip.className = "ui-tooltip-content";

    var title = document.createElement("div");
    title.innerHTML = dataItem.Country + " Production";
    title.className = "tooltipTitle";
    tooltip.appendChild(title);

    var line1 = createDataChartTooltipLine(dataSeries, "Coal", dataItem.Coal);
    var line2 = createDataChartTooltipLine(dataSeries, "Hydro", dataItem.Hydro);
    var line3 = createDataChartTooltipLine(dataSeries, "Nuclear", dataItem.Nuclear);
    var line4 = createDataChartTooltipLine(dataSeries, "Gas", dataItem.Gas);
    var line5 = createDataChartTooltipLine(dataSeries, "Oil", dataItem.Oil);

    tooltip.appendChild(line1);
    tooltip.appendChild(line2);
    tooltip.appendChild(line3);
    tooltip.appendChild(line4);
    tooltip.appendChild(line5);

    return tooltip;
}

function createDataChartTooltipLine(dataSeries, dataName, dataValue) {

    var label = document.createElement("label");
    label.innerHTML = dataName + ":";
    label.className = "tooltipLbl";
    label.style.width = "4rem";

    var value = document.createElement("label");
    value.innerHTML = dataValue;
    value.className = "tooltipVal";

    var line = document.createElement("div");
    line.className = "tooltipHorizontal";

    // applying conditional styling based on mapping of the current series
    var isMatching = dataSeries.valueMemberPath == dataName;
    if (isMatching)
        line.style.color = dataSeries.actualBrush;
    else
        line.style.color = "black";

    line.appendChild(label);
    line.appendChild(value);
    return line;
}
jsコピー

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

その他のリソース

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

• チャート注釈
• チャート マーカー

API リファレンス

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

• ToolTipType

IgbDataChart コンポーネントでは、以下の API コンポーネントおよびプロパティを使用できます:

• IgbDataToolTipLayer
• IgbItemToolTipLayer
• IgbCategoryToolTipLayer
• ShowDefaultToolTip