feat(tooltip): on and emit

[pearmini]

Tooltip

手动触发 Tooltip 和抛出数据。

获得提示数据

chart.on('tooltip:show', (event) => {
  console.log(event.data.data);
});

chart.on('tooltip:hide', () => {
  console.log('hide');
});

手动控制展示/隐藏

对于 Interval、Point 等非系列 Mark，控制展示的方式如下：

// 条形图、点图等
chart
  .interval()
  .data([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre');

chart.render().then((chart) =>
  chart.emit('tooltip:show', {
    data: {
      data: { genre: 'Sports' },
    },
  }),
);

对于 Line、Area 等系列 Mark，控制展示的方式如下：

chart
  .line()
  .data({ type: 'fetch', value: 'data/aapl.csv' })
  .encode('x', 'date')
  .encode('y', 'close');

chart.render().then((chart) =>
  chart.emit('tooltip:show', {
    data: {
      data: { x: new Date('2010-11-16') },
    },
  }),
);

隐藏的方式如下：

chart.emit('tooltip:hide');

[pearmini]

饼图或者使用了 transform 的还需要处理一下。