Блог

Главная - Вопросы по программированию - Как я могу оформить метку в компоненте Recharts Brush?

Как я могу оформить метку в компоненте Recharts Brush?

#javascript #css #reactjs #recharts

#javascript #css #reactjs #recharts

Вопрос:

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

Из чтения документа, похоже, нет поля, доступного для стилизации метки всплывающей подсказки, как в других компонентах Recharts, и, похоже, нет никаких доступных опций для применения отступов к кисти, чтобы она была меньше доступной области, предоставляя место для отображения метки.

У кого-нибудь есть какие-нибудь советы? Ниже можно увидеть код из связанного CodeSandbox.

 import "./styles.css";
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Brush
} from "recharts";

export default function App() {
  const data = [
    { interval: "2021-01-01", resultCount: 2 },
    { interval: "2021-01-03", resultCount: 7 },
    { interval: "2021-01-05", resultCount: 1 },
    { interval: "2021-01-08", resultCount: 10 },
    { interval: "2021-01-10", resultCount: 2 },
    { interval: "2021-01-11", resultCount: 9 },
    { interval: "2021-01-15", resultCount: 5 },
    { interval: "2021-01-18", resultCount: 8 },
    { interval: "2021-01-21", resultCount: 0 },
    { interval: "2021-01-22", resultCount: 7 }
  ];
  return (
    <div className="App">
      <ResponsiveContainer width={500} height={300}>
        <LineChart data={data}>
          <YAxis
            dataKey="resultCount"
            label={{
              value: "No. of Posts",
              angle: -90,
              position: "insideLeft"
            }}
          />
          <XAxis
            dataKey="interval"
            label={{ value: "Time (day)", position: "bottom" }}
          />
          <CartesianGrid vertical={false} />
          <Line
            strokeWidth={2}
            dataKey="resultCount"
            stroke="#127ABF"
            dot={{ stroke: "#127ABF", strokeWidth: 3, fill: "#127ABF" }}
            isAnimationActive={false}
          />
          <Brush dataKey="interval" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Ответ №1:

TLDR; Используйте stroke prop (не документировано, но описано ниже)

Компонент кисти (https://github.com/recharts/recharts/blob/master/src/cartesian/Brush.tsx ) принимает SVGProps из react, поэтому вы можете стилизовать компонент следующим образом:

 <Brush
  stroke="green"
/>

Также кажется, что это не задокументировано (https://recharts.org/en-US/api/Brush ), что вы можете передать пользовательский traveller элемент, который может быть пользовательским элементом svg (я еще не пробовал это, но его можно увидеть в исходном файле).

Надеюсь, это поможет! (Я нашел это во время поиска ответа, но чтение исходного кода в конечном итоге привело меня к stroke prop.

Комментарии:

1. FWIW их компонент кисти ужасен, и я закончил тем, что написал свой собственный, и я намного счастливее (слайдер пользовательского интерфейса material: material-ui.com/components/slider )

Метки: