BootstrapBlazor實戰 Chart 圖表

BootstrapBlazor實戰 Chart 圖表使用(1)

ootstrapBlazor組件 Chart 圖表介紹

通過給定數據，繪畫各種圖表的組件

本文主要介紹三種圖表使用:折線圖,柱狀圖,餅圖

1.新建工程

新建工程b06chart,使用 nuget.org 進行 BootstrapBlazor 組件安裝, Chart 庫,字體. 將項目添加到解決方案中

dotnet new blazorserver -o b06chart
dotnet add b06chart package BootstrapBlazor
dotnet add b06chart package BootstrapBlazor.FontAwesome
dotnet add b06chart package BootstrapBlazor.Chart
dotnet sln add b06chart/b06chart.csproj

2.樣式表和Javascript 引用

增加主題樣式表到 Pages/_Layout.cshtml 文件中

刪除 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

并在下面添加三行

<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet" />
<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" />

添加 Javascript 引用到 Pages/_Layout.cshtml 文件中

在 <script src="_framework/blazor.server.js"></script> 之前添加

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
<script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js" asp-append-version="true"></script>

3.添加增加命名空間引用到_Imports.razor文件中

@using BootstrapBlazor.Components

4.增加 BootstrapBlazorRoot 組件到 App.razor 文件中

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</BootstrapBlazorRoot>

5.添加BootstrapBlazor服務到Program.cs文件中

在 builder.Services.AddSingleton<WeatherForecastService>(); 后加入

builder.Services.AddBootstrapBlazor();

6.組件參數

參數	說明	可選值	默認值
Width	組件寬度支持單位如: 100px 75%
ChartType	圖表類型	Line/Bar/Pie/Doughnut/Bubble	Line

7.事件

參數	說明	類型
OnInitAsync	組件數據初始化委托方法	Func<Task>
OnAfterInitAsync	客戶端繪制圖表完畢后回調此委托方法	Func
OnAfterUpdateAsync	客戶端更新圖表完畢后回調此委托方法	Func<ChartAction, Task>

8.為了快速建立隨機數據,我們建立一個工具類UtilityChart.cs

代碼來源于bb演示工程

using BootstrapBlazor.Components;

namespace b06chart;

/// <summary>
/// Chart 工具類
/// </summary>
internal static class UtilityChart
{
    public static IEnumerable<string> Colors { get; }=new List<string>() { "Red", "Blue", "Green", "Orange", "Yellow", "Tomato", "Pink", "Violet" };

    /// <summary>
    /// 
    /// </summary>
    /// <param name="chart"></param>
    public static Task RandomData(Chart chart)=> chart.Update(ChartAction.Update);

