Using BizCharts

Init

demo

创建容器

在页面的 body 部分创建一个节点，例如，一个id为mountNode的div。

使用组件生成图表

• 引入图表需要的组件
• 用组件组装成需要的图表
• 把图表渲染到 mountNode 节点上

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} source={data} scale={cols}>
      <Axis name="genre" />
      <Axis name="sold" />
      <Legend position="top" dy={-20} />
      <Tooltip />
      <Geom type="interval" position="genre*sold" color="genre" />
    </Chart>
), document.getElementById('mountNode'));

Composition

component

• 实体组件：在图表上有对应的图形、文本显示。
• 抽象组件：没有显示，是一种概念抽象组件。

Chart 实体组件

图表组件。所有的其他组件都必须由<Chart>包裹。

forceFit[Boolean]

设置图表的宽度是否自适应，设置为 true，则图表 chart 会继承父元素的宽度，用户设置的 width 则不生效。 默认值: false。

height[Number](必填)

指定图表的高度，默认单位为’px’。

data[Array/DataSet]

图表数据源，是一个包含 JSON 对象的数组或者 DataView 对象。

scale[Object]

(fieldName: string, scaleConfig: object)

(scaleConfig: object) 图表数据源相关的比例尺信息，scaleConfig 可配置属性如下。

scale={
  {
    fieldName:'sales',
    //scaleConfig
    {
      type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', // 指定数据类型
      alias: string, // 数据字段的别名
      formatter: function, // 格式化文本内容
      range: array, // 输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据。
      tickCount: number, // 设置坐标轴上刻度点的个数
      ticks: array, // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示
      sync: boolean // 当 chart 存在不同数据源的 view 时，用于统一相同数据属性的值域范围
    }
  }
}

placeholder[String]

图表source为空时显示的内容。会在图表区域的中间显示 “暂无数据” 。

更多属性、方法参考Chart API doc。

Coord 抽象组件

坐标系组件。用来描述<Chart> <View>组件的坐标系，比如笛卡尔坐标系、极坐标系。

抽象出的2维定位系统，描述数据如何映射到平面。BizCharts包含两种类型坐标系：极坐标系（polar、theta、helix）和笛卡尔坐标系。

• <Coord>坐标系组件只作为<Chart>或<View>的child，同时组件下不能嵌套其他图表组件。
• Coord的定义在一个Chart中是唯一的，但<View>中可以有独立坐标系存在。
• 默认采用笛卡尔坐标系，直角坐标系（rect）。
• 通过type属性设置为极坐标

type[String]

• rect：直角坐标系；仅支持2维的x、y。
• polar：极坐标系；2维的角度和半径。
• theta：一种特殊的极坐标系，半径固定，将数据映射到角度，常用于饼图的绘制。
• helix：螺旋坐标系，基于阿基米德螺旋线。

scale[Array]

放大、缩小，默认按照坐标系中心放大、缩小。 Array:数据长度必须为2，第一个值代表 x 方向缩放比例，第二个值代表 y 方向缩放比例。

<Coord scale={[0.7, 1.2]} />

镜像, 沿 x 方向镜像或者沿 y 轴方向映射。

更多属性、方法参考Coord API doc

Axis 实体组件

坐标轴组件。通常包含两个坐标轴，在笛卡尔坐标系下，分别为x轴和y轴，在极坐标系下，则分别由角度和半径2个维度构成。每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（grid）组成。

• <Axis>坐标轴组件只可以作为<Chart>或<View>的child，同时<Axis>组件下不能嵌套其他图表组件。
• BizCharts中将Axis抽离为一个单独的组件，不使用则默认不显示坐标轴及相关信息。
• 使用Axis组件时，必须指定当前坐标轴对应数据源中的字段名

// 制定坐标轴对应数据源中的字段名
<Chart width={600} height={400} source={data}>
  <Axis name="sold" />
  <Geom type="interval" position="genre*sold" color="genre" />
</Chart>

• 一旦使用<Axis>组件，那么所有的坐标轴都会显示，如若需要隐藏某一个坐标轴及相关信息，务必将visible参数并置为false

// 只显示其中一条坐标轴
<Chart width={600} height={400} source={data}>
  <Axis name="sold" />
  <Axis name="genre" visible={false} />
  <Geom type="interval" position="genre*sold" color="genre" />
</Chart>

更多属性、方法参考Axis API doc。

Geom 实体组件

几何标记组件。点、线、面这些几何图形。

BizCharts 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。

• point：点图、折线图中的点
• path：路径图、地图上的路径
• line：折线图、曲线图、阶梯线图、雷达图
• area：区域图（面积图）、层叠区域图、区间区域图、雷达图
• interval：柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图
• polygon：色块图（像素图）、热力图、地图
• schema：k线图、箱型图
• edge：树图、流程图、关系图
• heatmap：热力图

