同步2个图表与g2plot的交互

Question

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

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

​

​

Answer 1

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

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

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 });
  })
})