點擊藍字

關注我們

背景

目前 Blazor 中可用的圖表組件庫主要有以下幾個：

• ant-design-blazor/ant-design-charts-blazor

  -基于G2Plot?

• mariusmuntean/ChartJs.Blazor

  - 基于ChartJs?

• blazor-cn/Blazor.ECharts

  - 基于ECharts

ant-design-charts-blazor是我主導完成的，相關使用教程可參閱《進擊吧！Blazor！》系列入門教程 第一章 7.圖表（https://blog.csdn.net/TimChen44/article/details/114295041）

然而這些圖表庫無不例外的采用的JS庫進行二次分裝，基本實現方式雷同，我以ant-design-charts-blazor舉例

大致邏輯如下：

首先通過IJSRuntime接口與自己開發的own.js進行交互

own.js中對圖表庫的api做了簡單封裝，主要目的是減少.razor與G2Plot的交互，畢竟IJSRuntime接口調用js對象沒有js之間直接相互調用方便

G2Plot會在Canvas中繪制出圖表

圖表中的一些事件通過own.js進行捕捉后通過IJSRuntime反饋給.razor

ant-design-charts-blazo r的技術實現方式，可詳見我之前的文章《用Blazor技術封裝G2Plot實現Charts組件》(https://zhuanlan.zhihu.com/p/163808856)

看了上述內容，我們思考一下，Blazor技術將C#帶到了前端，我們卻繼續使用著JS的圖表庫，合理嗎？?

明顯不合理，所以我們應該去創建一個基于Blazor技術構建的圖表庫替代上面的JS庫。

到這里還有一個小問題，就是?Canvas?提供的接口都是面向?JS?的，那么我們需要另外一個繪圖技術，需兼顧功能和性能，其實不用選，SVG，就是你了。

可縮放矢量圖形（Scalable Vector Graphics，SVG），是一種用于描述二維的矢量圖形，基于 XML 的標記語言。作為一個基于文本的開放網絡標準，SVG能夠優雅而簡潔地渲染不同大小的圖形，并和CSS，DOM，JavaScript和SMIL等其他網絡標準無縫銜接。

BlazorCharts

BlazorCharts 是我主導的開源項目，目標是創建一個基于Blazor技術，使用簡單，功能相對豐富的圖表庫。

項目地址：https://github.com/TimChen44/blazor-charts

項目信息

首先，確定一個圖標，俗話說圖標確定后項目就完成了一半????，以本人的能力，只能將圖表和@合并，設計出“縫合怪”作為我的圖標????

接著，再確定我們組件的一些基本理念，我今后的設計盡我所能滿足這些理念。

• 使用簡單

  組件庫是拿來用的，所以使用方式要簡單，使用方法要符合常規邏輯，爭取使用時最大可能的減少對文檔的依賴。

• 功能實用

  實現一堆極少場景才會使用的圖表，不如集中精力做好用的最多的那些圖表。實現一堆極少場景才會使用的功能，不如集中精力做好用的最多的那些功能。

• 信息直觀

  使用圖表的核心目的是解決表格數據顯示不直觀的問題，所以不論功能、布局、顏色、動畫都是為了這個服務。

實現方式介紹

首先我們看一下圖表包含的基本元素

基于這個結構，下面是我項目的類圖，通過一些抽象，將圖表的一些元素進行了歸納。

圖表中每一個元素的大小位置變化都會影響到其他元素，所以位置和布局的確定存在一個先后關系，順序如下：

圖表效果

下面是一個最簡單的圖表示例

所需的配置

<BcChart?Height="600"?Width="800"?Data="DemoData.Githubs"?CategoryField="x=>x.Year.ToString()"><BcTitle Title="圖表示例" TData="Github"></BcTitle><BcAxesY TData="Github" GridLineMajor="true" GridLineMinor="true"></BcAxesY><BcLegend TData="Github" BorderWidth="1" Position="LegendPosition.Bottom"></BcLegend><BcColumnSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.View)" GroupName="View"></BcColumnSeries><BcColumnSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.Start)" GroupName="Start"></BcColumnSeries><BcLineSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.Fork)" GroupName="Fork" IsSecondaryAxis="true"></BcLineSeries> </BcChart>

所需的數據

static class DemoData {public static List<Github> Githubs = new List<Github>(){new Github(){Year=2017,View =2500,Start=800,Fork=400},new Github(){Year=2018,View =2200,Start=900,Fork=800},new Github(){Year=2019,View =2800,Start=1100,Fork=700},new Github(){Year=2020,View =2600,Start=1400,Fork=900},}; }

更多內容請觀看下面的視頻

MSReactor

掃碼｜關注我們

Bilibili｜微軟Reactor_SH

新浪微博｜MSReactorShanghai

知乎｜微軟 Reactor

你們點點“分享”，給我充點兒電吧~

總結

以上是生活随笔為你收集整理的BlazorCharts 原生图表库的建设历程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。