【问题标题】:Using Chart.js, how do I avoid having tooltips overlap?使用 Chart.js,如何避免工具提示重叠?
【发布时间】:2020-04-22 14:27:17
【问题描述】:

我通过Angular Char 使用Chart.js。我已经显示了所有工具提示,以便通过创建plugin 下载包含显示信息的图表。

工具提示重叠,似乎没有任何逻辑可以分发它们,因此它们不会。有没有办法做到这一点?

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

// 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();

图表:

【问题讨论】:

  • 你能解决这个问题吗?
  • 不 - 似乎不可能,或者至少对于工作来说太复杂了。将工具提示置于悬停状态,并将值置于键中。

标签: javascript angularjs chart.js


【解决方案1】:

您可以使用这些 sn-ps 实现一些重叠解决方案:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-11-22
    • 1970-01-01
    • 1970-01-01
    • 2015-08-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-15
    相关资源
    最近更新 更多