Recharts - передать массив значений в компонент Line - PullRequest
Новая
       5

Recharts - передать массив значений в компонент Line

0 голосов
/ 17 марта 2020

У меня есть массив значений, подобных этому: array = [0, 0, 1, 2, 454, 3]

Как я могу передать массив в компонент Recharts Line? Значения должны отображаться на оси Y и индексироваться на оси X.

Ответы [ 2 ]

1 голос
/ 17 марта 2020

Вам необходимо предоставить массив объектов в виде данных 

const array = [0, 0, 1, 2, 454, 3];
const data = array.map((value,index)=>({index,value}))

, а затем 

<LineChart width={600} height={300} data={data}>
   <XAxis dataKey="index"/>
   <YAxis/>
   <Line  dataKey="value" stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>

Демо на https://jsfiddle.net/mxgkwszq/1/

1 голос
/ 17 марта 2020

Официальная документация гласит ( ссылка ):

точек

Координаты всех точек в линии, как правило, рассчитываются внутри.

ФОРМАТ: 

[{x: 12, y: 12, value: 240}]

Чтобы передать указанный вами массив, вам нужно немного преобразовать массив. Вы можете сделать это с помощью: 

const data = array.map(x => ({pv: x}));

return (
  <LineChart data={data}>
    <Line type="monotone" dataKey="pv" stroke="#8884d8" />
  </LineChart>
);

Очевидно, здесь многое упущено, но вы, вероятно, можете оставить координаты сами по себе, поскольку вы, скорее всего, рисуете на декартовой плоскости. Координаты будут вычислены автоматически - просто передайте значения.

Здесь линия выберет ключ pv из вашего набора данных и нарисует их.

Фрагмент, полученный из: http://recharts.org/en-US/api/LineChart

...