【发布时间】：2021-04-30 18:46:21
【问题描述】：
当一个点悬停时，我试图在折线图中显示一个工具提示。工具提示将包含来自 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,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
请注意，工具提示包含来自两个不同数据集的两个数据。
【问题讨论】：
-
你有什么解决办法吗？我也面临同样的问题。下面的例子对我不起作用。我正在使用“react-chartjs-2”：“^3.0.4”
标签： javascript reactjs chart.js data-visualization linechart