一张画布中绘制作两个图表，通过tooltip分别进行格式化

可以使用JavaScript中的D3库来实现这个需求。

首先，使用D3的选择器选择画布元素，然后使用D3的数据绑定方法将数据绑定到两个图表上。接着，使用D3的绘图方法绘制两个图表，并为它们添加tooltip。

在添加tooltip时，可以使用D3的鼠标事件监听器来监听鼠标移动事件，并通过D3的提示框组件来展示tooltip。可以为每个图表定义不同的格式化函数，以便在tooltip中显示不同的格式化内容。

下面是一个示例代码片段，用于展示如何使用D3来实现这个需求：

// 选择画布元素
const canvas = d3.select('#canvas');

// 绑定数据到两个图表上
const data1 = [1, 2, 3, 4, 5];
const data2 = [10, 20, 30, 40, 50];
const chart1 = canvas.selectAll('.chart1')
  .data(data1);
const chart2 = canvas.selectAll('.chart2')
  .data(data2);

// 绘制两个图表
chart1.enter()
  .append('rect')
  .attr('class', 'chart1')
  .attr('x', (d, i) => i * 20)
  .attr('y', 10)
  .attr('width', 10)
  .attr('height', d => d * 10)
  .on('mousemove', (event, d) => {
    // 格式化tooltip
    const tooltipContent = `Chart 1: ${d}`;
    // 显示tooltip
    d3.select('#tooltip')
      .style('left', `${event.pageX}px`)
      .style('top', `${event.pageY}px`)
      .html(tooltipContent)
      .transition()
      .duration(200)
      .style('opacity', 0.9);
  })
  .on('mouseout', () => {
    // 隐藏tooltip
    d3.select('#tooltip')
      .transition()
      .duration(200)
      .style('opacity', 0);
  });

chart2.enter()
  .append('circle')
  .attr('class', 'chart2')
  .attr('cx', (d, i) => i * 20 + 5)
  .attr('cy', 100)
  .attr('r', d => d)
  .on('mousemove', (event, d) => {
    // 格式化tooltip
    const tooltipContent = `Chart 2: ${d}`;
    // 显示tooltip
    d3.select('#tooltip')
      .style('left', `${event.pageX}px`)
      .style('top', `${event.pageY}px`)
      .html(tooltipContent)
      .transition()
      .duration(200)
      .style('opacity', 0.9);
  })
  .on('mouseout', () => {
    // 隐藏tooltip
    d3.select('#tooltip')
      .transition()
      .duration(200)
      .style('opacity', 0);
  });

需要注意的是，代码中的tooltip展示和隐藏动画效果可以根据实际需求进行调整。