Линейный график React Charts с сгруппированными метками, такими как месяцы, недели - PullRequest
Новая
       45

Линейный график React Charts с сгруппированными метками, такими как месяцы, недели

0 голосов
/ 30 января 2020

Есть ли возможность визуализировать линейный график с перегруппировками с сгруппированными точками, скажем, у меня есть 6-месячный ряд данных в день, около 180 дней, что будет представлять 180 точек на графике, но метка на оси X будет показывать каждый месяц данные за январь, февраль, март, апрель ... что-то вроде акций Google CRM.

enter image description here

У меня есть некоторые код, который форматирует метки, чтобы получить название месяца, но он повторяется, я хочу показать одну метку в месяц. 

    const formatXAxis = (tickItem) => {

        const d = new Date(tickItem);
        return d.toLocaleString('default', { month: 'long' });
    };
    const SimpleLineChart = React.createClass({
        render () {
            return (
        <LineChart width={800} height={400} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis tickFormatter={formatXAxis} dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="uv" stroke="#8884d8" activeDot={{r: 8}}/>
      </LineChart>
    );
  }
})

ReactDOM.render(
  <SimpleLineChart />,
  document.getElementById('container')
);

enter image description here

1 Ответ

0 голосов
/ 30 января 2020

Просто нужно было добавить интервал в конфигурацию xaxis. 

<XAxis interval={30} tickFormatter={formatXAxis} dataKey="name"/>
...