双Y轴折线图 同时使用线和面渲染的时候会出现 Tooltip 数据重复

[LukeCG]

上代码： import { Chart } from '@antv/g2'; const data = [ { year: '12/01', value: 2623, dun: 3.3 }, { year: '12/02', value: 4099, dun: 0.5 }, { year: '12/03', value: 3430, dun: 2.7 }, { year: '12/04', value: 2924, dun: 1.2 }, { year: '12/05', value: 3500, dun: 2.5 }, { year: '12/06', value: 3800, dun: 2.3 }, { year: '12/07', value: 5918, dun: 1.3 } ]; const chart = new Chart({ container: 'doubleYLine', width: 580, height: 300, appendPadding: [30, 0, 0, 0], });

chart.data(data);

// 起始位置（左上角）
chart.annotation().text({
  content: '( 万米 )', // 显示的文本内容
  position: ['start', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
  top: true, // 在 canvas 最上层，默认为 false, 即绘制在最下层
  style: {
    fill: '#A6A6A6',
    stroke: '#0c123d',
    fontSize: '12', // 文本大小
  },
  offsetX: -35, // x 方向的偏移量
  offsetY: -25, // y 方向偏移量
})

// 起始位置（右上角）
chart.annotation().text({
  content: '( 吨 )', // 显示的文本内容
  position: ['end', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
  top: true, // 在 canvas 最上层，默认为 false, 即绘制在最下层
  style: {
    fill: '#A6A6A6',
    stroke: '#0c123d',
    fontSize: '12', // 文本大小
  },
  offsetX: 0, // x 方向的偏移量
  offsetY: -25, // y 方向偏移量
})

chart.scale({
  year: {
    range: [0, 1],
  },
  value: {
    min: 0,
    max: 7000,
    sync: true,
    nice: true,
  },
  dun: {
    min: 0,
    max: 4,
    sync: true,
    nice: true,
  }
});

chart.axis('value', {
  title: {},
  grid: {
    line: {
      type: 'line',
      style: {
        lineDash: [4]
      }
    },
  }
})

chart.axis('dun', {
  title: {},
  grid: null,
})

chart.axis('year', {
  title: {},
  line: {
    style: {
      lineWidth: 2,
    }
  }
})

chart.tooltip({
  position: 'top',
  offset: 10,
  shared: true,
  showCrosshairs: true,
  crosshairs: {
    line: {
      style: {
        stroke: "l(270) 0#000000 0.5:#2593e0 1:#ffffff",
        lineWidth: 0.5,
      },
    },
  },
});

chart
  .area()
  .position('year*value')
  .color("l(90) 0#3256ee 0.5:#3256ee 1:#ffffff");
chart
  .line()
  .position('year*value')
  .color("#3256ee");
chart
  .point()
  .position('year*value')
  .color('#3256ee')
  .shape('circle');

chart
  .area()
  .position('year*dun')
  .color("l(90) 0#03aabd 0.5:#03aabd 1:#ffffff");
chart
  .line()
  .position('year*dun')
  .color("#03aabd");
chart
  .point()
  .position('year*dun')
  .color('#03aabd')
  .shape('circle');

chart.render();

如果把双Y轴的 chart.area()或者chart.line()注释某一个就没有问题

[hustcc]

可以帮忙搞一个 live demo 吗？

[LukeCG]

@hustcc https://stackblitz.com/edit/react-tayrhk?file=src%2Findex.js

另外，请教一个问题，折线图我们可以通过chart.getXY方法获取某个数据的画布坐标点，然后通过chart.showTooltip方法达到图表初始化的时候自动展示某个点的Tooltip；那么如果是饼图的话，也就是坐标系是 'theta'的时候，我们有没有办法获取饼图中某个对应的坐标点呢🤔？饼图的时候用chart.getXY方法获取某个数据的画布坐标点是报错的

[LukeCG]

另外，再请教一个问题，G2中，有没有类似echarts中通过 调用 dispatchAction 来触发的事件的方式呢，在实际的项目中，这种通过代码主动去触发某个事件的需求还是蛮多的；

echarts中对dispatchAction的描述：https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

通过dispatchAction实现的一个简单案例：https://gallery.echartsjs.com/editor.html?c=xEG1fyp-v 参数：

[hustcc]

@hustcc https://stackblitz.com/edit/react-tayrhk?file=src%2Findex.js

另外，请教一个问题，折线图我们可以通过chart.getXY方法获取某个数据的画布坐标点，然后通过chart.showTooltip方法达到图表初始化的时候自动展示某个点的Tooltip；那么如果是饼图的话，也就是坐标系是 'theta'的时候，我们有没有办法获取饼图中某个对应的坐标点呢🤔？饼图的时候用chart.getXY方法获取某个数据的画布坐标点是报错的

ref： https://github.com/antvis/G2/issues/3238

[hustcc]

另外，再请教一个问题，G2中，有没有类似echarts中通过 调用 dispatchAction 来触发的事件的方式呢，在实际的项目中，这种通过代码主动去触发某个事件的需求还是蛮多的；

echarts中对dispatchAction的描述：https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

通过dispatchAction实现的一个简单案例：https://gallery.echartsjs.com/editor.html?c=xEG1fyp-v 参数：

ref: https://github.com/ant-design/ant-design-charts/issues/465

[hustcc]

tooltip 重复的问题，我告诉一下原理：

tooltip 的 item 会将所有的图形的 item 取出来，然后根据 color 映射的颜色进行去重，而在这个 case 中，你设置有 style，所以无法感知 color。

解法：使用 customItems: () => {} 进行自己的去重逻辑。

chart.tooltip({
   customItems: (items) => newItems(item)
,})

[yusgboy]

https://g2.antv.vision/zh/docs/manual/faq