reactjs - 如何更改 React Recharts 库 X 轴/Y 轴刻度的字体系列？

Question

我的任务相当简单：我要做的就是将字体系列更改Roboto, sans-serif为 x 轴和 y 轴“刻度”（即沿两个轴的值）。

我可以通过以下方式更改 x 轴刻度的字体大小： <XAxis tick={{ fontSize: 'sans-serif!important' }} />

但这不起作用： <XAxis tick={{ fontFamily: 'sans-serif' }} />

我能看到的唯一其他选项是使用tickFormatter文档中指定的属性，它只接受一个函数，请参见此处：http ://recharts.org/#/en-US/api/XAxis

在这个项目中，我们使用 Recompose 实用程序库在 React 中使用函数式编程，因此我们以“纯”函数样式而不是普通的 React 类来渲染 JSX。

这是我能想到的最好的猜测是：

const xAxisTickFormatter = name => {
  return <div style={{ fontFamily: 'sans-serif' }}>{name}</div>;
};

export const LineChart = ({ data, isMobile }) => {
  console.log(data);
  return (
    <C
      width={isMobile ? 400 : 650}
      height={400}
      data={data}
      margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
    >
      <XAxis
        tickFormatter={xAxisTickFormatter}
        dataKey="date"
        name="Date"
        style={{ fontFamily: 'sans-serif' }}
      />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip wrapperStyle={{ fontFamily: 'Roboto, sans-serif' }} />
      <Legend
        wrapperStyle={{ fontFamily: 'Roboto, sans-serif' }}
        verticalAlign="bottom"
        height={36}
      />
      <Line
        type="linear"
        dataKey="price"
        name="Price"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line
        type="linear"
        dataKey="marketAverage"
        name="Market Average"
        stroke="#82ca9d"
      />
    </C>
  );
};

这会沿 x 轴输出 [object, Object]，请参见屏幕截图：

文档中唯一类似的官方示例在此处使用旧createClass语法：https ://jsfiddle.net/alidingling/9y9zrpjp/

任何帮助将不胜感激，因为我已经在谷歌上搜索了尽可能多的类似问题，并且到目前为止在这个问题上花了大约半天的时间。

标签： reactjsfunctional-programmingrecharts

Answer 1

为什么不只设置字体系列以及您想通过 CSS 覆盖的任何其他内容？

我们有类似的东西：

.recharts-cartesian-axis-tick {    
    font-size: 1.4rem;
    font-family: Roboto, sans-serif;
}