    /// <summary>
    /// 
    /// </summary>
    /// <param name="chart"></param>
    /// <param name="dsCount"></param>
    public static void AddDataSet(Chart chart, ref int dsCount)
    {
        if (dsCount < Colors.Count())
        {
            dsCount++;
            _=chart.Update(ChartAction.AddDataset);
        }
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="chart"></param>
    /// <param name="dsCount"></param>
    public static void RemoveDataSet(Chart chart, ref int dsCount)
    {
        if (dsCount > 1)
        {
            dsCount--;
            _=chart.Update(ChartAction.RemoveDataset);
        }
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="chart"></param>
    /// <param name="daCount"></param>
    public static void AddData(Chart chart, ref int daCount)
    {
        var limit=chart.ChartType switch
        {
            ChartType.Line=> 14,
            ChartType.Bar=> 14,
            ChartType.Bubble=> 14,
            _=> Colors.Count()
        };

        if (daCount < limit)
        {
            daCount++;
            _=chart.Update(ChartAction.AddData);
        }
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="chart"></param>
    /// <param name="daCount"></param>
    public static void RemoveData(Chart chart, ref int daCount)
    {
        var limit=chart.ChartType switch
        {
            ChartType.Line=> 7,
            ChartType.Bar=> 7,
            ChartType.Bubble=> 4,
            _=> 2
        };
        if (daCount > limit)
        {
            daCount--;
            _=chart.Update(ChartAction.RemoveData);
        }
    }
}

9.折線圖

<p>折線圖</p>

<Chart @ref="LineChart" OnInitAsync="()=> OnInit(0.4f, false)" Width="50%" />

<button class="btn btn-primary" @onclick="e=> UtilityChart.RandomData(LineChart)"><i class="fa fa-line-chart"></i><span>隨機數據</span></button>

@code{
    private Random Randomer { get; }=new Random();
    private int LineDatasetCount=2;
    private int LineDataCount=7;

    private Chart? LineChart { get; set; }

    private Task<ChartDataSource> OnInit(float tension, bool hasNull)
    {
        var ds=new ChartDataSource();
        ds.Options.Title="Line 折線圖";
        ds.Options.X.Title="天數";
        ds.Options.Y.Title="數值";
        ds.Labels=Enumerable.Range(1, LineDataCount).Select(i=> i.ToString());
        for (var index=0; index < LineDatasetCount; index++)
        {
            ds.Data.Add(new ChartDataset()
            {
                Tension=tension,
                Label=$"數據集 {index}",
                Data=Enumerable.Range(1, LineDataCount).Select((i, index)=> (index==2 && hasNull) ? null! : (object)Randomer.Next(20, 37))
            });
        }
        return Task.FromResult(ds);
    }
}

10.柱狀圖

<p>柱狀圖</p>

<Chart ChartType="ChartType.Bar" OnInitAsync="()=> OnInit(false)" @ref="BarChart" Width="50%" />

<button class="btn btn-primary" @onclick="e=> UtilityChart.RandomData(BarChart)"><i class="fa fa-bar-chart"></i><span>隨機數據</span></button>

@code{
    private int BarDatasetCount=2;
    private int BarDataCount=7; 
 
    private Chart? BarChart { get; set; }

    private Task<ChartDataSource> OnInit(bool stacked)
    {
        var ds=new ChartDataSource();
        ds.Options.Title="Bar 柱狀圖";
        ds.Options.X.Title="天數";
        ds.Options.Y.Title="數值";
        ds.Options.X.Stacked=stacked;
        ds.Options.Y.Stacked=stacked;
        ds.Labels=Enumerable.Range(1, BarDataCount).Select(i=> i.ToString());
        for (var index=0; index < BarDatasetCount; index++)
        {
            ds.Data.Add(new ChartDataset()
            {
                Label=$"數據集 {index}",
                Data=Enumerable.Range(1, BarDataCount).Select(i=> Randomer.Next(20, 37)).Cast<object>()
            });
        }
        return Task.FromResult(ds);
    }
}

11.餅圖

<p>餅圖</p>

<Chart ChartType="ChartType.Pie" OnInitAsync="@OnInit" @ref="PieChart" Width="50%" />

<button class="btn btn-primary" @onclick="e=> UtilityChart.RandomData(PieChart)"><i class="fa fa-pie-chart"></i><span>隨機數據</span></button>

@code{
    private int PieDatasetCount=1;
    private int PieDataCount=5;

    private Chart? PieChart { get; set; }

    private Task<ChartDataSource> OnInit()
    {
        var ds=new ChartDataSource();
        ds.Options.Title="Pie 餅圖";
        ds.Labels=UtilityChart.Colors.Take(PieDataCount);
        for (var index=0; index < PieDatasetCount; index++)
        {
            ds.Data.Add(new ChartDataset()
            {
                Label=$"數據集 {index}",
                Data=Enumerable.Range(1, PieDataCount).Select(i=> Randomer.Next(20, 37)).Cast<object>()
            });
        }
        return Task.FromResult(ds);
    }
}

12.未完待續 :)

通過簡單的步驟,已經可以初步體驗圖表組件,由于近日事務較多,這篇只是初略的帶大家快速入門,體驗一下BootstrapBlazor的Chart 圖表使用. 下一篇章我們將會對組件進行一些調整,例如添加移除數據集,添加移除數據,X軸Y軸數據改變后如何刷新組件,以及跟數據庫結合查詢生成圖表.

項目源碼

[Github] <https://github.com/densen2014/Blazor100>

[Gitee] <https://gitee.com/densen2014/Blazor100>

知識共享許可協議

本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名AlexChow，不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。如有任何疑問，請與我聯系。

AlexChow

| 博客園 | 知乎 | Gitee | GitHub

挑戰30天在頭條寫日記#

快速上手

獲取 Apache ECharts

Apache ECharts 支持多種下載方式，可以在下一篇教程安裝中查看所有方式。這里，我們以從 jsDelivr CDN 上獲取為例，介紹如何快速安裝。

在 https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js，點擊并保存為 echarts.js 文件。

引入 Apache ECharts

在剛才保存 echarts.js 的目錄新建一個 index.html 文件，內容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入剛剛下載的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

打開這個 index.html，你會看到一片空白。但是不要擔心，打開控制臺確認沒有報錯信息，就可以進行下一步。

繪制一個簡單的圖表

在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 </head> 之后，添加：

<body>
  <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于準備好的dom，初始化echarts實例
      var myChart=echarts.init(document.getElementById('main'));

      // 指定圖表的配置項和數據
      var option={
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
    </script>
  </body>
</html>

這樣你的第一個圖表就誕生了！

常用圖表類型

柱狀圖:基礎柱狀圖,堆疊柱狀圖,動態排序柱狀圖,階梯瀑布圖

折線圖:基礎折線圖,堆疊折線圖,區域面積圖,平滑曲線圖,階梯線圖

餅圖:基礎餅圖,圓環圖南丁格爾圖（玫瑰圖）

散點圖:基礎散點圖

服務端渲染：

數據處理

項目地址：

https://github.com/apache/echarts

能：

modbus讀取數據
數據寫入mysql數據庫中
查詢設定時間段的數據
數據顯示為曲線

Node-RED界面：

UI界面：

mysql數據庫結構：

資源地址：han-link.cn/4165.html

#妙筆生花創作挑戰#

在線咨詢

上一篇：「前端技術」Web端高dpi圖片適配方案
下一篇：CSS布局的魔鬼屬性-浮動

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商