【问题标题】:chart.js tooltip position, tooltip not displayedchart.js 工具提示位置,工具提示不显示
【发布时间】:2018-08-23 14:48:05
【问题描述】:

我有一个包含两个数据集的折线图。最初,Y 轴是 0-100。第一行大致是一条直线,其值为 70,第二行全部低于 30。如果我通过强制 Y 轴最小值为 65 和最大值为 75 来垂直缩放图表(即我想检查第一行垂直扩展)然后当我将鼠标悬停在数据点上时,工具提示丢失。实际上我认为它不在图表中(可以这么说:-))。

工具提示似乎自动垂直定位在最低和最高数据点之间,即使其中一个数据点位于图表下方。

我的问题:这是一个错误还是有办法告诉 chart.js 在确定工具提示垂直位置时忽略图表外的数据点?

如果工具提示始终处于固定的垂直位置,即跨越图表顶部或垂直居中在图表上,我什至会很高兴。

使用chart.js V2.7.1

【问题讨论】:

    标签: chart.js


    【解决方案1】:

    工具提示有两种定位模式,根据documentation

    可能的模式有:

    • '平均'
    • '最近的'

    'average' 模式会将工具提示放置在工具提示中显示的项目的平均位置。 'nearest' 会将工具提示放置在最接近事件位置的元素位置。

    您可以在相关的samples page 上查看这两种模式的运行情况。

    average 是默认模式。根据您的描述,切换到nearest 应该可以解决您的问题。

    【讨论】:

    • 已修复。非常感谢。 chart.js 有很多选择 - 只需找到它们!
    • 工具提示现在似乎使用了动画?我需要 3 或 4 步才能到达正确的位置?
    • 您能否提供一个代码 sn-p(在您的问题中)来显示您的问题?很难知道你的意思。请注意,动画默认开启。
    • 不容易提取基本代码 sn-p - 如果鼠标从图表的左侧快速移动到右侧,则工具提示使用动画(即几个中间位置)到达正确的位置.
    • 更新了相关示例页面的链接:chartjs.org/docs/latest/samples/tooltip/position.html
    猜你喜欢
    • 1970-01-01
    • 2015-08-22
    • 2021-01-15
    • 1970-01-01
    • 2014-10-28
    • 1970-01-01
    • 2020-12-31
    • 2014-08-22
    • 1970-01-01
    相关资源
    最近更新 更多