JavaScript-Chart.js工具提示显示错误的x轴值
我有一张包含两个不同数据集的图表，但有时它们有相同的x，y坐标。但当我将鼠标悬停在共享点上时，它有时会显示错误的日期。y值正确，但x值显示不正确 尝试悬停共享点 在下图中，您可以看到我正在盘旋{y:56.04，x:April 05，2014}，但显示的是JavaScript-Chart.js工具提示显示错误的x轴值,javascript,jquery,canvas,chart.js,Javascript,Jquery,Canvas,Chart.js,我有一张包含两个不同数据集的图表，但有时它们有相同的x，y坐标。但当我将鼠标悬停在共享点上时，它有时会显示错误的日期。y值正确，但x值显示不正确 尝试悬停共享点 在下图中，您可以看到我正在盘旋{y:56.04，x:April 05，2014}，但显示的是58.28的xLabel值，即2012年4月15日。此外，您可以在图表中看到57.05和58.28都将2012年4月15日作为x值，但它们不在同一y位置 代码太长，无法在stackoverflow上共享，但我制作了，以便您可以在那里查看、分叉和编
58.2857.0558.282012年4月15日更新 我更新了具有相同日期的笔和固定点。我还添加了
类型：“时间”但是现在，x轴上的日期很奇怪。他们不再说2011年3月6日，而是说2011年第一季度。工具提示仍然存在错误。您在图表配置中为类别笛卡尔坐标轴定义了自定义比例。将XAX的类型设置为“类别”。这可能不是必需的，因为ChartJS默认选择此选项
options: {
scales: {
xAxes: [{
type: 'category',
....
{x:xval，y:yval}我相信你需要传递标签
labels: ["09:00", "09:30", "09:50", "10:10", "10:30", "10:50", "11:10"],
var chartPluginLineaHorizontal = {
afterDraw: function (chartobj, chartobjDos) {
if (chartobj.options.lineaHorizontal) {
var ctx = chartobj.chart.ctx;
var valorY = chartobj.scales["y-axis-0"].getPixelForValue(chartobj.options.lineaHorizontal);
ctx.beginPath();
ctx.moveTo(0, valorY);
ctx.lineTo(chartobj.chart.width, valorY);
ctx.strokeStyle = "red";
ctx.stroke();
}
}
}
Chart.pluginService.register(chartPluginLineaHorizontal);
var chartPluginLineaHorizontalDos = {
afterDraw: function (chartobj) {
if (chartobj.options.lineaHorizontal) {
var ctx = chartobj.chart.ctx;
var valorY = chartobj.scales["y-axis-0"].getPixelForValue(chartobj.options.lineaHorizontalDos);
ctx.beginPath();
ctx.moveTo(0, valorY);
ctx.lineTo(chartobj.chart.width, valorY);
ctx.strokeStyle = "red";
ctx.stroke();
}
}
}
Chart.pluginService.register(chartPluginLineaHorizontalDos);
// Define a plugin to provide data labels
Chart.plugins.register({
afterDatasetsDraw: function (chartobj) {
var ctx = chartobj.chart.ctx;
chartobj.data.datasets.forEach(function (dataset, i) {
//debugger
var meta = chartobj.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'inherit';
var fontFamily = 'sans-serif';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].y.toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["09:00", "09:30", "09:50", "10:10", "10:30", "10:50", "11:10"],
datasets: [{
label: "My First dataset",
data: [
{
x: "09:30",
y: 127
},
{
x: "09:30",
y: 140
},
{
x: "09:50",
y: 135
},
{
x: "10:10",
y: 122
}, {
x: "10:30",
y: 135
}, {
x: "10:50",
y: 135
}],
backgroundColor: "rgba(0,255,51,0.5)",
borderColor: "rgba(0,255,51,0.5)",
fill: false
},
{
label: "My second dataset",
data: [
{
x: "09:50",
y: 95
},
{
x: "10:10",
y: 140
},
{
x: "10:30",
y: 130
},
{
x: "10:50",
y: 150
},
{
x: "11:10",
y: 143
}],
backgroundColor: "rgba(0,98,31,0.5)",
borderColor: "rgba(0,98,31,0.5)",
fill: false
}]
},
options: {
lineaHorizontal: 140,
lineaHorizontalDos: 100,
elements: {
line: {
tension: 0
}
}
}
})
我使用工具提示回调解决了我的问题，如下所示：
options: {
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
}
}
}
}
数据集获取标题
Chartjs版本：2.9.3
第二个数据集：我问了这个问题后发现，这确实是我的小问题。我现在就试试“时间”这个词！我添加了类型：“时间”
，但是现在日期格式很奇怪。。。。您可以设置displayFormatsOkay，以及如何在displayFormats
中使用moment.format（）
函数？或者我可以定位日期字符串？要继续使用在xLabels
中设置的标签，请将类型设置为category
。请同时删除您添加的显示格式。我错过了这个细节。要回答有关设置标签格式和本地化的问题，您只需以显示格式传递该时间单位的格式字符串，例如季度：MMMM-DD，YYYY
。我将更新我的答案以反映这一变化。这并不能解决我随问题提供的图像中显示的视觉悬停错误。为数据点提供一个x和y值（如@oluwafemiSule在他的回答中所述）是解决我问题的方法。