Writing in the front

Alibaba opened the first version of its internal charting library, Bizcharts, last year, and over the course of the year, Bizcharts has added many new features and made significant tweaks to rendering detail and rendering performance.

This paper will briefly introduce Alibaba open source chart library Bizcharts, which is mainly divided into the following aspects:

  1. The origin of it
  2. What business scenarios are appropriate?
  3. How to use it?
  4. Future planning

Where did it come from?

At present, Ali basically uses React technology stack at the front end of most of its businesses, and there is often a demand for chart drawing in business scenes, so a chart library based on React technology stack is very necessary, and there is a very powerful chart low-level engine like G2 inside Ali. So a layer of encapsulation on top of the engine was a natural one, and Bizcharts was the encapsulation of the React version based on the G2 engine.

The syntax design of Bizcharts is very similar to the use of React. Each part of the chart is split into separate React classes, such as
for prompts and
for coordinate axes. The configuration items for all diagrams are props for the component.

Bizcharts supports chart rendering in Canvas and SVG modes in the latest 3.x version. From the perspective of chart library alone, Canvas and SVG have their own advantages. Bizcharts support both methods and are suitable for various complex business scenarios.

Bizcharts was opened to public at the end of last year after two years of iterating around alibaba’s various divisions and business lines. In the six months of open source, a lot of iterative optimization has been done, and now the function and performance have been a lot of optimization, it is highly recommended to use in the official environment.

What business scenarios are appropriate?

Alibaba’s internal business is very complex: e-commerce business, background system, large business screen, etc., all of these businesses have a lot of customization requirements for charts, which can not be satisfied by simple line chart and bar chart. This also determines one of the features of Bicharts: support for free customization. Meanwhile, it has also been introduced above that more than 95% of Ali’s business front-end uses React technology stack, so Bizcharts is generally applicable to “React technology stack and chart drawing requirement scenarios”. From this perspective, Bizcharts is applicable to a wide range of business scenarios. Bizcharts can meet more business customization requirements than the high encapsulation of the Echarts charting framework.

How to use it?

Bizcharts’ API is tailored to React and feels like building blocks. Let’s draw a basic bar diagram for example:

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';

/ / the data source
const data = [
  { genre: 'Sports'.sold: 275.income: 2300 },
  { genre: 'Strategy'.sold: 115.income: 667 },
  { genre: 'Action'.sold: 120.income: 982 },
  { genre: 'Shooter'.sold: 350.income: 5271 },
  { genre: 'Other'.sold: 150.income: 3710}];// Define metrics
const cols = {
  sold: { alias: 'Sales volume' }, // Data field alias mapping
  genre: { alias: 'Game Type'}};// Render the diagramReactdom.render ((<Chart width={600} height={400} data={data} scale={cols}> {/* X Axis */} <Axis name="genre" /> {/* Y Axis */} <Axis name="sold" /> <Legend position="top" dy={-20} /> <Tooltip /> <Geom type="interval" position="genre*sold" color="genre" /> </Chart> ), document.getElementById('mountNode'));Copy the code

Below is a rendering of the code snippet above:

Each piece of the diagram is a component that can be added as needed, making it easy to use without having to worry about product manager requirements.

Future planning

Bizcharts itself has a large number of demos, which can meet most common usage scenarios. When using Bizcharts, you only need to replace the data in the Demo with the data in your own business, but even so, it cannot completely cover highly customized scenarios. Of course, Bizcharts users can check the API documents on the official website to fulfill their requirements, but this virtually increases the learning cost of users. It can be a pain for users to learn how to use a library/framework when there is only one simple discount diagram on the entire site and time is very tight and needs to be implemented quickly.

Based on the above, Bizcharts will launch a product next: Chartmaker. Simply put, it helps you visually configure the diagrams you want: what you see is what you get, while still exporting code. With Chartmaker, you can help data visualization users quickly create the charts they want, with no learning cost. Chartmaker is currently under intense development and is expected to be open source in early October.

Write in the last

Bizcharts is currently in rapid development, and Pull requests for projects are very welcome. For those students who have already used Bizcharts in the project or are going to use Bizcharts, please scan our official group Studs QR code below and we will help solve any problems in the process as soon as possible: