logoCreated with Sketch.

G2Plot

子弹图

阅读时间约 1 分钟

定义

子弹图通过线性表达方式展示单一数据源各阶段精确的数据信息、某项数据与不同目标的校对结果等。

何时使用

显示阶段性数据信息，表达一些阶段性的数据。

数据与图形的映射

分类数据字段映射到分类轴位置；连续数据字段映射到数据条的长度；目标字段映射到测量标记的刻度轴位置；范围数组映射到背景色条的大小

分析目的

比较、范围

数据准备

1 个「数值」字段，作为度量实际数值

1 个「数值」字段，作为比较度量的目标标记

1 个范围数组「数值」字段，作为区间范围的划分

0 ～ 1 个「无序名词」字段，作为分类字段

设计指引

元素构成

子弹图的发明是为了取代仪表盘上常见的那种里程表，时速表等基于圆形的信息表达方式。更多可以查看：Bullet Graph Design Specification

design

快速上手

import { Bullet } from '@antv/g2plot';

const data = [
  {
    title: '满意度',
    ranges: [100],
    measures: [80],
    target: 85,
  },
];

const bulletPlot = new Bullet('container', {
  data: [{ title: '满意度', ranges: [100], measures: [80], target: 85 }],
  measureField: 'measures',
  rangeField: 'ranges',
  targetField: 'target',
  xField: 'title',
  color: {
    range: '#f0efff',
  },
  yAxis: false,
});

bulletPlot.render();
📊 查看更多示例.

🎨 子弹图详细的配置参考 API 文档。

子弹图特性

  • 正在努力补充中...