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

JavaScript - Chart.js tooltip shows wrong x-axis value(JavaScript - Chart.js 工具提示显示错误的 x 轴值)

本文介绍了JavaScript - Chart.js 工具提示显示错误的 x 轴值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

尝试将鼠标悬停在 共享点

<小时>
更新
我更新了日期相同的笔和定点.感谢 @Oluwafemi Sule，我还添加了 type: 'time'.
这里是我编辑的笔.
但是现在，x 轴上的日期很奇怪.他们不再说 March 06, 2011，而是说 Q1 2011.而且工具提示仍然存在错误.
解决方案
您在图表配置中为类别笛卡尔轴定义了自定义比例.将 xAxes 的类型设置为类别".这可能不是必需的，因为 ChartJS 默认会选择它.
选项:{秤:{x轴:[{类型:'类别'，……
另外，第二个数据集的格式不正确.您应该以 {x: xval, y: yval}</code> 格式提供数据点.
参考资料:
http://www.chartjs.org/docs/latest/axes/cartesian/time.html#time-cartesian-axis
I have a chart with two different datasets, but sometimes they have the same x, y coordinates. But when I hover a shared point, it sometimes shows the wrong date. The y value is correct, but it's the x value that is not showing correctly.
Try hovering a shared point here on codepen. In the image below you can see I'm hovering { y: 56.04, x: April 05, 2014 }, but is shows the xLabel value of 58.28, which is April 15, 2012. Also, you can see in the chart that both 57.05 and 58.28 have April 15, 2012 as x-value, but they are not on the same y position! The code is too long to share on stackoverflow, but I made this codepen so you can view, fork and edit it there. Update I updated the pen and fixed points that have the same date. I also added type: 'time' thanks to @Oluwafemi Sule. Here my edited pen. But now, the dates on the x-axis are weird. They don't say March 06, 2011 anymore, but they say Q1 2011. And the tooltips still bug. 解决方案 You defined a custom scale for a category cartesian axis in your chart configuration. Set the type for your xAxes to 'category'. This may not be neccessary as ChartJS picks this up by default. options: { scales: { xAxes: [{ type: 'category', .... Also, the second data set isn't formatted properly. You should supply the data points in {x: xval, y: yval} format. References: http://www.chartjs.org/docs/latest/axes/cartesian/time.html#time-cartesian-axis 这篇关于JavaScript - Chart.js 工具提示显示错误的 x 轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！