这是我的 WordCloud 图表代码，我需要提供基于频率检查和阈值的背景。与文本填充颜色相同，我想动态提供背景，但无法获取 dataItem，因为总是在 dataItem 中获取未定义的内容，因此不适用比较。
import React, { useEffect, useRef } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5wc from "@amcharts/amcharts5/wc";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
interface DataPoint {
name: string;
frequency: number;
}
interface WordChartProps {
data: DataPoint[];
}
const WordChart: React.FC<WordChartProps> = ({ data = [] }) => {
const chartRef = useRef<HTMLDivElement>(null);
const dataSet = [
{ name: "Pricing", frequency: 100 },
{ name: "Availability", frequency: 50 },
{ name: "Online", frequency: 20 },
{ name: "Process", frequency: 10 },
{ name: "Work", frequency: 30 },
{ name: "Pricing", frequency: 100 },
{ name: "Availability", frequency: 50 },
{ name: "Online", frequency: 20 },
{ name: "Process", frequency: 10 },
{ name: "Work", frequency: 30 },
{ name: "Pricing", frequency: 100 },
{ name: "Availability", frequency: 50 },
{ name: "Online", frequency: 20 },
{ name: "Process", frequency: 10 },
{ name: "Work", frequency: 30 },
{ name: "Pricing", frequency: 100 },
{ name: "Availability", frequency: 50 },
{ name: "Online", frequency: 20 },
{ name: "Process", frequency: 10 },
{ name: "Work", frequency: 30 },
]
dataSet.sort((a, b) => b.frequency - a.frequency);
const groupSize = Math.ceil(dataSet.length / 3);
const highThreshold = dataSet[groupSize - 1]?.frequency || 0; // Lowest frequency in "high"
const mediumThreshold = dataSet[groupSize * 2 - 1]?.frequency || 0; // Lowest frequency in "medium"
useEffect(() => {
if (!chartRef.current) return;
const root = am5.Root.new(chartRef.current);
root.setThemes([am5themes_Animated.new(root)]);
const series = root.container.children.push(
am5wc.WordCloud.new(root, {
maxFontSize: am5.percent(12),
minFontSize: am5.percent(5),
categoryField: "name",
valueField: "frequency",
rotation: 0,
centerX: am5.percent(0),
centerY: am5.percent(0),
angles: [0],
})
);
series.labels.template.setAll({
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
fontFamily: "Roboto",
fontSize: "14px",
fontStyle: "normal",
fontWeight: "400",
textAlign: "center",
tooltipText: "{category}: {value}"
});
// Dynamically setting the `fill` color for each label
series.labels.template.adapters.add("fill", (fill, target) => {
const dataItem = target.dataItem; // Access the associated data item
const frequency: any = dataItem?.get("value"); // Retrieve the frequency field from data
if (frequency >= highThreshold) {
return am5.color(0x52a3ff);
} else if (frequency >= mediumThreshold) {
return am5.color(0x7fb5f2);
} else {
return am5.color(0x5e93c2);
}
});
series.labels.template.setup = function (label) {
let backgroundColor;
let borderColor;
const dataItem = label.dataItem;
console.log("dataItem Background", dataItem);
const frequency = dataItem?.get("frequency");
console.log("background frequency", frequency)
if (frequency >= highThreshold) {
backgroundColor = am5.color(0X52A3FF);
} else if (frequency >= mediumThreshold) {
backgroundColor = am5.color(0xF4F5F8);
} else {
// backgroundColor = am5.color(0xffffff);
backgroundColor = am5.color(0X52A3FF);
}
backgroundColor = am5.color(0xffffff);
borderColor = am5.color(0x52a3ff);
label.set(
"background",
am5.RoundedRectangle.new(root, {
cornerRadiusBL: 10,
cornerRadiusBR: 10,
cornerRadiusTL: 10,
cornerRadiusTR: 10,
fill: backgroundColor,
fillOpacity: 1,
stroke: borderColor,
strokeWidth: 1,
marginTop: 15,
marginBottom: 15,
marginLeft: 15,
marginRight: 15,
})
);
};
series.data.setAll(dataSet);
return () => {
root.dispose();
};
}, []);
return <div ref={chartRef} style={{ width: "100%", height: "300px" }} />;
};
export default WordChart;
这里我没有得到数据项：
series.labels.template.setup = function (label) {
let backgroundColor;
let borderColor;
const dataItem = label.dataItem;
console.log("dataItem Background", dataItem);
const frequency = dataItem?.get("frequency");
console.log("background frequency", frequency)
提前感谢您的帮助！
现在我可以根据阈值根据数据项更改背景颜色和边框颜色。这是代码
series.labels.template.setup = function (label) {
let backgroundColor = am5.color(0xffffff);
let borderColor = am5.color(0x52a3ff);
label.set(
"background",
am5.RoundedRectangle.new(root, {
cornerRadiusBL: 20,
cornerRadiusBR: 20,
cornerRadiusTL: 20,
cornerRadiusTR: 20,
marginTop: 15,
marginBottom: 15,
marginLeft: 15,
marginRight: 15,
})
);
label.events.on("dataitemchanged", function (ev) {
var label = ev.target;
const frequency = label.dataItem?.dataContext?.frequency; // Retrieve the frequency field from data
if (frequency >= highThreshold) {
backgroundColor = am5.color(0x52A3FF);
borderColor = am5.color(0xFFFFFF)
} else if (frequency >= mediumThreshold) {
backgroundColor = am5.color(0xDBECFF);
borderColor = am5.color(0xFFFFFF)
} else {
backgroundColor = am5.color(0xFFFFFF);
borderColor = am5.color(0x7FB5F2)
}
label.set(
"background",
am5.RoundedRectangle.new(root, {
fill: backgroundColor,
fillOpacity: 1,
stroke: borderColor,
strokeWidth: 1,
})
);
});
};