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

public String ItemName { get; set; }public int SaleCount { get; set; }

创建服务类

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中

services.AddSingleton<ItemMasterService>();

步骤5：使用客户端项目

@page "/drawingsample"@using Blazor.Extensions.Canvas
@using Blazor.Extensions;
@using Blazor.Extensions.Canvas.Canvas2D;
@using ClazorCharts.Data
@inject ItemMasterService MasterService

HTML设计和数据绑定部分

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

函数部分

@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 axisesawait this._context.BeginPathAsync();await this._context.MoveToAsync(xSpace, xSpace);// first Draw Y Axisawait this._context.LineToAsync(xSpace, chartHeight);// Next draw the X-Axisawait 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);  }  }

导航菜单

<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>

生成并运行应用程序