Blazor Toolbar Overview

El componente Blazor barra de herramientas es un contenedor complementario para las operaciones de la interfaz de usuario que se usará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un ajuste preestablecido de propiedades y elementos de herramienta cuando se vincule a nuestros IgbDataChart componentes o IgbCategoryChart. Podrá crear herramientas personalizadas para su proyecto, lo que permitirá a los usuarios finales proporcionar cambios, ofreciendo una cantidad infinita de personalización.

Blazor Toolbar Example

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

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
</style>
<div class="container vertical">
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div id="aboveContentSplit">
        <div id="aboveContentLeftContainer">
            <IgbToolbar
            Name="toolbar"
            @ref="toolbar"
            Orientation="ToolbarOrientation.Horizontal">
            </IgbToolbar>

        </div>
        <div id="aboveContentRightContainer">
            <IgbLegend
            Name="legend"
            @ref="legend"
            Orientation="LegendOrientation.Horizontal">
            </IgbLegend>

        </div>
    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Line"
        IsHorizontalZoomEnabled="true"
        IsVerticalZoomEnabled="true"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        YAxisTitle="TWh"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
        IsTransitionInEnabled="true">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbLegend legend;
    private IgbToolbar toolbar;
    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/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Dependencies

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls
razor

Los siguientes módulos son necesarios cuando se utiliza IgbToolbar con el componente IgbDataChart y sus características.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbToolbarModule),
    typeof(IgbDataChartToolbarModule),
    typeof(IgbDataChartCoreModule),
    typeof(IgbDataChartCategoryModule),
    typeof(IgbDataChartAnnotationModule),
    typeof(IgbDataChartInteractivityModule),
    typeof(IgbDataChartCategoryTrendLineModule)
);
razor

También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbToolbar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

Usage

Tool Actions

La siguiente es una lista de los diferentes elementos IgbToolAction que puede agregar a la barra de herramientas.

• IgbToolActionButton
• IgbToolActionCheckbox
• IgbToolActionIconButton
• IgbToolActionIconMenu
• IgbToolActionLabel
• IgbToolActionNumberInput
• IgbToolActionRadio
• IgbToolActionSubPanel

Cada una de estas herramientas expone un OnCommand evento que se desencadena al hacer clic del mouse. Tenga en cuenta que es IgbToolActionIconMenu un envoltorio para otras herramientas que también se pueden envolver dentro de un IgbToolActionIconMenu.

Las herramientas nuevas y existentes se pueden reposicionar y marcar como ocultas usando las propiedades OverlayId, BeforeId y AfterId en el objeto IgbToolAction. ToolActions también expone una propiedad Visibility.

