Как изменить семейство шрифтов для тиков по оси X / Y в библиотеке React Recharts? - PullRequest
Новая
       14

Как изменить семейство шрифтов для тиков по оси X / Y в библиотеке React Recharts?

0 голосов
/ 28 июня 2018

Моя задача довольно проста: все, что я хочу сделать, это изменить семейство шрифтов на 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

В этом проекте мы используем функциональный стиль программирования в React с использованием служебной библиотеки Recompose, поэтому мы визуализируем JSX в «чистом» стиле, а не с обычными классами React.

Это лучшее предположение, которое я могу придумать: 

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>
  );
};

Выводит [объект, объект] вдоль оси х, см. Скриншот:

enter image description here

Единственный подобный официальный пример из документации использует старый синтаксис createClass здесь: https://jsfiddle.net/alidingling/9y9zrpjp/

Любая помощь будет принята с благодарностью, так как я погуглил как можно больше подобных проблем и потратил около половины дня на эту проблему.

1 Ответ

0 голосов
/ 28 июня 2018

Почему бы просто не установить семейство шрифтов и все, что вы хотите перезаписать с помощью CSS?

У нас есть что-то похожее: 

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