Question

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

尝试悬停共享点 here on codepen 。

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

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

更新

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

Here my edited pen

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

Answer 1

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

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

此外，第二个数据集未正确格式化。您应该以{{1}}格式提供数据点。

参考文献：

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

Answer 2

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

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

现在我的工具提示直接从相应的dataset获得标题。

Chartjs版本：2.9.3

Answer 3

我相信您需要传递标签。

labels: ["09:00", "09:30", "09:50", "10:10", "10:30", "10:50", "11:10"],

////////////////////////////////////////////// < / p>

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

                    }


                })

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

更新

3 个答案:

参考文献：