【兼容】开放 API 设计

@逍为(hustcc)

使用一些实际的自定义场景，去看 G2 需要提供哪些体系的 API。

G2 能力透出

View 和 Geometry 是两个核心的类，按照他们包含的内容进行提供 API（这里没有列举出使用 G2 构建图表的必备 API）

• view
  • data
    • ✅ getOriginalData()
    • ✅ getData()
    • ✅ getOptions()
  • layout
    • ✅ getPadding()
    • ❓ getCoordinateSize()
  • scale
    • ✅ getScale(field)
  • coordinate
    • ✅ getCoordinate()
      • ✅ convert(x, y)
    • ✅ getWidth
    • ✅ getHeight
  • elements
    • ✅ getGeometries()
    • ✅ getElements()
    • ✅ getElementsBy(condition)
    • ✅ getComponents()
  • analysis
    • ✅ filter(field, condition) 筛选
    • ✅ changeData(data) 更新数据（下钻）
    • ❓ state() 设置数据状态（联动）（在 element 上）
• geometry
  • ❓ getWidth() （用 coordinate 比较明确）
  • ❓ getHeight()
  • data
    • ✅ getData()
    • ❌ getOptions() （等 options 优化后提供）
    • ✅ getFields()
    • ✅ getGroupFields()
    • ✅ getXYFields()
    • ✅ getXField()
    • ✅ getYField()
  • elements
    • ✅ getElemets()
    • ✅ getElementsBy(condition)
  • adjust
    • ✅ getAdjust(type)
  • attribute
    • ✅ getAttribute(key)
    • ✅ getAttributeValues(attr, datum)
  • coordinate
    • ✅ getCoordinate()
• ✅ element
  • ✅ getModel()
  • ✅ getBBox()
  • ✅ getData()
  • ✅ setState()
• components
  • tooltip
    • show
    • hide
• events（每个组件都有自己的交互事件，可以 prevenDefault）
  • tooltip
    • valuechanged
  • legend
    • selectchanged
  • slider
    • valuechanged

业务自定义场景

自定义 legend

实现方式是饼图使用 G2 绘制，但是图例使用 div/react 绘制。

const [data, setData] = useState([]);
chart.on('afterrender', () => {
  const elements = chart.getElements();
  const data = elements.map(ele => ({
      type: ele.getModel().data.type,
    value: ele.getModel().data.value,
    color: ele.getModel().mapping.color,
  }));
  setData(data);
});
// render react component with data

指标卡图例，带 tooltip 功能

不 hover 的时候，指标卡显示最新值，hover 分组的时候，指标卡显示分组的指标值。指标卡 hover 的时候，高亮图表元素。

指标卡使用 react 实现，从图表中获取数据。

const [data, setData] = useState([]);
chart.on('tooltip:onchange', ({ items }) => {
  // 可能需要做一些数据处理
  setData(data);
});
const onIndicatorMouseOver = (data) =>  {
    const elements = chart.getElementBy((ele) => isEqual(ele.getMolde().data, data));
  elements.forEach(ele => ele.setState('active'));
}
// 渲染
render() {
  <IndicatorList data={data} onMouseOver={onIndicatorMouseOver}></IndicatorList>
}

自定义标注

方法是在柱形图中间，用 div 绘制。那么难点就是如何获取 div 的决定定位 x y。也就是柱子的中间位置。

const [data, setData] = useState([]);
const elements = chart.getElements();
// 第一个空隙的 y 位置
const y1 = elements[0].getBBox().bottom.y
// 第一个空隙的高度
const height1 = elements[1].getBBox().top.y - elements[0].getBBox().bottom.y;
// 有了这些信息，绘制 div 位置的计算，就不难了。

联动其他图表

很多场景，比如：

• 饼图点击的时候，联动另外一个表格
• hover 柱形图的一个柱子，高亮饼图的一个数据区块

todo