MAUI Blazor学习4-绘制BootstrapBlazor.Chart图表

MAUI Blazor学习4-绘制BootstrapBlazor.Chart图表

 MAUI Blazor系列目录

1. MAUI Blazor学习1-移动客户端Shell布局 - SunnyTrudeau - 博客园 (cnblogs.com)
2. MAUI Blazor学习2-创建移动客户端Razor页面 - SunnyTrudeau - 博客园 (cnblogs.com)
3. 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