工具类

阿里巴巴图表库Bizcharts正式开源,使用教程

前言

阿里于去年开放了它的内部图表库 Bizcharts 初版,在这一年的时间里,Bizcharts 新增了许多特性,并对渲染细节及渲染性能进行大幅度的调优。今天来讲讲Bizcharts的由来,适用业务场景,如何使用以及规划。

阿里巴巴图表库Bizcharts正式开源,使用教程

它的由来?

目前阿里基本上绝大部分业务的前端用的都是 React 技术栈,而在业务场景中又经常会有图表绘制的需求,所以一个 基于 React 技术栈的图表库 就显得非常必要,而在阿里内部又有像 G2 这样非常强大的图表底层引擎,所以在该引擎之上做一层封装是一件很自然而然的事情,而 Bizcharts 就是基于 G2 引擎的 React 版本的封装。

Bizcharts 的语法设计非常贴切 React 的使用方式,图表的各个部分都拆分成了独立的 React 类,如: 代表提示信息, 代表坐标轴。 所有图表的配置项皆为组件的 props 。

Bizcharts 在最新的 3.x 版本中,支持 Canvas 及 SVG 两种模式的图表渲染。如果单就图表库的视角来看,选择 Canvas 和 SVG 各有千秋,Bizcharts 两种方式都支持,适用于各种复杂的业务场景。

Bizcharts 在阿里内部多个部门多条业务线里反复打磨了两年之久后,于去年年底对外开源。在开源的半年时间里,做了大量的迭代优化,现在功能及性能已经做了大量的优化,非常推荐在正式环境使用。

适合什么业务场景?

阿里内部的业务非常复杂:电商业务,后台系统,业务大屏等等,这些业务对图表都有大量定制化的需求,并非简单的折线图柱状图就能满足,这也决定了 Bicharts 其中一个特性:支持自由定制化。同时,上文也介绍了阿里 95% 以上的业务前端用的都是 React 技术栈,所以总的来说 Bizcharts 适用的业务场景是『使用React 技术栈并有图表绘制需求场景』,从这个角度来说,Bizcharts 适用的业务场景是非常广的。相较于 Echarts 图表框架的高度封装,Bizcharts 能满足更多业务定制化需求。

如何使用?

Bizcharts 的 API 为 React 量身定制,使用起来就像搭积木的感觉一般。下面我们以画一个基础的柱状图为例讲解:

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";

class Groupedcolumn extends React.Component {
  render() {
    const data = [
      {
        name: "London",
        "Jan.": 18.9,
        "Feb.": 28.8,
        "Mar.": 39.3,
        "Apr.": 81.4,
        May: 47,
        "Jun.": 20.3,
        "Jul.": 24,
        "Aug.": 35.6
      },
      {
        name: "Berlin",
        "Jan.": 12.4,
        "Feb.": 23.2,
        "Mar.": 34.5,
        "Apr.": 99.7,
        May: 52.6,
        "Jun.": 35.5,
        "Jul.": 37.4,
        "Aug.": 42.4
      }
    ];
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: "fold",
      fields: ["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."],
      // 展开字段集
      key: "月份",
      // key字段
      value: "月均降雨量" // value字段
    });
    return (
      <div>
        <Chart height={400} data={dv} forceFit>
          <Axis name="月份" />
          <Axis name="月均降雨量" />
          <Legend />
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom
            type="interval"
            position="月份*月均降雨量"
            color={"name"}
            adjust={[
              {
                type: "dodge",
                marginRatio: 1 / 32
              }
            ]}
          />
        </Chart>
      </div>
    );
  }
}
export default Groupedcolumn;

下图是上述代码片段的渲染结果:
阿里巴巴图表库Bizcharts正式开源,使用教程

未来的规划

Bizcharts 本身自带了大量的 Demo,可以满足绝大部分的通用使用场景,使用的时候,只需要把 Demo 中的数据替换成自己业务中的数据即可,但即便如此,也无法完全覆盖到高度定制化的场景。当然,使用 Bizcharts 的用户可以通过查阅 官网 API 文档 来实现需求,但这样无形中加大了用户的学习成本。因为可能整个网站上只有一个简单的折现图,而且时间非常紧,需要快速实现,这个时候让用户去学习一个类库/框架的使用是非常蛋疼的。

根据上述情况,Bizcharts 接下来会推出一款产品:Chartmaker。简单来讲,它能够帮助你可视化的配置出你想要的图表:所见即所得,同时还能输出代码。有了 Chartmaker 后,就能够帮助数据可视化小白用户快速的实现自己想要的图表,无任何学习成本。目前 Chartmaker 正在紧张的开发中,预计十月初对外开放。

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

(40)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注