CODEWITHSUNDEEP
javascriptgraphchartsdata-visualizationg2plot
Metra
Metra

Reputation: 393

Synchronise 2 charts interactions with g2plot

I'm using G2plot (https://github.com/antvis/G2Plot) and I want to synchronise my 2 charts when I have a hover on one chart ? For compare as a benchmark. I want keep the same the hover effect (the background) and display tooltip on both charts. . Do you have any idea ?

I have found this example : https://g2plot.antv.vision/en/examples/advanced/connection but it didnt help me.

enter image description here

Upvotes: 0

Views: 417

Answers (1)

Kasmine
Kasmine

Reputation: 1

Try to update to G2Plot 2.x. It supports custom interactions.

An enchanting example using MultiView plot, otherwise you can using 2 plots and customize interactions as follows:

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

Upvotes: 0

Related Questions