BlazorCharts 原生图表库开发日志 210423

欢迎访问我的B站空间：https://space.bilibili.com/223212197

背景

目前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

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

至于代码，嗯~~~~~~，项目刚开始，代码有点混乱，就不贴出来了，欢迎大家来项目主页吐槽和贡献代码，一起为建设Blazor生态努力。

截至目前项目能生成最简单的柱状图与折线图。PS：此图表的标题是我的口号😁

次回预告

等我代码重构一波后，我再来更新博客，下一次我有信心拿出可分享的代码一起讨论了。