填充不透明度不适用于计算值 Recharts答案

【问题标题】：Fill opacity don't work with calculate value Recharts填充不透明度不适用于计算值 Recharts
【发布时间】：2022-12-04 08:06:31
【问题描述】：

对于每个 Stacked Bar 元素，我计算其百分比

const valuePercent = attribute => ({payload}) => {
    const keys  = getKeys(chartData);
    const total = keys.reduce((acc, curr) => {
        return acc + payload[curr].count;
    }, 0);
    const ratio = total > 0 ? payload[attribute].count / total : 0;
    return `${(ratio * 100).toFixed(0)}%`;
  };

但是当我在样式中替换这个值时，它不起作用。可能是什么问题呢？

return keys.map((item, index) => ( <
  Bar key = {
    index
  }
  dataKey = {
    `${item}.count`
  }
  stackId = 'a'
  style = {
    {
      fill: '#0452D7',
      fillOpacity: valuePercent(item),
    }
  }
  />
));

如果你只是在填充不透明度中设置一些值，一切都很好。同时，我在控制台看到函数被触发了，并且计算了百分比

【问题讨论】：

valuePercent 是高阶函数，您没有调用返回的函数。你需要像valuePercent(item)({ payload: 'data'})这样的东西。

标签： javascript reactjs recharts

【解决方案1】：

代码的问题在于 fillOpacity 属性需要一个数值，但 valuePercent 函数返回一个包含百分比值的字符串。当样式应用于 Bar 元素时，这会导致错误，因为字符串值不是 fillOpacity 属性的有效数值。

要解决此问题，您可以修改 valuePercent 函数以返回数值而不是字符串。您可以通过解析字符串中的百分比值并将其转换为数字来执行此操作，如下所示：

const valuePercent = attribute => ({ payload }) => {
  const keys = getKeys(chartData);
  const total = keys.reduce((acc, curr) => {
    return acc + payload[curr].count;
  }, 0);
  const ratio = total > 0 ? payload[attribute].count / total : 0;
  return parseInt(`${(ratio * 100).toFixed(0)}%`, 10) / 100;
};

在 valuePercent 函数的这个更新版本中，从字符串中解析百分比值并除以 100，将其转换为 0 到 1 之间的十进制值。此十进制值随后可用作 fillOpacity 属性值，这应该可以解决样式问题。

然后，您可以像这样在 style 属性中使用 valuePercent 函数：

return keys.map((item, index) => (
  <Bar
    key={index}
    dataKey={`${item}.count`}
    stackId="a"
    style={{
      fill: '#0452D7',
      fillOpacity: valuePercent(item),
    }}
  />
));

我希望这有帮助！如果您有任何其他问题，请告诉我。

【讨论】：