javascript - ChartJS (React) 折线图 - 如何显示带有来自 3 个(多个)数据集的数据和标签的单个工具提示？

Question

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

标签: 日期

数据集:

 1. Cases
 2. Deaths
 3. Recoveries

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

当我将鼠标悬停在一个数据集中时，在当前输出中它只显示当前数据集的数据。在上图中，我将鼠标悬停在数据集 Cases 上。

这是我当前的源代码(CasesGraph.js):

import React, { useState, useEffect } from 'react';
import axios from "axios";
import Chart from "./Chart";

const CasesGraph = (country) => {
let currentCountry = country.country;
const [chart, setChart] = useState({});

useEffect(() => {
    getData();
}, []);

 const getData = async () => {
    try {
      const res = await axios.get(
        "https://corona.lmao.ninja/v3/covid-19/historical/"+currentCountry+"?lastdays=all"
      );

  setChart({
    labels: Object.keys(res.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(res.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(res.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(res.data.timeline.recovered)
      }
    ],
    tooltips: {
      mode: 'label',
      callbacks: {
  
          title: function(tooltipItem, data) {
              return data.labels[tooltipItem[0].index]; //Date
          },
  
          beforeLabel: function(tooltipItem, data) {
              return '\nCases: ' + data.datasets[0].data[0] + 
                      '\nDeaths: ' + data.datasets[1].data[1] + 
                      '\nRecoveries: ' + data.datasets[2].data[2];
          },
  
          label: function(tooltipItem, data) {
              return 'Data2: ' + data.datasets[tooltipItem.datasetIndex].cases[tooltipItem.index];
          },
      },
    },
  },
  );
} catch (error) {
  console.log("CasesGraph: "+ error.response);
}


};

  return (
    <div style={{ position: "relative", margin: "auto", width: "80vw"}}>
      <Chart data={chart} /> <!-- CHART COMPONENT -->
    </div>
  );
};

export default CasesGraph;

这是我的 Chart.js 组件代码:

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;

为了更清楚地说明我正在努力实现的目标，这里是示例: Chart.js - Line Chart Tooltip Hover Mode

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

Answer 1

我也一直面临与 react-chartjs-2 相同的问题，我无法为 Line Graph 显示多个工具提示。阅读文档并反复试验后，我以某种方式破解了解决方案。

有三件事。需要配置正确的命名空间。

1.交互:

interaction: {
              mode: "index",
              intersect: false,
            }

<强>2。工具提示:

tooltips:{
     mode: "index",
     intersect: false,
 }

3.悬停:

 hover: {
            mode: "nearest",
            intersect: true,
          },

三个正确名称的配置将在选项 Prop 中如下所示。

 options={{
        interaction: {
          mode: "index",
          intersect: false,
        },

        plugins: {
          legend: {
            display: true,
            position: "right",
            align: "start",
            labels: {
              usePointStyle: true,
              boxWidth: 6,
            },
            title: {
              display: true,
              text: "Chart.js Bar Chart",
            },
          },
          tooltips: {
            mode: "index",
            intersect: false,
          },
          hover: {
            mode: "nearest",
            intersect: true,
          },
        },
        responsive: true,
        title: {
          display: false,
        },
        scales: {
          x: {
            type: "time",
            ticks: {
              autoSkip: true,
              maxTicksLimit: 14,
            },
            time: {
              unit: "month",
              displayFormats: {
                quarter: "MMM YYYY",
              },
            },
          },
          y: {
            ticks: {
              callback: function (value, index, values) {
                return `${value}  kVA`;
              },
            },
          },
        },
      }}