BlazorCharts 原生圖表庫的建設歷程

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

背景

目前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》的視訊