En el ejemplo siguiente se muestran un par de características. En primer lugar, puede agrupar herramientas en las IgbToolActionSubPanel herramientas integradas de ocultación, incluidas las acciones de la herramienta de menú ZoomReset y AnalyzeMenu. En este ejemplo, se agrega una nueva instancia de la acción de la herramienta ZoomReset y se coloca dentro de ZoomMenu mediante la propiedad the AfterId y asignándola a ZoomOut. También se resalta a través de la IsHighlighted propiedad de la herramienta. Esto asegurará que la nueva herramienta de restablecimiento se muestre rápidamente en la parte inferior del ZoomMenu.

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(IgbToolbarModule),
                typeof(IgbDataChartToolbarModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartCategoryTrendLineModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
</style>
<div class="container vertical">
    <div id="aboveContentSplit">
        <div id="aboveContentLeftContainer">
            <IgbToolbar
            Name="toolbar"
            @ref="toolbar"
            Orientation="ToolbarOrientation.Horizontal"
            OnCommand="ToolbarToggleAnnotations">
                <IgbToolActionIconMenu
                Name="MenuForSubPanelTool"
                @ref="menuForSubPanelTool"
                IconCollectionName="ChartToolbarIcons"
                IconName="analyze">
                    <IgbToolActionGroupHeader
                    Name="SubPanelGroup"
                    @ref="subPanelGroup"
                    CloseOnExecute="true"
                    Title="Visualizations"
                    Subtitle="Layers">
                    </IgbToolActionGroupHeader>

                    <IgbToolActionSubPanel
                    Name="CustomSubPanelTools"
                    @ref="customSubPanelTools">
                        <IgbToolActionCheckbox
                        Name="EnableTooltipsLabel"
                        @ref="enableTooltipsLabel"
                        Title="Enable Tooltips"
                        CommandId="EnableTooltips">
                        </IgbToolActionCheckbox>

                        <IgbToolActionCheckbox
                        Name="EnableCrosshairsLabel"
                        @ref="enableCrosshairsLabel"
                        Title="Enable Crosshairs"
                        CommandId="EnableCrosshairs">
                        </IgbToolActionCheckbox>

                        <IgbToolActionCheckbox
                        Name="EnableFinalValuesLabel"
                        @ref="enableFinalValuesLabel"
                        Title="Enable Final Values"
                        CommandId="EnableFinalValues">
                        </IgbToolActionCheckbox>

                    </IgbToolActionSubPanel>

                </IgbToolActionIconMenu>

                <IgbToolActionLabel
                Name="zoomResetLabel"
                @ref="zoomResetLabel"
                Title="Reset"
                AfterId="ZoomOut"
                IconName="reset"
                IconCollectionName="ChartToolbarIcons"
                CommandId="ZoomReset"
                IsHighlighted="true">
                </IgbToolActionLabel>

                <IgbToolActionLabel
                Name="zoomResetHidden"
                @ref="zoomResetHidden"
                OverlayId="ZoomReset"
                Visibility="Visibility.Collapsed">
                </IgbToolActionLabel>

                <IgbToolActionIconMenu
                Name="AnalyzeMenu"
                @ref="analyzeMenu"
                OverlayId="AnalyzeMenu"
                Visibility="Visibility.Collapsed">
                </IgbToolActionIconMenu>

                <IgbToolActionLabel
                Name="CopyMenu"
                @ref="copyMenu"
                OverlayId="CopyMenu"
                Visibility="Visibility.Collapsed">
                </IgbToolActionLabel>

            </IgbToolbar>

        </div>
        <div id="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="true"
        IsVerticalZoomEnabled="true"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

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

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America">
            </IgbLineSeries>

            <IgbLineSeries
            Name="LineSeries2"
            @ref="lineSeries2"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="Europe">
            </IgbLineSeries>

            <IgbLineSeries
            Name="LineSeries3"
            @ref="lineSeries3"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="China">
            </IgbLineSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;
        var menuForSubPanelTool = this.menuForSubPanelTool;
        var subPanelGroup = this.subPanelGroup;
        var customSubPanelTools = this.customSubPanelTools;
        var enableTooltipsLabel = this.enableTooltipsLabel;
        var enableCrosshairsLabel = this.enableCrosshairsLabel;
        var enableFinalValuesLabel = this.enableFinalValuesLabel;
        var zoomResetLabel = this.zoomResetLabel;
        var zoomResetHidden = this.zoomResetHidden;
        var analyzeMenu = this.analyzeMenu;
        var copyMenu = this.copyMenu;
        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 = () => {
            toolbar.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbToolbar toolbar;
    private IgbToolActionIconMenu menuForSubPanelTool;
    private IgbToolActionGroupHeader subPanelGroup;
    private IgbToolActionSubPanel customSubPanelTools;
    private IgbToolActionCheckbox enableTooltipsLabel;
    private IgbToolActionCheckbox enableCrosshairsLabel;
    private IgbToolActionCheckbox enableFinalValuesLabel;
    private IgbToolActionLabel zoomResetLabel;
    private IgbToolActionLabel zoomResetHidden;
    private IgbToolActionIconMenu analyzeMenu;
    private IgbToolActionLabel copyMenu;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;
    private IgbLineSeries lineSeries2;
    private IgbLineSeries lineSeries3;

    public void ToolbarToggleAnnotations(IgbToolCommandEventArgs args)
    {
        var target = this.chart;
        switch (args.Command.CommandId)
        {
            case "EnableTooltips":
                IgbSeries annotationSeries = null;
                foreach (var s in target.Series)
                {
                    if (s is IgbDataToolTipLayer)
                    {
                        annotationSeries = s;
                    }
                }

                if (annotationSeries == null) {
                    target.Series.Add(new IgbDataToolTipLayer());
                } else {
                    target.Series.Remove(annotationSeries);
                }
                break;
            case "EnableCrosshairs":
                IgbSeries crosshairSeries = null;

                foreach (var s in target.Series)
                {
                    if (s is IgbCrosshairLayer)
                    {
                        crosshairSeries = s;
                    }
                }

                if (crosshairSeries == null)
                {
                    target.Series.Add(new IgbCrosshairLayer());
                }
                else
                {
                    target.Series.Remove(crosshairSeries);
                }
                break;
            case "EnableFinalValues":
                IgbSeries finalValuesSeries = null;

                foreach (var s in target.Series)
                {
                    if (s is IgbFinalValueLayer)
                    {
                        finalValuesSeries = s;
                    }
                }

                if (finalValuesSeries == null)
                {
                    target.Series.Add(new IgbFinalValueLayer());
                }
                else
                {
                    target.Series.Remove(finalValuesSeries);
                }
                break;
    	}
    }

    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/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
cssコピー

Blazor Data Chart Integration

La barra de herramientas Blazor contiene una Target propiedad. Esto se utiliza para vincular un componente, como se IgbDataChart muestra en el código a continuación:

  <IgbToolbar
    Name="Toolbar"
    @ref="toolbar"
    Target="@chart">
  <IgbToolbar>

  <IgbDataChart
    Name="chart"
    @ref="chart">
  </IgbDataChart>
razor

Varios elementos y menús IgbToolAction preexistentes se vuelven disponibles cuando IgbDataChart se vincula con la barra de herramientas. Aquí hay una lista de las acciones de herramientas IgbDataChart integradas Blazor y su OverlayId asociado:

Acciones de zoom

• ZoomReset: un IgbToolActionLabel que invoca el método ResetZoom en el gráfico para restablecer el nivel de zoom a su posición predeterminada.
• ZoomMenu: un IgbToolActionIconMenu que expone dos elementos IgbToolActionLabel para invocar los métodos ZoomIn y ZoomOut en el gráfico para aumentar/disminuir el nivel de zoom del gráfico.

Acciones de tendencia

• AnalyzeMenu: un IgbToolActionIconMenu que contiene varias opciones para configurar diferentes opciones del gráfico.
• AnalyzeHeader: encabezado de una subsección.
• LinesMenu: un submenú que contiene varias herramientas para mostrar diferentes líneas horizontales discontinuas en el gráfico.
  • LinesHeader: encabezado de sección del submenú para las siguientes tres herramientas:
    • MaxValue: una IgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
    • MinValue: una IgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
    • Average: una IgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor promedio de la serie.
• TrendsMenu: un submenú que contiene herramientas para aplicar varias líneas de tendencia al área de trazado IgbDataChart.
  • TrendsHeader: encabezado de sección de submenú para las siguientes tres herramientas:
    • Exponencial: A IgbToolActionRadio que establece el TrendLineType en cada serie del gráfico en ExponentialFit.
    • Lineal: A IgbToolActionRadio que establece el TrendLineType en cada serie del gráfico en LinearFit.
    • Logarítmico: A IgbToolActionRadio que establece el TrendLineType en cada serie del gráfico en LogarithmicFit.
• HelpersHeader: encabezado de una subsección.
• SeriesAvg: una IgbToolActionCheckbox que agrega o elimina un IgbValueLayer a la colección de series del gráfico usando ValueLayerValueMode de tipo Average.
• ValueLabelsMenu: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones en el IgbDataChart área de la trama.
  • ValueLabelsHeader: encabezado de sección del submenú para las siguientes herramientas:
    • ShowValueLabels: un IgbToolActionCheckbox que alterna valores de puntos de datos mediante el uso de IgbCalloutLayer.
    • ShowLastValueLabel: un IgbToolActionCheckbox que alterna las anotaciones del eje del valor final mediante el uso de un IgbFinalValueLayer.
• ShowCrosshairs: una IgbToolActionCheckbox que alterna las anotaciones en forma de cruz al pasar el mouse a través de la propiedad CrosshairsDisplayMode del gráfico.
• ShowGridlines: una IgbToolActionCheckbox que alterna líneas de cuadrícula adicionales aplicando un MajorStroke al eje X.

Acción Guardar en imagen

• CopyAsImage: A IgbToolActionLabel que expone una opción para copiar el gráfico en el portapapeles.
• CopyHeader: Un encabezado de subsección.

SVG Icons

Al agregar herramientas manualmente, los iconos se pueden asignar mediante el RenderIconFromText método. Hay tres parámetros que se deben pasar en este método. El primero es el nombre de la colección de iconos definido en la herramienta, por ejemplo. IconCollectionName El segundo es el nombre del icono definido en la herramienta, por ejemplo IconName, seguido de la adición de la cadena SVG.

Data URL Icons

De manera similar a agregar svg, también puede agregar una imagen de icono desde una URL a través de la RegisterIconFromDataURL. El tercer parámetro del método se usaría para introducir una URL de cadena.

En el siguiente fragmento de código se muestran ambos métodos para agregar un icono.

<IgbToolActionLabel
    Title="Custom Icon"
    IconName="CustomIcon"
    IconCollectionName="CustomCollection">
</IgbToolActionLabel>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;

        if (firstRender) {
            this.ToolbarCustomIconOnViewInit();
        }
    }

    private IgbToolbar toolbar;

    public void ToolbarCustomIconOnViewInit()
    {
    	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
    	{
    		string icon =
    		@"
    			<svg width=""28px"" height=""28px"" stroke=""none"" viewBox=""0 0 3.5 3.5"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" aria-hidden=""true"" role=""img"" class=""iconify iconify--gis"" preserveAspectRatio=""xMidYMid meet""><path d=""M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z"" fill=""#000000"" fill-rule=""evenodd""/></svg>
    		";
    		this.toolbar.RegisterIconFromTextAsync("CustomCollection", "CustomIcon", icon);
    	}));
    }

}
razor

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}
typescript

}

