需求
- 想要实现图表横轴显示时间点,提示的tooltip显示时间段,如下图:
解决方法
- 第一想法是去修改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不显示