MAUI Blazor学习4-绘制BootstrapBlazor.Chart图表
MAUI Blazor系列目录
- MAUI Blazor学习1-移动客户端Shell布局 - SunnyTrudeau - 博客园 (cnblogs.com)
- MAUI Blazor学习2-创建移动客户端Razor页面 - SunnyTrudeau - 博客园 (cnblogs.com)
- MAUI Blazor学习3-绘制ECharts图表 - SunnyTrudeau - 博客园 (cnblogs.com)
MAUI Blazor还可以用其他图表库,可以直接用C#控制图表生成,不需要编写JavaScript函数。比如BootstrapBlazor.Chart,在GitHub有1.2k start,仓库更新比较活跃。如果绘制简单的图表,也够用了。
https://gitee.com/LongbowEnterprise/BootstrapBlazor
https://github.com/dotnetcore/BootstrapBlazor
BootstrapBlazor官网有用于MAUI Blazor的教程,以及画折线图的DEMO
https://www.blazor.zone/install-maui
https://www.blazor.zone/charts/line
网上也有可参考的文章,感谢大佬分享。
https://www.cnblogs.com/densen2014/p/16095276.html
《Bootstrap Blazor 实战 Chart 图表使用(1) - AlexChow - 博客园.mhtml》
新建MAUI Blazor项目
由于BootstrapBlazor对全局样式有影响,所以新建一个MAUI Blazor项目,BootstrapMaBla,改造为Shell布局。修改以下文件。
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\wwwroot\css\fonts\
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\wwwroot\css\app.css
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\Shared\MainLayout.razor
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\Shared\MainLayout.razor.css
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\Shared\NavMenu.razor
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\Shared\NavMenu.razor.css
引入BootstrapBlazor
NuGet安装BootstrapBlazor.Chart。
<PackageReference Include="BootstrapBlazor.Chart" Version="7.0.1" />
index.html移除默认的 Bootstrap 样式链接 <link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' />,引入BootstrapBlazor的样式和js文件。
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\wwwroot\index.html
<!--<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />--> <!--引入BootstrapBlazor--> <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet" /> <link href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <!--引入BootstrapBlazor--> <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script> <script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js"></script> <script src="_framework/blazor.webview.js" autostart="false"></script>
注册 BootstrapBlazor 服务
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\MauiProgram.cs
//引入BootstrapBlazor
builder.Services.AddBootstrapBlazor();
return builder.Build();
增加命名空间引用
将以下内容添加到_Imports.razor 文件中,以便 Razor 文件中能识别组件
@using BootstrapBlazor.Components
增加 BootstrapBlazorRoot 组件到Main.razor 文件中
<BootstrapBlazorRoot> <Router AppAssembly="@typeof(Main).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> </BootstrapBlazorRoot>
绘制天气温度图表
新建一个天气温度图表页面,取代项目模板默认的FetchData.razor
D:\Software\gitee\mauiblazorapp\BootstrapMaBla\Pages\WeatherChart.razor
@page "/fetchdata" @using BootstrapMaBla.Data @inject WeatherForecastService ForecastService <h1>天气温度图表</h1> <Chart @ref="LineChart" OnInitAsync="() => OnInit(0.4f, false)" /> @code { private WeatherForecast[] forecasts; private Chart? LineChart { get; set; } protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); } private Task<ChartDataSource> OnInit(float tension, bool hasNull) { var ds = new ChartDataSource(); ds.Options.Title = "天气温度折线图"; ds.Options.X.Title = "日期"; ds.Options.Y.Title = "温度"; ds.Labels = forecasts.Select(x => $"{x.Date:M}"); ds.Data.Add(new ChartDataset() { Tension = tension, Label = $"温度趋势", Data = forecasts.Select(x => (object)x.TemperatureC) }); return Task.FromResult(ds); } }
测试运行
在手机模拟器上运行,天气温度折线图出来了,效果可以。
DEMO代码地址:https://gitee.com/woodsun/mauiblazorapp
标签:BootstrapMaBla,mauiblazorapp,Chart,gitee,BootstrapBlazor,MAUI,Blazor From: https://www.cnblogs.com/sunnytrudeau/p/17025942.html