65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Canvas 扩展绘制动态 ASP.NET Core Blazor 条形图

syed shanu
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (3投票s)

2020年1月3日

CPOL

6分钟阅读

viewsIcon

12431

downloadIcon

216

在本文中，我们将详细介绍如何使用 HTML5 Canvas Blazor 扩展为 ASP.NET Core Blazor Web 应用程序绘制自定义条形图。

引言

在本文中，我们将详细介绍如何使用 HTML5 Canvas Blazor 扩展为 ASP.NET Core Blazor Web 应用程序绘制自定义条形图。

如果您是 ASP.NET Core Blazor 新手，请查看我的文章 https://codeproject.org.cn/Articles/5253709/All-you-need-to-know-on-Blazor-app-and-create-ASP

在这里，我计划撰写一系列文章。在每篇文章中，我将详细介绍如何使用 HTML5 Canvas Blazor 扩展为 ASP.NET Core Blazor Web 应用程序绘制自定义图表。

在本系列中，我们将逐一详细介绍

  1. 使用 Blazor Canvas 扩展绘制动态条形图
  2. 使用 Blazor Canvas 扩展绘制动态折线图
  3. 使用 Blazor Canvas 扩展绘制动态条形图和折线图
  4. 使用 Blazor Canvas 扩展绘制动态散点图

背景

Using the Code

步骤 1：创建 ASP.NET Core Blazor Server 应用程序

安装完以上所有必需项后，请在桌面上点击开始 >> 所有程序 >> Visual Studio 2019 >> Visual Studio 2019。点击新建 >> 项目。

选择 Blazor 应用 并点击 下一步 按钮。

选择您的项目文件夹并输入您的项目名称，然后点击 创建 按钮。

选择 Blazor 服务器应用。

创建 ASP.NET Core Blazor Server 应用程序后，等待几秒钟。您将在解决方案资源管理器中看到以下结构。

在 Data 文件夹中，我们可以添加所有模型、DBContext 类、服务和控制器，我们将在本文中介绍。

在 Pages 文件夹中，我们可以添加所有组件文件.component 文件，所有文件都应以.razor 扩展名命名。

在 Shared 文件夹中，我们可以添加所有左侧菜单的NavMenu.razor 文件，并从MainLayout.razor 文件更改主内容。

在_Imports.razor文件中，我们可以看到已添加所有导入集，以便在所有组件页面中使用。

在 App.razor 文件中，我们将添加在浏览器中运行应用程序时默认显示的主组件。Appsertings.json 可用于添加连接字符串。

Startup.cs文件是一个重要文件，我们在此文件中添加所有端点，例如控制器端点、HTTP 客户端、添加要在启动Configuration方法中使用的服务和dbcontext。

运行以测试应用程序

运行应用程序时，我们可以看到左侧有导航，右侧包含数据。我们将看到默认的示例页面和菜单将显示在我们的 Blazor 网站中。我们可以使用这些页面，也可以删除它们并开始创建自己的页面。

步骤 2：安装包

要将 Blazor Canvas 扩展用于我们的 Blazor 应用程序，我们需要安装以下程序包

  • Blazor.Extensions.Canvas

右键单击解决方案，然后单击“管理 NuGet 程序包”。搜索所有程序包并安装所有必需的程序包，如下图所示

安装包后，我们可以在依赖项包中进行确认。

注意：添加 blazor.extensions.canvas.js 文件。

打开 _Host.cshtml 文件，并将以下代码添加到 head 标签内。

    <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>

步骤 3：创建模型类

接下来，我们需要创建 Model 类，以便在应用程序中使用，用于在条形图中绑定项目名称和项目数量。

右键单击 Data 文件夹，然后创建名为“ItemMaster.cs”的新类文件。

在该类中，我们添加与下面代码相同的属性字段名

     public String ItemName { get; set; }

     public int SaleCount { get; set; }

创建服务类

接下来，我们创建 ItemMasterService 类，以便使用具有项目名称和每个项目的销售数量的示例项目详细信息绑定图表结果。为此，我们右键单击 Data 文件夹，然后单击添加新项以添加我们的 ItemMasterService 类。

在此类中，我们创建一个方法来获取 ItemMaster 详细信息，其中包含 5 条示例记录，包含项目名称和每个项目的销售数量（随机值）。

public class ItemMasterService
    {
        public Task<ItemMaster[]> GetItemMasters()
        {
            var rng = new Random();
            int ivale = 0;
            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new ItemMaster
            {
                ItemName = "itm" + rng.Next(1, 100),
                SaleCount = rng.Next(20, 100),
            }).ToArray()); 
        }
    }

