Javascript ChartJS（React）折线图-如何显示包含来自3（多个）数据集的数据和标签的单个工具提示？

我试图在折线图中显示悬停点时的工具提示。工具提示将包含来自3个不同数据集的3个数据，并且仅包含1个标签

标签：

日期

数据集：

 1. Cases
 2. Deaths
 3. Recoveries

这是我制作的折线图的当前输出：

在当前输出中，当我在一个数据集中悬停时，它仅显示当前数据集的数据。在上图中，我将数据集悬停在案例上

以下是我当前的源代码（

CasesGraph.js

）：

要更清楚地说明我想要实现的目标，这里有一个例子：

---

请注意，工具提示包含来自两个不同数据集的两个数据。

请尝试删除代码中的

工具提示，并设置代码-如我制作的本文档所示

因此，
config
部分应该如下所示：

// NOTE: "full_data" is the data source (i.e res.data, in your case).

var config = {
  type: 'line',
  data: {
    labels: Object.keys(full_data.timeline.cases),
    showTooltips: true,
    datasets: [{
      label: "Covid-19 Cases", //CASES DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#eb1515",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#eb1515",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#eb1515",
      pointHoverBorderColor: "#eb1515",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.cases)
    }, {
      label: "Covid-19 Deaths", //DEATHS DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#1a1c1a",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#1a1c1a",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#1a1c1a",
      pointHoverBorderColor: "#1a1c1a",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.deaths)
    }, {
      label: "Covid-19 Recoveries", //RECOVERIES DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#0ec90e",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#0ec90e",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#0ec90e",
      pointHoverBorderColor: "#0ec90e",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.recovered)
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Dates'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
        },
      }]
    }
  }
};

import React from "react";
import { Line } from "react-chartjs-2";

const Chart = ({ data }) => {
  return <Line 
            data={data} 
            options={{ 
                responsive: true, 
                showTooltips: true,
                height: '600px', 
                width: "600px", 
                hover: {
                    mode: 'index',
                    intersect: false,
                },
            }}
        />;
};

export default Chart;

// NOTE: "full_data" is the data source (i.e res.data, in your case).

var config = {
  type: 'line',
  data: {
    labels: Object.keys(full_data.timeline.cases),
    showTooltips: true,
    datasets: [{
      label: "Covid-19 Cases", //CASES DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#eb1515",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#eb1515",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#eb1515",
      pointHoverBorderColor: "#eb1515",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.cases)
    }, {
      label: "Covid-19 Deaths", //DEATHS DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#1a1c1a",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#1a1c1a",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#1a1c1a",
      pointHoverBorderColor: "#1a1c1a",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.deaths)
    }, {
      label: "Covid-19 Recoveries", //RECOVERIES DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#0ec90e",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#0ec90e",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#0ec90e",
      pointHoverBorderColor: "#0ec90e",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.recovered)
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Dates'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
        },
      }]
    }
  }
};