使用Chart.js，如何避免工具提示重叠?

问题描述

我正在通过 Chart.js .github.io/angular-chart.js/"rel =" nofollow noreferrer>角度字符.我已经显示了所有工具提示，以便通过创建插件来下载包含显示信息的图表.

I am using Chart.js via Angular Char. I have displayed all the tooltips in order to download a chart with the information displayed by creating a plugin.

工具提示重叠，似乎没有任何逻辑可以分发它们.有办法吗?

The tooltips overlap, there doesn't seem to be any logic to distribute them so that they don't. Is there a way to do this?

一些插件代码.这对我的问题并不重要. "beforeRender"功能为数据集中的每个项目创建一个新的Chart.Tooltip，并用afterDraw渲染它们:

Some of the plugin code. This isn't important to my question. The 'beforeRender' function creates a new Chart.Tooltip for each item in the dataset and afterDraw renders them:

// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();

图表:

推荐答案

您可以使用以下代码段实现一些重叠的解决方案:

You can achieve some overlap solution using these snippets:

tooltips: {
    mode: 'index',
    intersect: false,
    yPadding: 2,
    xPadding: 2,
    caretSize: 0,
    borderWidth: 0,
}

这篇关于使用Chart.js，如何避免工具提示重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！