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

Question

所以我设置了一个条形图来显示两个不同的数据集，它们或多或少同时发生，但每小时都有一些缺失的数据： 此图中的数据以{x:timestamp, y:value} 格式存储，并且条形图都位于正确的位置，但是某些工具提示是错误的： 在此示例中，我的鼠标在数据集“0”的“1AM”条上突出显示，但时间戳显示它是在上午 9:00，并且数据集“1”的 9:00 条被突出显示。此外，工具提示中显示的数据 (1.279) 实际上对于上午 1 点是正确的，而不是 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）。

您的代码对我来说看起来不错。尽管如此，我还是对其进行了以下细微更改。

...从图表options 中删除了elements 对象。

...如下定义xAxis.time，以确保刻度标签和工具提示中的小时数具有相同的格式。

xAxes: [{
  type: "time",
  ...
  time: { 
    unit: 'hour',
    tooltipFormat: 'hA' 
  },

请在下面查看您修改后的可运行代码。

const datasets = [{
    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
      }
    ]
  }
];

const options = {
  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: { 
        unit: 'hour',
        tooltipFormat: 'hA' 
      },
      scaleLabel: {
        display: true
      },
      ticks: {
        maxRotation: 0,
        maxTicksLimit: 12,
      }
    }],
    yAxes: [{
      ticks: {
        beginAtZero: true,
        maxTicksLimit: 8,
      }
    }],
  }
};

new Chart("barChart", {
  type: 'bar',
  data: {
    datasets: datasets
  },
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="barChart" height="200"></canvas>