```tsx
<IgrToolbar orientation="Vertical" />
autohotkey

Vertical Orientation

De forma predeterminada, la barra de herramientas Blazor se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente estableciendo la Orientation propiedad.

<IgbToolbar Orientation="ToolbarOrientation.Vertical" />
razor

El siguiente ejemplo demuestra la orientación vertical de la barra de herramientas Blazor.

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(IgbToolbarModule),
                typeof(IgbDataChartToolbarModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbAnnotationLayerProxyModule),
                typeof(IgbDataChartCategoryTrendLineModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="aboveContent">
        <IgbToolbar
        Name="toolbar"
        @ref="toolbar"
        Orientation="ToolbarOrientation.Vertical">
        </IgbToolbar>

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        IsHorizontalZoomEnabled="true"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

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

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America">
            </IgbLineSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

        this.BindElements = () => {
            toolbar.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbToolbar toolbar;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;

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

Color Editor

Puede agregar una herramienta de editor de color personalizada a la barra de herramientas Blazor, que también funcionará con el evento Command para realizar un estilo personalizado en la aplicación.

<IgbToolbar
Name="toolbar"
@ref="toolbar">
    <IgbToolActionColorEditor
    Title="Series Brush">
    </IgbToolActionColorEditor>
</IgbToolbar>
razor

En el ejemplo siguiente se muestra el estilo del pincel de la serie Blazor Gráfico de datos con la herramienta Editor de color.

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(IgbToolbarModule),
                typeof(IgbToolActionComboModule),
                typeof(IgbToolActionColorEditorModule),
                typeof(IgbDataChartToolbarModule),
                typeof(IgbDataLegendModule),
                typeof(IgbNumberAbbreviatorModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
</style>
<div class="container vertical">
    <div id="aboveContentSplit">
        <div id="aboveContentLeftContainer">
            <IgbToolbar
            Name="toolbar"
            @ref="toolbar"
            OnCommand="ColorEditorToggleSeriesBrush">
                <IgbToolActionColorEditor
                Title="Series Brush"
                Name="colorEditorTool"
                @ref="colorEditorTool"
                CommandId="ToggleSeriesBrush">
                </IgbToolActionColorEditor>

            </IgbToolbar>

        </div>
        <div id="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        IsHorizontalZoomEnabled="true"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

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

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America"
            MarkerType="MarkerType.None">
            </IgbLineSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

        this.BindElements = () => {
            toolbar.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbToolbar toolbar;
    private IgbToolActionColorEditor colorEditorTool;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;

    public void ColorEditorToggleSeriesBrush(IgbToolCommandEventArgs args)
    {
    	var target = this.chart;
        var color = args.Command.ArgumentsList[0].Value;
        switch (args.Command.CommandId)
        {
            case "ToggleSeriesBrush":
                IgbSeries series = target.ContentSeries[0];
                series.Brush = color.ToString();
            break;
        }

    }

    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/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
cssコピー

API References

• IgbToolbar
• IgbDataChart

Additional Resources

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub