目录
步骤1：创建ASP.NET Core Blazor服务器应用程序
介绍
在今天的文章中，我们将看到如何使用HTML5 Canvas和ASP.NET Core Blazor Web应用程序绘制自己的气泡图。
背景
使用代码
步骤1：创建ASP.NET Core Blazor服务器应用程序
安装上面列出的所有必备组件后，单击桌面上的开始 >> 程序 >> Visual Studio 2019 >> Visual Studio 2019。单击新建 >> 项目。
选择Blazor App，然后单击下一步按钮。
选择您的项目文件夹并输入您的项目名称，然后单击创建按钮。
选择Blazor服务器应用程序。
创建ASP.NET Core Blazor服务器应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。
在Data文件夹中，我们可以添加所有模型、DBContext类、服务和控制器，我们将在本文中看到。
在Pages文件夹中，我们可以添加我们的所有组件files.component文件，都应该有.razor扩展名的文件名。
在Shared文件夹中，我们可以添加所有左侧菜单形式的NavMenu.razor文件，并改变来自MainLayout.razor文件的主要内容。
在_Imports.razor文件中，我们可以看到已经添加了所有导入集，以便在所有组件页面中使用。
在App.razor文件中，我们将添加要在浏览器中运行时默认显示的主要组件。可用Appsertings.json添加连接字符串。
Startup.cs文件是一个重要文件，我们在其中添加所有端点示例，例如Controller端点，HTTP Client，添加服务和在startup Configuration方法中使用的dbcontext。
运行测试应用程序
运行应用程序时，我们可以看到左侧具有导航功能，右侧包含数据。我们可以看到默认示例页面和菜单将显示在Blazor网站上。我们可以使用页面或将其删除，然后从我们自己的页面开始。
步骤2：安装软件包
要在我们的Blazor应用程序中使用Blazor Canvas扩展，我们需要安装以下软件包：
- Blazor.Extensions.Canvas
右键单击解决方案，然后单击 Manage Nuget package。搜索所有软件包并安装所有需要的软件包，如下图所示：
安装软件包后，我们可以从“依赖软件包”中进行确认。
注意：添加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文件夹，然后单击Add New Item以添加我们的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 Component Page中，我们有三部分代码，首先是我们导入要在组件中使用的所有引用和模型的Import部分，HTML设计和数据绑定部分，最后是具有调用所有Web API的功能部分以绑定到我们的HTML页面中，并执行要在“组件”页面中显示的客户端业务逻辑。
Import部分
首先，我们在Razor View页面中导入所有必需的支持文件和引用。在这里，我们首先导入了要在我们的视图中使用的Model类，还导入了Blazor Canvas Extension，以便为Blazor应用程序绘制自己的图表控件。
@page "/drawingsample"
@using Blazor.Extensions.Canvas
@using Blazor.Extensions;
@using Blazor.Extensions.Canvas.Canvas2D;
@using ClazorCharts.Data
@inject ItemMasterService MasterServiceHTML设计和数据绑定部分
接下来，我们设计DrawingSample详细信息页面以显示带有商品名称和每件商品销售数量的条形图。在这里，我们在Blazor HTML设计部分中添加了Blazor Extension HTML5画布，以绘制条形图。
<h3>Shanu - Draw Bar Chart using Blazor Canvas Extensions</h3>
<hr />
<BECanvas Width="500" Height="500" @ref="_canvasReference"></BECanvas>函数部分
函数部分用于获取服务结果并将结果绑定到数组中，并绘制用于显示柱状图的值。
在这里，我们首先声明ItemsArray要以获得绑定BarChart中Item Mater的结果。接下来，我们创建一个string数组作为pirChartColor，以从数组中使用不同的颜色绘制每个条形图。在OnInitializedAsync中，我们得到ItemMasterService结果并将结果绑定到ItemsArrys中。在OnAfterRenderAsync方法中，我们使用C＃绘制对象向绘制条形图到Canvas。我们使用项目数组的foreach获取所有的项目名称和值，这里我们绘制所有值并使用Array值绘制气泡图。使用该值，我们将从此方法在画布标签上绘制气泡图。
气泡图
气泡图通常至少具有3个变量，其中之一是气泡大小，X绘图值和y绘图值。在我们的示例中，气泡大小为或SaleCount值和xvalue和y值，用于在图表内绘制气泡。
@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",
//"#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32",
//"#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00","#617C58", "#64E986"
};
protected override async Task OnInitializedAsync()
{
itemsArrys = await MasterService.GetItemMasters();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
lastend = 0;
xSpace = 10;
XvalPosition = xSpace;
maxDataVal = itemsArrys.Max(row => row.SaleCount);
noOfPlots = itemsArrys.Length;
chartWidth = Convert.ToInt32(_canvasReference.Width);
chartHeight = Convert.ToInt32(_canvasReference.Height);
int widthcalculation =
(Convert.ToInt32(_canvasReference.Width) - 100) / itemsArrys.Length;
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
await this._context.LineToAsync
(Convert.ToInt32(_canvasReference.Width) - 10, chartHeight);
await this._context.StrokeAsync();
int varbubbleSize = 30;
int ival = 1;
@foreach (var itemsArry in itemsArrys)
{
// Draw Xaxis Plots Line and Text ***********
XvalPosition = XvalPosition + widthcalculation;
await this._context.MoveToAsync(XvalPosition, chartHeight);
await this._context.LineToAsync(XvalPosition, chartHeight + 15);
await this._context.StrokeAsync();
await this._context.SetFillStyleAsync("#034560");
await this._context.SetStrokeStyleAsync("#034560");
await this._context.SetFontAsync("12pt Calibri");
await this._context.StrokeTextAsync
(itemsArry.ItemName, XvalPosition - 40, chartHeight + 24);
// EndXval Plotting ************
////Draw Bar Graph **************==================********************
await this._context.SetFillStyleAsync(pirChartColor[colorval]);
await this._context.SetStrokeStyleAsync(pirChartColor[colorval]);
await this._context.BeginPathAsync();
varbubbleSize = itemsArry.SaleCount;
if(itemsArry.SaleCount>70)
{
varbubbleSize = itemsArry.SaleCount-10;
}
await this._context.ArcAsync(getXPlotvalue(ival)-6,
getYPlotVale(varbubbleSize-10), varbubbleSize, varbubbleSize, Math.PI * 2, true);
await this._context.FillAsync();
await this._context.StrokeAsync();
await this._context.SetFillStyleAsync("#034560");
await this._context.SetStrokeStyleAsync("#034560");
await this._context.SetFontAsync("12pt Calibri");
await this._context.StrokeTextAsync(itemsArry.SaleCount.ToString(),
getXPlotvalue(ival)-12, getYPlotVale(itemsArry.SaleCount)+46);
await this._context.SetStrokeStyleAsync("#C0C0C0");
colorval = colorval + 1;
ival = ival + 1;
}
}获得X绘图和Y绘图值的方法：在这里，我们计算在X和Y轴上绘制图表项。
// to return the x-Value
private double getXPlotvalue(int val) {
return Convert.ToDouble((chartWidth-40) / noOfPlots) * val + (xSpace * 1.5) - 20;
}
// Return the y value
private double getYPlotVale(int val) {
return chartHeight - (((chartHeight - xSpace) / maxDataVal) * val);
} }导航菜单
现在，我们需要将此新添加的“DrawingSample Razor”页面添加到左侧导航中。要添加此内容，请打开“共享文件夹”，然后打开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范围内的气泡图。为了用于许多比例，我们可以扩展此图表以绘制图例和其他详细信息。由于这是我们自己的图表，因此我们可以根据需要添加任何功能。