步骤 4：将服务添加到 Startup.cs

我们需要将我们创建的服务添加到Startup.cs的ConfigureServices方法中。

services.AddSingleton<ItemMasterService>();

步骤 5：使用客户端项目

首先，我们需要添加 Razor 组件页面。

添加 Razor 组件

要添加 Razor 组件页面，请右键单击 Client 项目中的 Pages 文件夹。单击添加 >> 新项 >> 选择 Razor 组件 >> 输入您的组件名称。此处，我们将名称命名为 DrawingSample.razor。

注意：所有组件文件都需要以* .razor*为扩展名。

在 Razor 组件页面中，代码分为三个部分：第一个是 Import 部分，我们在此导入在组件中使用的所有引用和模型；第二个是 HTML 设计和数据绑定部分；最后是我们用于调用所有 Web API 以绑定到 HTML 页面的函数部分，以及执行将在组件页面中显示的客户端业务逻辑。

导入部分

首先，我们在 Razor 视图页面中导入所有必需的支持文件和引用。在这里，我们首先导入了将在视图中使用的 Model 类，还导入了 Blazor Canvas 扩展，用于绘制我们自己的 Blazor 应用程序图表控件。

@page "/drawingsample"

@using Blazor.Extensions.Canvas
@using Blazor.Extensions;
@using Blazor.Extensions.Canvas.Canvas2D;
@using ClazorCharts.Data
@inject ItemMasterService MasterService

HTML 设计和数据绑定部分

接下来，我们设计 DrawingSample 详细信息页面以显示包含项目名称和每个项目销售数量的条形图。在这里，我们在 Blazor HTML 设计部分添加了 Blazor Extension HTML5 Canvas，用于绘制条形图。

<h3>Shanu - Draw Bar Chart using Blazor Canvas Extensions</h3>
<hr />  
<BECanvas Width="500" Height="500" @ref="_canvasReference"></BECanvas>

函数部分

函数部分用于获取服务结果，并将结果绑定到数组，然后绘制和绘制值以显示条形图。
在这里，我们首先声明 ItemsArray 来将 Item Master 的结果绑定到 BarChart。
接下来，我们创建一个 string 数组 pirChartColor，以便使用数组中的不同颜色绘制每个条形。
在 OnInitializedAsync 中，我们获取 ItemMasterService 的结果并将结果绑定到 ItemsArrys。
在 OnAfterRenderAsync 方法中，我们使用 C# 绘图对象绘制条形图到 Canvas。

@code {
    private Canvas2DContext _context;
    protected BECanvasComponent _canvasReference;
    ItemMaster[] itemsArrys;

    private static readonly string[] pirChartColor = new[]
      {
      "#3090C7", "#BDEDFF", "#F9B7FF", "#736AFF", "#78C7C7", 
      "#B048B5", "#4E387E","#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381",
         };

    protected override async Task OnInitializedAsync()
    {
        itemsArrys = await MasterService.GetItemMasters();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        int lastend = 0;
        int xSpace = 10;
        int XvalPosition = xSpace;
        int maxDataVal = itemsArrys.Max(row => row.SaleCount);

        int widthcalculation = 
            (Convert.ToInt32(_canvasReference.Width) - 100) / itemsArrys.Length;

        int chartHeight = Convert.ToInt32(_canvasReference.Height) - 40;

        this._context = await this._canvasReference.CreateCanvas2DAsync();
        int colorval = 0;

        // Draw the axises

        await this._context.BeginPathAsync();
        await this._context.MoveToAsync(xSpace, xSpace);

        // first Draw Y Axis

        await this._context.LineToAsync(xSpace, chartHeight);

        // Next draw the X-Axis
  }
 }
}

导航菜单

现在我们需要将这个新添加的 DrawingSample Razor 页面添加到我们的左侧导航。为此，请打开 Shared 文件夹并打开 NavMenu.cshtml 页面并添加菜单。

<li class="nav-item px-3">
            <NavLink class="nav-link" href="DrawingSample">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Bar Chart
            </NavLink>
        </li>

构建并运行应用程序

关注点

在此示例中，我们使用简单的方法显示 0 到 100 范围内的条形图。为了用于任何比例，我们可以找到每个条形的比例并绘制图表。此外，我们可以扩展此图表以绘制图例和其他详细信息。由于这是我们自己的图表，我们可以根据我们的需求添加任何功能。

历史

  • 2020 年 1 月 3 日：BlazorChartSrc.zip
© . All rights reserved.