Daten effektiv visualisieren: Fügen Sie Raster und Diagramme zur JavaScript-Pivot-Feldliste hinzu

TL;DR:Sehen wir uns an, wie man mit einer serverseitigen Engine eine Tabelle und ein Diagramm zur Feldliste der JavaScript-Pivot-Tabelle hinzufügt. Wir behandeln das Einrichten der Web-API, das Verbinden der Pivot-Feldliste mit der API und die Übergabe von Eingabedaten zum Rendern von Tabellen und Diagrammen. In diesem Blog wird außerdem gezeigt, wie die Komponenten basierend auf Benutzerinteraktionen dynamisch gefiltert und aktualisiert werden, um eine Datenvisualisierung in Echtzeit zu ermöglichen.

Die JavaScript-Pivot-Feldliste ist eine leistungsstarke Komponente, die ähnlich wie Microsoft Excel funktioniert. Sie können damit Felder hinzufügen oder entfernen und sie über verschiedene Achsen wie Spalten, Zeilen, Werte und Filter neu anordnen. Sortier- und Filteroptionen können auch zur Laufzeit dynamisch angewendet werden.

In diesem Blog sehen wir die detaillierten Schritte zum Erstellen einer Tabelle und eines Diagramms mithilfe der Feldlistenkomponente der JavaScript-Pivot-Tabelle mit unserer serverseitigen Engine. Hier werden wir nicht die integrierten Raster- und Diagrammfunktionen der Pivot-Tabelle verwenden. Stattdessen fügen wir die Syncfusion JavaScript DataGrid- und Charts-Komponenten hinzu, um Daten effektiv zu visualisieren.

Dazu müssen wir mithilfe einer serverseitigen Engine eine Feldliste erstellen.

Was ist eine serverseitige Engine?

Die serverseitige Engine kann sich direkt mit Ihrer Datenquelle verbinden, rohe Eingabedaten sammeln und regelmäßig alle Pivot-orientierten Berechnungen intern durchführen, basierend auf dem Bericht, der von der JavaScript-Pivot-Tabelle über UI-Interaktionen bereitgestellt wird. Es überträgt dann nur aggregierte Daten für die Pivot-Tabelle oder das Pivot-Diagramm an die Client-Seite (Browser).

Hinweis:Weitere Einzelheiten finden Sie unter Implementierung der serverseitigen Engine in der Dokumentation zur JavaScript-Pivottabelle.

Schritte zum Erstellen einer Pivot-Feldliste in einer ASP.NET Core-App

Folgen Sie diesen Schritten, um eine Pivot-Feldliste in einer ASP.NET Core-App zu erstellen:

Schritt 1: Erstellen eines WebAPI-Controllers

Öffnen Sie zunächst Visual Studio und erstellen Sie eine leere ASP.NET Core-App. Siehe folgendes Bild.

Erstellen Sie dann einen leeren WebAPI-Controller und benennen Sie ihn als PivotController. Siehe folgendes Bild.

Schritt 2: Installieren Sie das NuGet-Paket Syncfusion.Pivot.Engine

Um die serverseitige Engine zu verwenden, installieren Sie das NuGet-Paket Syncfusion.Pivot.Engine aus der NuGet-Galerie, wie im folgenden Bild gezeigt.

Schritt 3: Konfigurieren des Web-API-Controllers

Um die Pivot-Feldliste zu rendern, fügen Sie den folgenden Code zu den Dateien PivotController.cs bzw. Program.csauf der Serverseite hinzu.

Im PivotController weisen wir der Eigenschaft PivotEngine.Datain der Methode GetPivotValuesleere Daten zu, die die anzuzeigenden Felder enthält in der Pivot-Feldliste. Wir können die Felder mithilfe von Collection, JSON, CSV, DataTableoder DynamicDatenquellen generieren. Hier haben wir ExpandoObject (Dynamic) zum Zuweisen von Daten verwendet.

[PivotController.cs]

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Syncfusion.Pivot.Engine;
using System.Diagnostics.Metrics;
using System.Dynamic;

namespace PivotController.Controllers
{
    [Route("api/[controller]")]
    public class PivotController : Controller
    {
        private PivotEngine<ExpandoObject> PivotEngine = new PivotEngine<ExpandoObject>();

