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

我有一个包含两个不同数据集的图表，但有时它们具有相同的x，y坐标。 但是当我hover共享点时 ，它有时会显示错误的日期。 y值是正确的，但它是未正确显示的x值。

尝试在codepen上hover共享点 。

在下图中，您可以看到我正在徘徊{ y: 56.04, x: April 05, 2014 } ，但显示xLabel值为58.28 ，即April 15, 2012 。 此外，您可以在图表中看到57.05和58.28都将April 15, 2012作为x值，但它们不在同一个y位置！

代码太长，无法在stackoverflow上共享，但我创建了这个codepen，因此您可以在那里查看，分叉和编辑它。

---

更新

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

这是我编辑过的笔 。

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

Answer 1

您在图表配置中为类别笛卡尔轴定义了自定义比例。 将xAxes的类型设置为“类别”。 这可能不是必要的，因为ChartJS默认选择它。

 options: { scales: { xAxes: [{ type: 'category', .... 

此外， 第二个数据集格式不正确 。 您应该以{x: xval, y: yval}格式提供数据点。

参考文献：

http://www.chartjs.org/docs/latest/axes/cartesian/time.html#time-cartesian-axis

Answer 2

我相信你需要通过标签。

 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 } } } })