BlazorCharts 原生圖表庫的建設歷程

作者：陳超超 Ant Design Blazor
項目貢獻者，擁有十多年從業經驗，長期基於.Net技術棧進行架構與開發產品的工作，現就職於正泰集團。 郵箱：[e-mail]
歡迎各位讀者有任何問題聯系我，我們共同進步。

背景

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

• ant-design-blazor/ant-design-charts-blazor
  • 基於G2Plot
• mariusmuntean/ChartJs.Blazor
  • 基於ChartJs
• blazor-cn/Blazor.ECharts
  • 基於ECharts

ant-design-charts-blazor是我主導完成的，相關使用教程可參閱《進擊吧！Blazor！》系列入門教程 第一章 7.圖表

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

大致邏輯如下

1. 首先通過IJSRuntime接口與自己開發的own.js進行交互
2. own.js中對圖表庫的api做了簡單封裝，主要目的是減少.razor與G2Plot的交互，畢竟IJSRuntime接口調用js對象沒有js之間直接相互調用方便
3. G2Plot會在Canvas中繪制出圖表
4. 圖表中的一些事件通過own.js進行捕捉后通過IJSRuntime反饋給.razor

ant-design-charts-blazor的技術實現方式可詳見我之前的文章用Blazor技術封裝G2Plot實現Charts組件

看了上述內容，我們思考一下，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

項目信息

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

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

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

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

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

實現方式介紹

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

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

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

graph LR 圖表 --> 標題 標題 --> 圖例 圖例 --> 坐標軸 坐標軸 --> X軸寬度 坐標軸 --> Y軸高度 X軸寬度 --> Y軸寬度 Y軸高度 --> X軸高度 Y軸寬度 --> 系列組 X軸高度 --> 系列組 系列組 --> 系列A 系列組 --> 系列B 系列組 --> 系列C

圖表效果

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

所需的配置

<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},
    };
}

更多內容請觀看《Balzor Day 2021》的視頻