如何更改React Victory Tooltip的字体颜色

Question

我正在做一个React JS项目。我的应用程序需要以图表格式显示一些数据。我正在使用React Victory。当用户将光标悬停在条形图上时，我将显示工具提示。我可以显示工具提示。但我无法更改工具提示的字体颜色。

这是我的工具提示代码。

const { x, y } = tooltipProps;
const rotation = `rotate(0 ${x} ${y})`;
return (
<g transform={rotation}>
<VictoryTooltip
{...tooltipProps}
cornerRadius={5}
pointerLength={4}
flyoutHeight={30}
flyoutStyle={{
stroke: "none",
fill: props.color,
}}
constrainToVisibleArea={true}
renderInPortal={true} />
</g>
);

我尝试将颜色道具设置为flyoutStyle道具对象。它不起作用。我也试过用风格道具。它不起作用。它总是以默认的黑色显示字体颜色。我该怎么改？

Answer 1

您必须为此使用style属性

const { x, y } = tooltipProps;
const rotation = `rotate(0 ${x} ${y})`;
return (
<g transform={rotation}>
<VictoryTooltip
{...tooltipProps}
cornerRadius={5}
pointerLength={4}
flyoutHeight={30}
flyoutStyle={{
stroke: "none"
}}
style={{ fill: props.color }}
constrainToVisibleArea={true}
renderInPortal={true} />
</g>
);

flyoutStyle将样式应用于容器，style应用于标签本身

Answer 2

在<VictoryBar>中定义labels: {fill: "red"}将更改工具提示的字体颜色。

参见以下示例：

<VictoryBar
labelComponent={<VictoryTooltip/>}
data={[
{x: 2, y: 5, label: "right-side-up"},
{x: 4, y: -6, label: "upside-down"},
{x: 6, y: 4, label: "tiny"},
{x: 8, y: -5, label: "or a little n BIGGER"},
{x: 10, y: 7, label: "automatically"}
]}
style={{
data: {fill: "tomato", width: 20},
labels: {fill: "red"}
}}  />