Alibaba chart library Bizcharts officially open source

Alibaba opened the first version of its internal chart library Bizcharts last year. During this year, Bizcharts added many new features and significantly optimized rendering details and rendering performance.

Where does it come from?

Currently, most of Alibaba’s front-end businesses use the React technology stack, and there is often a need for chart drawing in business scenarios, so a charting library based on the React technology stack It is very necessary, and Alibaba has a very powerful underlying chart engine like G2, so it is natural to create a layer of encapsulation on top of this engine, and Bizcharts is an encapsulation of the React version based on the G2 engine. .

The syntax design of Bizcharts is very suitable for the use of React. Each part of the chart is split into independent React classes, such as: represents prompt information, represents Axis. All chart configuration items are props of the component.

In the latest 3.x version, Bizcharts supports chart rendering in Canvas and SVG modes. From the perspective of a charting library, Canvas and SVG each have their own merits. Bizcharts supports both methods and is suitable for various complex business scenarios.

After two years of repeated polishing in multiple departments and business lines within Alibaba, Bizcharts was open sourced at the end of last year. In the six months since it was open source, a lot of iterative optimizations have been made. Now the functions and performance have been greatly optimized. It is highly recommended to be used in a formal environment.

What business scenarios is it suitable for?

Alibaba’s internal business is very complex: e-commerce business, back-end systems, business large screens, etc. These businesses have a large number of customized needs for charts, and simple line charts and column charts are not enough. Satisfaction, this also determines one of the features of Bicharts: supporting free customization. At the same time, the above also introduces that more than 95% of Alibaba's business front-ends use the React technology stack, so in general, the applicable business scenario for Bizcharts is "the scenario of using the React technology stack and having chart drawing requirements". From this perspective That said, Bizcharts is applicable to a wide range of business scenarios. Compared with the high degree of encapsulation of the Echarts chart framework, Bizcharts can meet more business customization needs.

how to use?

Bizcharts’ API is tailor-made for React, and using it feels like building blocks. Let's take drawing a basic histogram as an example to explain:

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';
// 数据源
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 }
];
// 定义度量
const cols = {
  sold: { alias: '销售量' }, // 数据字段别名映射
  genre: { alias: '游戏种类' }
};
// 渲染图表
ReactDOM.render((
  <Chart width={600} height={400} data={data} scale={cols}>
    {/* X 轴 */}
    <Axis name="genre" />
    {/* Y 轴 */}
    <Axis name="sold" />
    <Legend position="top" dy={-20} />
    <Tooltip />
    <Geom type="interval" position="genre*sold" color="genre" />
  </Chart>
), document.getElementById(&#39;mountNode&#39;));

The following picture is the rendering result of the above code snippet:

Every piece of the chart is It is a component. You can add whatever you need. It is very convenient to use. You no longer have to worry about the product manager’s requirements not being fulfilled.

Future Plan

Bizcharts itself comes with a large number of demos, which can meet most common usage scenarios. When using it, you only need to change the The data can be replaced with data from your own business, but even so, it cannot fully cover highly customized scenarios. Of course, users using Bizcharts can realize their needs by consulting the official website API documentation
, but this will virtually increase the user's learning cost. Because there may be only a simple discount chart on the entire website, and time is very tight and needs to be implemented quickly. At this time, it is very painful for users to learn the use of a class library/framework.

Based on the above situation, Bizcharts will launch a product next: Chartmaker. Simply put, it can help you visually configure the chart you want: what you see is what you get, and it can also output code. With Chartmaker, it can help novice data visualization users quickly realize the charts they want without any learning costs. Chartmaker is currently under intense development and is expected to be open source in early October.

The above is the detailed content of Alibaba chart library Bizcharts officially open source. For more information, please follow other related articles on the PHP Chinese website!