JavaScript - Chart.js 工具提示显示错误的 x 轴值

标签 javascript jquery canvas chart.js

我有一个包含两个不同数据集的图表,但有时它们具有相同的 x、y 坐标。但是,当我将鼠标悬停在共享点 上时,它有时会显示错误的日期。 y 值是正确的,但 x 值显示不正确。

尝试将鼠标悬停在共享点 here on codepen .

在下图中,您可以看到我将鼠标悬停在 { y: 56.04, x: April 05, 2014 } 上,但显示的 xLabel 值为 58.28,即 2012 年 4 月 15 日。此外,您可以在图表中看到 57.0558.28 都将 April 15, 2012 作为 x 值,但它们不在相同的 y 位置!

代码太长无法在stackoverflow上分享,不过我做了 this codepen 这样您就可以在那里查看、复制和编辑它。

tooltip bug


更新

我更新了具有相同日期的笔和固定点。感谢 @Oluwafemi Sule,我还添加了 type: 'time' .

Here my edited pen .

但是现在,x 轴上的日期很奇怪。他们不再说 March 06, 2011,而是说 Q1 2011。而且工具提示仍然存在错误。

最佳答案

我通过使用这样的工具提示回调解决了我的问题:

options: {
    tooltips: {
        callbacks: {
            title: function(tooltipItems, data) {
                return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
            }
        }
    }
}

现在我的工具提示直接从相应的数据集获取它们的标题。

Chartjs 版本:2.9.3

关于JavaScript - Chart.js 工具提示显示错误的 x 轴值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44965174/

相关文章:

javascript - 动态更改标签和占位符取决于加载的 html

javascript - 没有 Canvas 的按钮内的圆圈。 html/javascript

javascript - 使用 Javascript 保存游戏

php - 将id插入MYSQL表以进行多图片上传

javascript - 将 "Span"Html 元素定位到我单击鼠标的位置

android - 如何在 Android Canvas 上为路径设置动画

javascript - 在 IE 和 FF 中使用 js 禁用输入提交按钮不起作用

php - 在下拉框中进行选择后显示文本值

javascript - 如何使用 JavaScript 从另一台服务器获取数据?

javascript - 将可拖动图像附加到 div 以进行打印