type[String]

几何标记类型。还提供了组合类型。

• pointStack：层叠点图
• pointJitter：扰动点图
• pointDodge：分组点图
• intervalStack：层叠柱状图
• intervalDodge：分组柱状图
• intervalSymmetric：对称柱状图
• areaStack：层叠区域图
• schemaDodge：分组箱型图

position[String]

位置属性的映射，属性用*连接符。

//以下面的语句为例，在 position 属性上，映射了两个属性： cut 和 price，分别表示将 cut 数据值映射至 x 轴坐标点，price 数据值映射至 y 轴坐标点。
<Geom
  position="cut*price"
/>

• field：对应数据字段名
• colors：数据值映射到指定的颜色值
• color1-color2-colorN：映射连续数据，实现颜色渐变

shape、size

类似color属性的配置。

更多属性、方法参考Geom API doc。

//代码示例
<Geom color={['price', '#ff0000-#00ff00']}/>

Legend 实体组件

图例组件。只可以作为<Chart />组件的Child。

• shape 属性，会根据不同的 shape 类型生成图例；
• color 属性, 会赋予不同的图例项不同的颜色来区分图形；
• size 属性, 在图例上显示图形的大小。

图例显示位置。默认值:’right’。

itemFormatter Function

用于格式化图例每项的文本显示。

更多属性、方法参考Legend API doc。

Label 实体组件

几何标记的辅助文本组件。必须是<Geom>的child。

<Geom>
  <Label content='sales' .../>
</Geom>

指定label上显示的文本内容，可以是数据纬度，也可以自定义。

<Label
  content="常量字符串"
  //或者
  content="sales*date"
  //或者
  content={["sales*date", (sales, date)=>{
    return `${data}:${sales}`;
  }]}
/>

formatter[Function]

格式化显示文本信息。

<Label
  content='name'
  formatter={(name, item, index)=>{
    // text 为每条记录 x 属性的值
    // item 为映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息
    // index 为每条记录的索引
    var point = item.point; // 每个弧度对应的点
    var percent = point['percent'];
    percent = (percent * 100).toFixed(2) + '%';
    return name + ' ' + percent;
  }}
/>

htmlTemplate[Function]

自定义html文本。

<Label
  content='name'
  htmlTemplate={(text, item, index)=>{
    // text 为每条记录 x 属性的值
    // item 为映射后的每条数据记录，是一个对象，可以从里面获取你想要的数据信息
    // index 为每条记录的索引
    var point = item.point; // 每个弧度对应的点
    var percent = point['percent'];
    percent = (percent * 100).toFixed(2) + '%';
    // 自定义 html 模板
    return '<span class="title" style="display: inline-block;width: 50px;">' + text + '</span><br><span style="color:' + point.color + '">' + percent + '</span>';
    }
  });
chart.render();  }}
/>

更多属性、方法参考Label API doc。

Tooltip 实体组件

提示框组件。

• <Tooltip>只可以作为<Chart>或<View>的child，同时<Tooltip>组件下不能嵌套其他图表组件。
• BizCharts中将Tooltip抽离为一个单独的组件，不使用Tooltip组件则默认不显示所有提示信息。

<Chart width={600} height={400} data={data}>
  <Tooltip />
  <Geom type="bar" position="genre*sold" color="genre" />
</Chart>

crosshairs[Object]

//可配置值
//geom为 'line', 'area', 'path', 'areaStack 时默认会展示垂直辅助线
//geom为 'interval' 默认会展示矩形背景框
{
  //rect: 矩形框,x: 水平辅助线,y: 垂直辅助线,cross: 十字辅助线。
  type: 'rect' || 'x' || 'y' || 'cross',
  style: {
    lineWidth:2,
    stroke:"#ff0000",
  }
}

containerTpl[String]

tooltip容器模板，必须包含以下class。

<div class="g2-tooltip">
  <!-- tooltip 标题 -->
  <div class="g2-tooltip-title" style="margin:10px 0;"></div>
  <!-- tooltip 内容列表容器 -->
  <ul class="g2-tooltip-list"></ul>
</div>

itemTpl[String]

tooltip每项记录的模板，这个属性可以格式化tooltip的显示内容。

<li data-index={index}>
  <!-- 每项记录的 marker -->
  <span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
  {name}: {value}
</li>

格式化tooltip显示内容

<Chart>
  <Geom
    tooltip={['time*sold', (time, sold) => {
      return {
        //自定义 tooltip 上显示的 title 显示内容等。
        name: 'sold',
        title: 'dddd' + time,
        value: sold
      };
    }]}
  />
</Chart>

更多属性、方法参考Tooltip API doc。

Guide 辅助标记组件

子组件