        [Route("/api/pivot/post")]
        [HttpPost]
        public async Task<object> Post([FromBody] object args)
        {
            FetchData param = JsonConvert.DeserializeObject<FetchData>(args.ToString());
            if (param.Action == "fetchFieldMembers")
            {
                return await GetMembers(param);
            }
            else
            {
                return await GetPivotValues(param);
            }
        }

        private async Task<object> GetMembers(FetchData param)
        {
            Dictionary<string, object> returnValue = new Dictionary<string, object>();
            if (param.MemberName == "Year")
            {
                returnValue["memberName"] = param.MemberName;
                Dictionary<string, Members> result = new Dictionary<string, Members>();
                result.Add("FY 2005", new Members()
                {
                    Caption = "FY 2005",
                    Name = "FY 2005",
                    IsSelected = true
                });
                result.Add("FY 2006", new Members()
                {
                    Caption = "FY 2006",
                    Name = "FY 2006",
                    IsSelected = true
                });
                result.Add("FY 2007", new Members()
                {
                    Caption = "FY 2007",
                    Name = "FY 2007",
                    IsSelected = false
                });
                result.Add("FY 2008", new Members()
                {
                    Caption = "FY 2008",
                    Name = "FY 2008",
                    IsSelected = false
                });
                returnValue["members"] = JsonConvert.SerializeObject(result);
            }
            return returnValue;
        }

        private async Task<object> GetPivotValues(FetchData param)
        {
            List<ExpandoObject> listData = new List<ExpandoObject>();
            dynamic d = new ExpandoObject();
            d.ProductID = "";
            d.Year = "";
            d.Country = "";
            d.Product = "";
            d.Price = 0;
            d.Sold = 0;
            listData.Add(d);
            PivotEngine.Data = listData;
            EngineProperties engine = await PivotEngine.GetEngine(param);
            Dictionary<string, object> result = PivotEngine.GetSerializedPivotValues();
            result["pivotCount"] = "";
            result["pivotValue"] = "";
            result["data"] = new PivotViewData().GetVirtualData(1000, param);
            return result;
        }

        public class PivotViewData
        {
            public string ProductID { get; set; }
            public string Country { get; set; }
            public string Product { get; set; }
            public double Sold { get; set; }
            public double Price { get; set; }
            public string Year { get; set; }

            public List<PivotViewData> GetVirtualData(int count, FetchData param)
            {
                List<PivotViewData> VirtualData = new List<PivotViewData>();

                for (int i = 1; i <= count; i++)
                {
                    PivotViewData p = new PivotViewData
                    {
                        ProductID = "PRO-" + (count + i),
                        Year = param.Action == "onFilter" ? param.FilterItem.Items[new Random().Next(param.FilterItem.Items.Length)] : (new string[] { "FY 2015", "FY 2016", "FY 2017", "FY 2018", "FY 2019" })[new Random().Next(5)],
                        Country = (new string[] { "Canada", "France", "Australia", "Germany", "France" })[new Random().Next(5)],
                        Product = (new string[] { "Car", "Van", "Bike", "Flight", "Bus" })[new Random().Next(5)],
                        Price = (3.4 * i) + 500,
                        Sold = (i * 15) + 10
                    };
                    VirtualData.Add(p);
                }
                return VirtualData;
            }
        }
    }
}

[Program.cs]

