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 PivotEngine = new PivotEngine(); [Route("/api/pivot/post")] [HttpPost] public async Task
登入後複製
[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();
要將伺服器端引擎連接到 JavaScript 資料透視欄位列表,請建立一個簡單的獨立 JavaScript 資料透視欄位。使用 dataSourceSettings 下的 url 屬性將託管 Web API 的 URLhttps://localhost:44372/api/pivot/post對應到index.js檔案中的資料透視表。
請參考以下程式碼範例。
[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');
登入後複製
執行上述程式碼後,將出現透視欄位列表,如下圖所示。
將 JavaScript 資料透視欄位清單與 WebAPI 控制器連接
第 5 步:將輸入資料傳遞到 JavaScript 資料透視欄位列表
根據我們在 JavaScript Pivot Field List 中綁定的報表,我們可以從資料庫中檢索資料並將其傳回給客戶端。
For example, we used thePivotViewDataclass to create a sample list (Collection) data source and returned it to the client through theGetPivotValues()method.
The data can be retrieved by calling the Pivot Field List’safterServiceInvokeevent. Then, theGridandChartcomponents 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.
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 namefetchFieldMembersand the name of the specified field. Based on that, we can use theGetMemebers()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 PivotEngine = new PivotEngine(); [Route("/api/pivot/post")] [HttpPost] public async Task Post([FromBody] object args) { FetchData param = JsonConvert.DeserializeObject(args.ToString()); if (param.Action == "fetchFieldMembers") { return await GetMembers(param); } else { return await GetPivotValues(param); } } private async Task GetMembers(FetchData param) { Dictionary returnValue = new Dictionary(); if (param.MemberName == "Year") { returnValue["memberName"] = param.MemberName; Dictionary result = new Dictionary(); 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 theYearfield, as shown in the following image.
Filtering data via the filter dialog in JavaScript Pivot Field List
The filtered membersFY 2015andFY 2018will be sent to the server, along with the field nameYear. So, we can use that information to filter and retrieve data from the database via theafterServiceInvokeevent, 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!
Blogs connexes
Créez facilement des diagrammes de planificateur d'étage interactifs à l'aide de la bibliothèque de diagrammes JavaScript
Synchronisez sans effort les contrôles JavaScript à l'aide de DataManager
Optimiser la productivité : intégrer Salesforce avec JavaScript Scheduler
Optimiser la gestion de la mémoire dans le tableau croisé dynamique JavaScript : bonnes pratiques et astuces