乐趣区

关于.net:BlazorCharts-原生图表库的建设历程

jiezi

作者：陈超超 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》的视频

https://www.bilibili.com/vide…

退出移动版