BlazorCharts 原生图表库的建设历程

以下文章来源于MSReactor ，作者陈超超

背景

目前 Blazor 中可用的图表组件库主要有以下几个：

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

项目信息

首先，确定一个图标，俗话说图标确定后项目就完成了一半

0 人点赞