The construction process of BlazorCharts native chart library

Author: Chen Chaochao Ant Design Blazor
Contributor to the project, with more than ten years of experience in the industry, has long been working on architecture and product development based on the .Net technology stack, and now works in the Chint Group. Email: [e-mail]
Readers are welcome to contact me with any questions, we will make progress together.

background

The chart component libraries currently available in Blazor mainly include the following

• ant-design-blazor/ant-design-charts-blazor

  • Based on G2Plot

• mariusmuntean/ChartJs.Blazor

  • Based on ChartJs

• blazor-cn/Blazor.ECharts

  • Based on ECharts

ant-design-charts-blazor was completed by me. For related tutorials, please refer to "Attack!" Blazor! 》The first chapter of the series of introductory tutorials 7. Chart

However, these chart libraries all use the JS library for secondary sub-assembly, and the basic implementation methods are the same. I will take ant-design-charts-blazor as an example.

The general logic is as follows

1. First interact with the self-developed own.js through the IJSRuntime
2. own.js simply encapsulates the api of the chart library. The main purpose is to reduce .razor and G2Plot . After all, the IJSRuntime interface calls the js object and it is not convenient to call each other directly between js.
3. G2Plot will draw a chart Canvas
4. Charts some of the events by own.js after capture by IJSRuntime back to .razor

The technical implementation of ant-design-charts-blazor can be found in my previous article using Blazor technology to encapsulate G2Plot to achieve Charts component

After reading the above content, let's think about it. Blazor technology brings C# to the front end, but we continue to use the JS chart library, is it reasonable?
Obviously unreasonable, so we should create a chart library based on Blazor technology to replace the above JS library.

There is still a small problem here, that is, the interfaces provided by Canvas JS , so we need another drawing technology, which needs to take into account the function and performance. In fact, there is no need to choose SVG , that's you.

Scalable Vector Graphics (SVG) is an XML-based markup language used to describe two-dimensional vector graphics. As a text-based open web standard, SVG can render graphics of different sizes elegantly and concisely, and seamlessly integrates with other web standards such as CSS, DOM, JavaScript, and SMIL.

BlazorCharts

BlazorCharts is an open source project led by me. The goal is to create a chart library based on Blazor technology that is simple to use and relatively rich in functions.

Project address: https://github.com/TimChen44/blazor-charts

Project information

First, determine an icon. As the saying goes, after the icon is determined, the project is half completed 😁, with my own ability, I can only merge the chart and @ to design a "stitched monster" as my icon 🤣

Then, we will determine some basic concepts of our components, and my future design will try my best to satisfy these concepts.

• Simple to use
  The component library is used, so the method of use should be simple, and the method of use should conform to the conventional logic, and strive to minimize the dependence on the document when using it.
• Functional
  To implement a bunch of charts that are only used in very few scenarios, it is better to concentrate on the charts that are used the most.
  To implement a bunch of functions that are only used in very few scenarios, it is better to concentrate on those functions that are used the most.
• Information is intuitive
  The core purpose of using charts is to solve the problem of unintuitive display of tabular data, so regardless of the function, layout, color, and animation, it is for this service.

Implementation method introduction

First, let’s take a look at the basic elements of the chart

Based on this structure, the following is the class diagram of my project, through some abstractions, some elements of the diagram are summarized.

Changes in the size and position of each element in the chart will affect other elements, so there is a precedence relationship between the position and the layout, and the order is as follows

graph LR
图表 --> 标题
标题 --> 图例
图例 --> 坐标轴
坐标轴 --> X轴宽度
坐标轴 --> Y轴高度
X轴宽度 --> Y轴宽度
Y轴高度 --> X轴高度
Y轴宽度 --> 系列组
X轴高度 --> 系列组
系列组 --> 系列A
系列组 --> 系列B
系列组 --> 系列C

Chart effect

Here is an example of the simplest chart

Required configuration

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

Required data

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

For more content, please watch the video of "Balzor Day 2021"

https://www.bilibili.com/video/BV1WU4y1L7LD/?aid=673304480&cid=345293587&page=1