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

问题描述

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

标签： Date

数据集：

 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,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,borderColor: "#1a1c1a",pointBorderColor: "#1a1c1a",pointHoverBackgroundColor: "#1a1c1a",pointHoverBorderColor: "#1a1c1a",data: Object.values(res.data.timeline.deaths)
      },{
        label: "Covid-19 Recoveries",//RECOVERIES DATASET
        fill: false,borderColor: "#0ec90e",pointBorderColor: "#0ec90e",pointHoverBackgroundColor: "#0ec90e",pointHoverBorderColor: "#0ec90e",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,height: '600px',width: "600px",hover: {
                    mode: 'index',intersect: false,}}
        />;
};

export default Chart;

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

注意工具提示有来自两个不同数据集的两个数据。

解决方法

尝试删除代码中的 function useQueryEvents() { const { state: { connectedNetwork,selectedWallet,activity },} = useContext(LocalContext); const [contract,setContract] = React.useState() // Fetch transactions and setup contract useEffect(() => { async function fetchTransactionsAndContract() { const transactions = await getAllPastTransactions(); const contract = await getContract(); await addActionToActivity(transactions,activity); setContract(contract) } },[]) // Once the contract is set in state,attach the event listener. useEffect(() => { if (contract) { const handleTransfer = async (from,to,amount,event) => { console.log(`${from} sent ${ethers.utils.formatEther(amount)} to ${to}`); const transaction = await formatEventToTransaction(event); await addActionToActivity(transaction,activity); } contract.on('Transfer',handleTransfer); // Remove event listener,I imagine it will be something like return () => { contract.off('Transfer',handleTransfer) } } // Add contract and activity to the dependencies array. },[contract,activity,selectedAsset,connectedNetwork,selectedWallet]); } 并设置代码 - 如我制作的 working jsfiddle 所示。

因此，tooltips 部分应如下所示：

config