So implementieren Sie mehrere Tooltips oder Beschriftungen für Balkendiagramme mithilfe von React-Echarts
Posted: 17 Jan 2025, 06:32
Ich habe ein React-Echarts-Balkendiagramm mit einem Tooltip implementiert, wenn Sie mit der Maus über das Diagramm fahren. Es sollte eine andere Beschriftung anzeigen, wenn Sie mit der Maus über den Tooltip fahren, aber es funktioniert nicht wie erwartet. Ich habe es mit onMouseover-Ereignissen versucht, aber es funktioniert nicht wie erwartet. Ich wollte ein Balkendiagramm mit einem Tooltip, wenn man mit der Maus über das Diagramm fährt, und wenn man mit der Maus darüber fährt, sollte es zusätzliche Details des Diagramms als weiteren Tooltip neben dem ersten anzeigen.
Code: Select all
import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactECharts from "echarts-for-react";
const BarChartUpdated = ({ data, label, categories }: any) => {
const [tooltipData, setTooltipData] = useState(null);
const generateColors = (categories: string[]) => {
const colorMap: Record = {};
const colorPalette = [
"#5470C6",
"#91CC75",
"#EE6666",
"#FAC858",
"#73C0DE",
"#9A60B4",
"#EA7CCC",
];
categories.forEach((category, index) => {
if (!colorMap[category]) {
colorMap[category] = colorPalette[index % colorPalette.length];
}
});
return colorMap;
};
const categoryColors = generateColors(categories);
const sanitizedData = data.map((value: number) => (isNaN(value) ? 0 : value));
const total = sanitizedData.reduce(
(sum: number, value: number) => sum + value,
0,
);
const option = {
title: {
text: label,
},
tooltip: {
trigger: "axis",
formatter: (params: any) => {
return params
.map(
(item: any) =>
`${item.name}[/b] Count: ${item.value > 0 ? item.value : 0}`,
)
.join("
");
},
},
toolbox: {
feature: {
saveAsImage: { show: true, title: "Save as Image" },
dataZoom: { show: true, title: "Zoom" },
},
},
xAxis: {
type: "category",
data: categories,
},
yAxis: {
type: "value",
},
series: [
{
type: "bar",
data: data.map((value: number, index: number) => ({
value,
itemStyle: {
color: categoryColors[categories[index]],
},
label: {
show: true,
position: "top",
formatter:
total {
if (event && event.data) {
const { name, value } = event.data;
const { offsetX, offsetY } = event.event;
setTooltipData({
x: offsetX,
y: offsetY,
details: `More details for ${name}: Count ${value}`,
isVisible: true,
});
}
};
const handleMouseOut = () => {
setTooltipData((prev) => (prev ? { ...prev, isVisible: false } : null));
};
const handleTooltipMouseEnter = () => {
setTooltipData((prev) => (prev ? { ...prev, isVisible: true } : null));
};
const handleTooltipMouseLeave = () => {
setTooltipData(null);
};
return (
{tooltipData &&
ReactDOM.createPortal(
tooltipData.isVisible && (
onMouseEnter={handleTooltipMouseEnter}
onMouseLeave={handleTooltipMouseLeave}
style={{
position: "fixed",
top: tooltipData.y,
left: tooltipData.x,
transform: "translate(-50%, -100%)",
background: "white",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "4px",
boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
zIndex: 1000,
}}
>
{tooltipData.details}
),
document.body,
)}
);
};
export default BarChartUpdated;