javascript - 与 g2plot 同步 2 个图表交互

Question

我正在使用 G2plot ( https://github.com/antvis/G2Plot )，当我将鼠标悬停在一个图表上时，我想同步我的 2 个图表？用于比较作为基准。我希望在两个图表上保持相同的悬停效果（背景）和显示工具提示。. 你有什么主意吗 ？

我找到了这个例子：https ://g2plot.antv.vision/en/examples/advanced/connection但它对我没有帮助。

Answer 1

尝试更新到 G2Plot 2.x。它支持自定义交互。

一个使用 MultiView 绘图的迷人示例，否则您可以使用 2 个绘图并自定义交互，如下所示：

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

const data = [
  {
    type: '家具家电',
    sales: 38,
  },
  {
    type: '粮油副食',
    sales: 52,
  },
  {
    type: '生鲜水果',
    sales: 61,
  },
  {
    type: '美容洗护',
    sales: 145,
  },
  {
    type: '母婴用品',
    sales: 48,
  },
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];

const div = document.getElementById('container');
const div1 = document.createElement('div')
div1.id = 'container1'
div.parentNode.append(div1)

const columnPlot = new Column('container', {
  data,
  autoFit: false,
  height: 200,
  xField: 'type',
  yField: 'sales',
});

columnPlot.render();

const columnPlot1 = new Column('container1', {
  data,
  autoFit: false,
  height: 200,
  xField: 'type',
  yField: 'sales',
});

columnPlot1.render();

columnPlot.on('tooltip:show', (e) => {
  const { title } = e.data;
  const elements = columnPlot1.chart.geometries[0].elements.filter(ele => ele.getModel().data['type'] === title)
  elements.forEach(element => {
    const box = element.shape.getCanvasBBox();
    columnPlot1.chart.showTooltip({ x: box.minX + box.width / 2, y: box.minY + box.height / 2 });
  })
})