antv g2 很轴显示时间,tooltip显示时间段的方法

499 阅读1分钟

需求

  • 想要实现图表横轴显示时间点,提示的tooltip显示时间段,如下图:

image.png

解决方法

  • 第一想法是去修改tooltip中title,让title根据横轴的时间点不同显示不一样,但尝试之后失败。
  • 之后改变思路,g2中chart可以有多个view,那我们现在让显示的图像的横轴不显示,对应的tooltip就是时间段了。然后多用一个view专门显示横轴,其他全部不显示。这样在界面上看的效果是实现了。

代码

//view1
view1.axis('横轴名称', false);//横轴不显示
//view2
view2.axis('横轴名称', false);//横轴不显示
//view3用于解决时间段显示且不改变x轴时间点问题,图表不显示
    let view3 = chart.view();
    view3.source(temp, {
      //...
      }
    });
    view3.axis('横轴名称', true);
    view3.axis('纵轴名称', false);
    view3.tooltip(false); //tooptip不显示
    view3.line().position('横轴名称*纵轴名称').opacity(0).shape('smooth');//view3不显示