双轴图中如何自定义Tooltip？

Question

我想要在双轴图的tooltip中显示一些富文本内容应该如何实现？

Answer 1

解决方案 Solution

这个问题的前提条件是双轴图，事实上对于大多数具有Tooltip自定义功能的图表组件来说，是不是双轴图对于自定义Tooltip没有影响。

接下来我以我最近在用的VisActor图表举例，逻辑是这样的：

• 确定你想要自定义的tooltip类型
• 注册对应的事件触发自定义tooltip的显示
• 自行设计tooltip的布局

在自定义事件中，你可以将tooltip渲染成任何你需要的样子。通过回调事件的参数，你可以获取到当前hover的元素具体的数据。

代码示例 Code Example

const vchart = new VChart(spec, { dom: "container" });

vchart.setTooltipHandler({
  showTooltip: (activeType, tooltipData, params) => {
    // some code of custom tooltip
    const tooltip = document.getElementById("custom-tooltip");
    if (!tooltip) return;
    tooltip.style.visibility = "visible";
    tooltip.style.left = params.event.x + 20 + "px";
    tooltip.style.top = params.event.y + 20 + "px";
    tooltip.style.position = "absolute";
    tooltip.style.background = "white";
    tooltip.style.padding = "10px";
    tooltip.innerText = "This is Custom Tooltip";
  },
  hideTooltip: () => {
    // hide your custom tooltip
    const tooltip = document.getElementById("custom-tooltip");
    if (!tooltip) return;
    tooltip.style.visibility = "hidden";
  }
});

结果展示 Results

https://codesandbox.io/s/custom-tooltip-dyvy3z

相关文档 Quote

https://visactor.bytedance.net/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip

https://visactor.bytedance.net/vchart/demo/tooltip/custom-tooltip-handler?keyword=tooltip