带有时间轴和多个数据集的ChartJS工具提示

Question

因此，我设置了一个条形图，以显示或多或少同时发生的两个不同的数据集，但是每小时都有一些丢失的数据：此图中的数据以{x:timestamp, y:value}格式存储，并且所有条形图均位于正确的位置，但是某些工具提示有误：在此示例中，我的鼠标在数据集“ 0”的“ 1AM”栏上突出显示，但时间戳记为上午9:00，数据集“ 1”的9:00栏被突出显示。另外，工具提示（1.279）中显示的数据实际上对于1AM是正确的，而不是9。

据我所知，这似乎是由于每个数据集中有不同数量的数据点，并且工具提示的“索引”模式无法正确处理。该图表的数据如下：

{
  backgroundColor: "rgba(240, 80, 45, 0.63)",
  borderColor: "#f0502d",
  label: "1",
  data:[
  {
    "x": 1589497200000,
    "y": 0.014
  },
  {
    "x": 1589500800000,
    "y": 0.003
  },
  {
    "x": 1589504400000,
    "y": 0
  },
  {
    "x": 1589536800000,
    "y": 0
  },
  {
    "x": 1589540400000,
    "y": 0.023
  },
  {
    "x": 1589544000000,
    "y": 0.251
  },
  {
    "x": 1589547600000,
    "y": 0.599
  },
  {
    "x": 1589551200000,
    "y": 0.896
  },
  {
    "x": 1589554800000,
    "y": 1.582
  },
  {
    "x": 1589558400000,
    "y": 2.335
  },
  {
    "x": 1589562000000,
    "y": 1.302
  },
  {
    "x": 1589565600000,
    "y": 2.774
  },
  {
    "x": 1589569200000,
    "y": 2.432
  },
  {
    "x": 1589572800000,
    "y": 1.257
  },
  {
    "x": 1589576400000,
    "y": 0.056
  }
]},
{
[
  label:"0",
  backgroundColor: "rgba(217, 217, 216, 0.63)",
  borderColor: "#d9d9d8",
  data:{
    "x": 1589497200000,
    "y": 0.014
  },
  {
    "x": 1589500800000,
    "y": 0.003
  },
  {
    "x": 1589504400000,
    "y": 0
  },
  {
    "x": 1589536800000,
    "y": 0
  },
  {
    "x": 1589540400000,
    "y": 0.023
  },
  {
    "x": 1589544000000,
    "y": 0.251
  },
  {
    "x": 1589547600000,
    "y": 0.599
  },
  {
    "x": 1589551200000,
    "y": 0.896
  },
  {
    "x": 1589554800000,
    "y": 1.582
  },
  {
    "x": 1589558400000,
    "y": 2.335
  },
  {
    "x": 1589562000000,
    "y": 1.302
  },
  {
    "x": 1589565600000,
    "y": 2.774
  },
  {
    "x": 1589569200000,
    "y": 2.432
  },
  {
    "x": 1589572800000,
    "y": 1.257
  },
  {
    "x": 1589576400000,
    "y": 0.056
  }
]}

以及此图表的选项：（请注意，CustomTooltips只是

{
            tooltips: {
                enabled: true,
                intersect: true,
                mode: 'index',
                position: 'nearest',
            },
            maintainAspectRatio: false,
            legend: {
                display: true,
                position: 'bottom'
            },
            scales: {

                xAxes: [
                    {
                        type:"time",
                        distribution:"series",
                        offset:true,
                        time:{
                        },
                        scaleLabel: {
                            display: true
                        },
                        ticks: {
                            maxRotation: 0,
                            maxTicksLimit: 12,
                        }
                    }],
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                            maxTicksLimit: 8,
                        }
                    }],
            },
            elements: {
                point: {
                    radius: 0,
                    hitRadius: 10,
                    hoverRadius: 4,
                    hoverBorderWidth: 5,
                },
            },
        }

所以我的问题是：如何获得显示正确时间和正确值的工具提示？

我可以将工具提示模式切换为“ x”，但是工具提示一次只能显示一个条形，而不是同时显示两个数据集的条形，所以我宁愿不这样做。 >

所以我设置了条形图以显示或多或少同时发生的两个不同的数据集，但是每小时都有一些丢失的数据：此图中的数据存储在...中>

Answer 1

导致问题的原因可能与Chart.js的错误版本有关。因此，请确保使用该库的最新稳定版本（当前为v2.9.3）。

您的代码对我来说看起来不错。不过，我对其进行了以下细微更改。