Blazor 차트 도구 설명

Blazor 차트에서 툴팁은 바인딩된 데이터에 대한 세부 정보를 제공하며 최종 사용자가 데이터 포인트 위로 마우스를 가져가면 팝업으로 렌더링됩니다. 툴팁은 IgbCategoryChart, IgbFinancialChart 및 IgbDataChart 컨트롤에서 지원됩니다.

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

無料で試してみる

Blazor 차트 도구 설명 유형

Blazor Chart는 ToolTipType 속성을 설정하여 툴팁을 활성화할 수 있는 세 가지 유형의 툴팁을 제공합니다. 다음 예에서는 툴팁 유형을 변경하는 데 사용할 수 있는 콤보 상자가 있는 기둥 차트 보여줍니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

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 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

<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