• Line：辅助线（可带文本），例如表示平均值或者预期分布的直线
• Image：辅助图片，在图表上添加辅助图片
• Text：辅助文本，指定位置添加文本说明
• Region：辅助框，框选一段图区，设置背景、边框
• Html：辅助html，指定位置添加自定义html，显示自定义信息
• Arc：辅助弧线

不同的辅助标记组件所支持的配置属性不一样，主要差异为坐标位置属性差异。

• Text，Html中使用position
• Line，Region，Image，Arc中使用start、end

更多属性、方法参考Guide API doc。

Facet 抽象组件

分面组件。将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩形的窗格中，所有子图采用相同的图表类型。

• 按照指定的维度划分数据集
• 对图表进行排版

<Facet> 系组件只可以作为 <Chart> 组件的child，同时 <Facet> 组件下只能嵌套一个返回组件的匿名函数。

<Facet type='tree' fields={['cut', 'clarity']}>
        //该匿名函数会转为 `eachView:function`
        {(view, facet)=>{
          view.point()
          .position('carat*price')
          .color('cut')
          .shape('circle')
          .opacity(0.3)
          .size(3); 
        }}
</Facet>

• rect：默认类型，指定2个维度作为行列，形成图表的矩阵
• list：指定一个维度，可以指定一行有几列，超出自动换行
• circle：指定一个维度，沿着圆分布
• tree：指定多个维度，每个维度作为树的一级，展开多层图表
• mirror：指定一个维度，形成镜像图表
• matrix：指定两个维度，形成矩阵分面图表

设定数据划分的维度，是数据的字段名，包含多个维度时使用数组传入。

更多属性、方法参考Facet API doc

View 抽象组件

视图组件。由 Chart 实例生成和管理，拥有自己独立的数据源、坐标系和图层，用于异构数据的可视化以及图表组合。一个 Chart 由一个或者多个视图 View 组成，因此 view 上的属性基本同 chart 基本相同。

• 在同一个容器中出现两个或者更多不同坐标系的图表时，可以采用View组件来实现。
• 同一个容器中的两个图表需要采用不同的数据源时。

id[String]

视图的 id 标识，用于唯一标定视图，如果用户不指定，G2 会默认提供一套 id 生成机制（‘view’ + views.length，如 view0, view1, …, viewN)。

更多属性、方法参考View API doc

position

Data

图表数据支持两种数据格式：

• JSON数组
• DataView对象

DataSet

DataSet的目标是为数据可视化场景提供状态驱动（state driven）的、丰富而强大的数据处理能力。

• DataSet（数据集）：一组数据集合
• DataView（数据视图）：单个数据视图，目前有普通二维数据（类似一张数据库表）、树形数据、图数据和地理信息数据几种类型
• state（状态量）：数据集内部流转的控制数据状态的变量
• Transform（变换）：数据变换函数，数据视图做数据处理时使用，包括图布局、数据补全、数据过滤
• Connector（连接器）：数据接入函数，用于把某种数据源（譬如csv）载入到某个数据视图上

数据处理

数据处理分为两个大的步骤：数据连接（Connector）和数据转换（Transform）。

数据连接（Connector）

数据连接负责导入和归一化数据（例如CSV、GeoJSON）。

数据转换（Transform）

数据转换负责进行各种数据转换操作（例如图布局、数据统计、数据补全等）。

在单个数据视图（DataView）的基础上增加了数据集（DataSet）的概念，通过统一的 DataSet 管理，实现了各个数据视图之间的状态同步和交互。

更多属性、方法参考DataSet API doc

数据流

1. 加载数据
2. 对数据进行分组（默认根据size、shape、color分组）
3. 保存原始数据到属性_origin中
4. 数据数值化（例如分类类型转换为索引值）
5. 归一化操作（数值优化、调整分布范围，均匀分布易于用户理解）
6. 计算绘制图形需要的点
7. 映射至图形属性
8. 渲染绘制

参考G2 的数据处理流程

Theme

默认提供两种主题：default、dark。

主题切换

使用setTheme方法切换主题。

 BizCharts.setTheme('dark');

自定义主题

  const seaTheme = {
    animate:false,
    colors:{},
    shapes:{},
  };
  BizCharts.setTheme(seaTheme);

定制参数参考

Interaction

默认交互

• active激活：hover
• select选中：选择、框选

激活

开启以及关闭shape对于hover的响应效果。

<Geom active={false} />
<Geom active={true} />

选中

• 不可选中
• 单选
• 多选
• 选中是否可取消选中

<Geom select={false} />; // 关闭
<Geom select={true} />; // 打开
<Geom select={[true, {
 mode: 'single' || 'multiple', // 选中模式，单选、多选
 style: { }, // 选中后 shape 的样式
 cancelable: true | false, // 选中之后是否允许取消选中，默认允许取消选中
 animate: true | false // 选中是否执行动画，默认执行动画
}]} />;

默认饼图支持选中交互，其他Geom的选中模式默认关闭。

参考链接

BizCharts