var builder = WebApplication.CreateBuilder(args);
var CustomOrigins = "_customOrigins";

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddCors(options =>
{
    options.AddPolicy(CustomOrigins,
    builder =>
    {
        builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();
app.UseCors(CustomOrigins);
app.Run();

Sobald der Code aktualisiert ist, führen Sie die App in IIS aus. Es wird unter https://localhost:44372/api/pivot/post.

zugänglich sein

Schritt 4: Verbinden Sie die JavaScript-Pivot-Feldliste mit dem WebAPI-Controller

Um die serverseitige Engine mit der JavaScript-Pivot-Feldliste zu verbinden, erstellen Sie ein einfaches eigenständiges JavaScript-Pivot-Feld. Ordnen Sie die URL der gehosteten Web-API, https://localhost:44372/api/pivot/post, der Pivot-Tabelle in der Datei index.js zu, indem Sie die URL-Eigenschaft unter dataSourceSettings verwenden.

Siehe das folgende Codebeispiel.

[pivot.js]

var fieldlistObj = new ej.pivotview.PivotFieldList({
    dataSourceSettings: {
       // Here, we need to use the service URL.
        url: 'https://localhost:44372/api/pivot/post',
        mode: 'Server',
        type: 'JSON',
        allowMemberFilter: true,
        rows: [{ name: 'Year' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }],
        fieldMapping: [
            { name: 'Sold', type: 'Sum' },
            { name: 'Price', type: 'Sum' },
        ],
    },
    renderMode: 'Fixed',
});
fieldlistObj.appendTo('#PivotFieldList');

Sobald der obige Code ausgeführt wird, erscheint die Pivot-Feldliste, wie im folgenden Bild gezeigt.

Verbinden Sie die JavaScript-Pivot-Feldliste mit dem WebAPI-Controller

Schritt 5: Übergabe der Eingabedaten an die JavaScript-Pivot-Feldliste

Basierend auf dem Bericht, den wir in die JavaScript-Pivot-Feldliste eingebunden haben, können wir Daten aus der Datenbank abrufen und an den Client zurückgeben.

For example, we used the PivotViewDataclass to create a sample list (Collection) data source and returned it to the client through the GetPivotValues()method.

The data can be retrieved by calling the Pivot Field List’s afterServiceInvoke event. Then, the Grid and Chartcomponents can be rendered with the data obtained from that event.

Refer to the following code example to render the DataGrid and Charts components based on the input data in the JavaScript Pivot Field List.

[pivot.js]

var fieldlistObj = new ej.pivotview.PivotFieldList({
    dataSourceSettings: {
        url: 'https://localhost:44372/api/pivot/post',
        mode: 'Server',
        type: 'JSON',
        allowMemberFilter: true,
        rows: [{ name: 'Year' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }],
        fieldMapping: [
            { name: 'Sold', type: 'Sum' },
            { name: 'Price', type: 'Sum' },
        ],
    },
    renderMode: 'Fixed',
    afterServiceInvoke: function (args) {
        if (args.action != "fetchFieldMembers") {
            data = JSON.parse(args.response).data;
            grid.dataSource = data;
            grid.columns = getColumns();
            chart.series[0].dataSource = data;
        }
    }
});
fieldlistObj.appendTo('#PivotFieldList');

var grid = new ej.grids.Grid({
    allowSelection: true,
    allowFiltering: true,
    allowSorting: true,
    filterSettings: { type: 'Menu' },
    selectionSettings: {
        persistSelection: true,
        type: 'Multiple',
        checkboxOnly: true,
    },
    enableHover: false,
    enableHeaderFocus: true,
    height: 250
});
grid.appendTo('#Grid');

var chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category',
        labelRotation: 90,
        zoomFactor: 0.1
    },
    chartArea: { border: { width: 0 } },
    primaryYAxis: {
        title: 'Units Sold'
    },
    series: [
        {
            type: 'Column',
            xName: 'productID',
            width: 2,
            yName: 'sold',
            name: 'Sales',
        },
    ],
    zoomSettings: {
        enableScrollbar: true
    },
    title: 'Sales Analysis',
    width: '100%',
    tooltip: { enable: true, shared: true },
    legendSettings: { enableHighlight: true },
});
chart.appendTo('#Chart');

function getColumns() {
    var report = {};
    report[0] = fieldlistObj.dataSourceSettings.rows;
    report[1] = fieldlistObj.dataSourceSettings.columns;
    report[2] = fieldlistObj.dataSourceSettings.values;
    report[3] = fieldlistObj.dataSourceSettings.filters;
    var pos = 0;
    var columns = [];
    while (pos < 4) {
        if (report[pos]) {
            for (var cnt = 0; cnt < report[pos].length; cnt++) {
                var field = report[pos][cnt];
                var column = {
                    field: field.name,
                    headerText: field.caption ? field.caption : field.name,
                    width: 150,
                    textAlign: 'Center',
                };
                columns.push(column);
            }
        }
        pos++;
    }
    return columns;
}

Refer to the following output image.

Creating the Grid and Chart based on the input provided in the JavaScript Pivot Field List

How does the server-side engine work?

Every action in the JavaScript Pivot Field List, such as adding or removing fields, rearranging them across different axes, including columns, rows, values, and filters, and dynamically sorting and filtering options, sends an updated report to the server at runtime. Based on that, we can retrieve data from the database and return it to the client side, enabling us to refresh both Grid and Chart components with the new data.

Updating the Grid and Chart with filtered data

Let’s walk through how to update the Grid and Chart by filtering the field list. When we click the filter icon in a field to which we’ve bound the data source, the server ( PivotController) receives a request with the action name fetchFieldMembersand the name of the specified field. Based on that, we can use the GetMemebers()method to pass the members to the filter dialog.

Refer to the following code example to know how the server-side engine handles this filtering process.

[PivotController.cs]

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Syncfusion.Pivot.Engine;
using System.Diagnostics.Metrics;
using System.Dynamic;

namespace PivotController.Controllers
{
    [Route("api/[controller]")]
    public class PivotController : Controller
    {
        private PivotEngine<ExpandoObject> PivotEngine = new PivotEngine<ExpandoObject>();

        [Route("/api/pivot/post")]
        [HttpPost]
        public async Task<object> Post([FromBody] object args)
        {
            FetchData param = JsonConvert.DeserializeObject<FetchData>(args.ToString());
            if (param.Action == "fetchFieldMembers")
            {
                return await GetMembers(param);
            }
            else
            {
                return await GetPivotValues(param);
            }
        }

        private async Task<object> GetMembers(FetchData param)
        {
            Dictionary<string, object> returnValue = new Dictionary<string, object>();
            if (param.MemberName == "Year")
            {
                returnValue["memberName"] = param.MemberName;
                Dictionary<string, Members> result = new Dictionary<string, Members>();
                result.Add("FY 2015", new Members()
                {
                    Caption = "FY 2015",
                    Name = "FY 2015",
                    IsSelected = true
                });
                result.Add("FY 2016", new Members()
                {
                    Caption = "FY 2016",
                    Name = "FY 2016",
                    IsSelected = true
                });
                result.Add("FY 2017", new Members()
                {
                    Caption = "FY 2017",
                    Name = "FY 2017",
                    IsSelected = true
                });
                result.Add("FY 2018", new Members()
                {
                    Caption = "FY 2018",
                    Name = "FY 2018",
                    IsSelected = true
                });
                returnValue["members"] = JsonConvert.SerializeObject(result);
            }
            return returnValue;
        }
}

After executing the above code, the members will be displayed in the filter dialog, as shown in the following image.

Displaying filter members in the JavaScript Pivot Field List

The members can then be filtered using the filter dialog. The filtered members are sent to the server along with their field names. Based on the filtered members, we can fetch data from the database and return it to the client to refresh the Grid and Chart components.

For example, we have filtered the Yearfield, as shown in the following image.

Filtering data via the filter dialog in JavaScript Pivot Field List

The filtered members FY 2015and FY 2018will be sent to the server, along with the field name Year. So, we can use that information to filter and retrieve data from the database via the afterServiceInvokeevent, which we can then return to the client to refresh the Grid and Chart components.

Once the filtered data from the database has been assigned to them, the grid and chart will look like this.

Updating the Grid and Chart in the JavaScript Pivot Field List with the filtered data

GitHub reference

For more details, check out the Adding Grids and Charts in JavaScript Pivot Field List GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve seen how to add the DataGrid and Charts component to the JavaScript Pivot Table’s Field List to effectively visualize data. This approach can also be used to integrate Syncfusion’s other JavaScript data visualization components. Follow the steps outlined in this blog, and let us know your thoughts in the comments!

For existing customers, the latest version of Essential Studio can be downloaded from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out the available features.

For any questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Blog berkaitan

• Buat Gambarajah Perancang Lantai Interaktif Dengan Mudah Menggunakan Pustaka Rajah JavaScript
• Segerakkan Kawalan JavaScript Dengan Mudah Menggunakan DataManager
• Mengoptimumkan Produktiviti: Mengintegrasikan Salesforce dengan Penjadual JavaScript
• Optimumkan Pengurusan Memori dalam Jadual Pangsi JavaScript: Amalan dan Petua Terbaik

Das obige ist der detaillierte Inhalt vonDaten effektiv visualisieren: Fügen Sie Raster und Diagramme zur JavaScript-Pivot-Feldliste hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!