The G2Plot V2 version, which has been in development since August this year and is now almost four months old, has:

  • 25+ Commonly used statistical charts
  • 80% of charts are validated in complex BI, LowCode products
  • 97% code single test coverage
  • 5+ Positive community classmate metrics

We will continue to deepen in the following aspects:

  1. Improve chart richness (Sankey diagram, matrix tree diagram, etc.) according to business requirements, and practice and apply in complex business system
  2. Document, scene DEMO, reduce the user’s threshold and cost

So, this article will introduce G2Plot version 2.0 development, from the business to a technical architecture of a thought, may be confusing, light gusher!

First of all, I would like to introduce myself. I am the front end of ant Big Data Department, mainly responsible for the data analysis capability of DeepInsight BI product, and also responsible for the development and iteration of AntV statistical charts G2 and G2Plot.

From the perspective of BI, we can understand this picture.Data visualization is very important for our BI products, and as time goes by, with the accumulation of data, visualization ability is very important for any Internet product.

The problem

In order to describe the content of the new architecture of G2Plot, it is important to first say something about the problems that existed or were created by the old architecture.

  • The business problem

Last year, we did a lot of chart experience optimization based on G2Plot V1. However, due to code architecture and quality problems, we could only lock up the version in the business and it was difficult to keep iterating. While we solved a lot of problems based on G2Plot, we also introduced more business iteration issues.

  • Architectural issues

** G2Plot architecture design does not rely entirely on G2, creating a chart without an obvious pattern. The problem with this is:

  1. Parallel development with G2 is not conducive to the accumulation of G2 capabilities
  2. Code clutter, novice entry threshold is high, it is difficult to contribute code. 1 plus 1 is much less than 2
  3. Stability, quality is difficult to guarantee, maintainability problems (this point is also related to incomplete single test)
  • Open capacity problem

In ** business, G2 is used to make business customization chart, or G2Plot is directly used. There is a question: ** how to make customization and experience optimization of customization? ** Currently part of the optimization is hack way. Urgent need to break quarantine

  1. Is G2 open enough to optimize the experience for G2Plot or business?
  2. Does G2Plot have sufficient configuration and configuration scaling capabilities for business customization?

It’s a trade-off between simplicity and scalability, which is very important for business development students.

Architecture design

The objectives of the new structure are:

  • G2Plot layer lightweight

G2Plot is based on G2 capabilities and is assembled into a single common business statistics chart. There are two main reasons:

  1. More than 80% of commonly used statistical charts are used
  2. Facilitate the precipitation and improvement of G2 layer capabilities, including layout, graphics, interaction, animation and other capabilities
  3. G2 is based on graph syntax and does not have the concept of charts, so it cannot be targeted for chart optimization, while G2Plot is based on graph taxonomy and can be targeted for processing.
  • Configuration API usage

The continuation of the configuration of V1, on the one hand, can indeed reduce the cost of entry and use of users, on the other hand, to ensure the relative compatibility between large versions.

The architecture diagram of the overall combing is as follows:

Architecture interpretation

In essence, the G2Plot layer is very simple and lightweight, and what it does consists of three main points:

Schema & Adaptor

** Define the schema configuration for different graphs, and then develop snippets of Adaptor code to convert the schema configuration into G2 apis. ** For example, for line charts:

{
  xField: 'year'.yField: 'sale'.data: [ / *... * /],}Copy the code

The code to convert to G2 is:

chart.data(data);

chart.line().position(`${xField}*${yField}`);
Copy the code

Legend, Tooltip, and Axis continue directly to G2 without adding any other concepts.

Chart classification and customization

Some experience optimization logic for different charts. For example, for label overlap, we can load different layout function fragments for different graphs. Such as:

  • point-adjust-position
  • limit-in-canvas
  • .

Open extension mechanism

Exposes G2’s flexible customization capabilities and provides a mechanism for development extension. G2Plot is built with commonly used charts, and for custom charts that are not commonly used, it can be easily customized based on G2 through an extension mechanism.

We will directly open the G2Plot based on G2 development chart Adaptor mode. Business students can use G2 to package customized charts based on this mode. If they need to reuse charts for other businesses, they can directly send packages and use them in G2Plot mode. Here’s an example:The above is a real QRCode graphic capability based on G2 according to G2Plot mode, the overall code is about 100 lines. Based on such a pattern, refer to the documentationDevelop custom extension diagramsTo customize business encapsulation and reuse.

The last

The most important thing for us right now is to make G2Plot a business-usable visual chart library. Mainly includes:

  1. Try to reduce the cost of using G2 graph syntax through technical means as much as possible, and popularize the knowledge of visualization technology
  2. Improve the quality and stability of the underlying module as much as possible, otherwise the underlying technical module will hinder business iteration and even give unstable factors to the business code

For those of you interested in visualization techniques, join us for the next continuous iteration of G2Plot where you can:

  • Documents, DEMO, translation and other relatively low threshold of things to get started
  • Built-in chart development and iteration for G2Plot
  • Open open mechanism based on G2Plot to extend peripheral non-generic charts

Thank you! By the way, there is also the project open source address: github.com/antvis/G2Pl… ✨ ✨ ✨. More articles on G2Plot can be found here.