Chart API Design #4551

新增 API 汇总

class Node {
  /**
   * 获取渲染view实例
   */
  getView() {}
  /**
   * 获取所有的scales
   */
  getScales() {}
  getScale(key: string) {}
  /**
   * 获取组件
   */
  getComponents() {}
  getComponent(key: string) {}
  /**
   * 获取主题
   */
  getTheme() {}
  getCoordinate() {}
  /**
   * 获取 Canvas Group
   */
  getGroup() {}
  /**
   * 根据数据获取坐标点
   */
  getXY(datum: DataOptions): Point {}
  /**
   * Tooltip 相关
   */
  showTooltip()
  hideTooltip()
  lockTooltip()
  unlockTooltip()
}

getScale()

获取实例信息。getCoordinate() 、getComponents()、getTheme()、getMarks() 同理。

使用

const chart = new Chart({...});
const interval = chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'genre').
  .encode('color', 'genre');

interval.getScale('x'); // 

实现

方案一

在 Node 中透出获取实例的方法。

1. runtime/plot.ts 渲染图表中获取图表 views 信息，放入 context 中。绑定每个 Node 和 view：

   context.views = views;
   views.forEach(view => {
    view.node = node;
   })

2. api/node.ts 向上查找得到 Chart 实例后获取 context 属性。根据 node 查找得到当前view，得到所有的信息。

   class Node {
   getView(){
    const chart = findRoot();
    const { views }= chart.context();
    return views.find(v => v.node === this);
   };
   getScale(key: string){
    const { scale } = this.getView();
    return scale[key];
   };
   getComponent(comp: string){};
   getTheme(){};
   getMarks(): Mark[] {};
   }

方案二

在 Chart 中透出，通过指定 node 来获得指定的 node 的实例信息。 在 api/chart.ts 中，

class Chart {
  getViews(){
    return this._context.views;
  }
  getScale(node: Node, key: string){
    const view = findViewByNode(node);
    return view.scale[key];
  }
  getComponents(comp: string){};
  getTheme(){};
  getMarks(): Mark[]{};
}

getXY(datum){}

获取当前数据对应的坐标点。（如果是面积类Mark：Interval、Plogen。则返回起始坐标）

使用

const chart = new Chart({...});
const interval = chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'genre').
  .encode('color', 'genre');

interval.getXY({ x: 'German', y: 2340 }); // { x: 130, y: 245 }

实现

getXY(datum): Point {
  // 找到 mark 信息
  const mark = this.findMark();
  const { key, value } = mark;
  // 找到当前数据的index
  const index = key.data.findIndex(datum);
  const dataInfo = value.data[index]
  return dataInfo.points[0]
}

changeVisible

使用

const chart = new Chart({...});
const interval = chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'genre').
  .encode('color', 'genre');
chart.render();
chart.changeVisible(false);

实现

const canvas = getCanvas();
canvas.changeVisible();

tooltip 相关 API

等待交互 ready 后再开发。

• showTooltip()
• hideTooltip()
• lockTooltip()
• unlockTooltip()