如何更改 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

在 <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"}
}}  />

Answer 2

您必须为此使用 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 应用于标签本身

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

How to change the font color of React Victory Tooltip

reactjs

victory-charts