recharts中的实时图表答案

【问题标题】：RealTime chart in rechartsrecharts中的实时图表
【发布时间】：2018-05-09 03:54:51
【问题描述】：

我有一个函数，其中数据以随机顺序出现，而不是在一个块中。这是我的数组：

this.props.data = [
{date: "07", visitors: 0},
{date: "08", visitors: 8},
{date: "09", visitors: 14},
{date: "10", visitors: 17},
{date: "11", visitors: 23},
{date: "12", visitors: 31},
{date: "13", visitors: 40}]

还有如下图表代码

<LineChart data={this.props.data}>
  <XAxis dataKey='date' label={{ value: "Horas", position: "insideBottom", dy: 10} } />
  <YAxis label={{ value: 'Visitantes', angle: -90, position: 'insideLeft' }}/>
  <Tooltip/>
  <Line type="monotone" dataKey="visitors" stroke="#001529" activeDot={{r: 5}}/>
</LineChart>

问题是，我在图表上的最高访问者价值低于第一个。（提醒：他比第一个大5倍）。

我的代码有问题吗？或者这是一个recharts的问题？

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

为我工作。 CodePen

const {LineChart, Line, XAxis, YAxis, Tooltip} = Recharts;

const mydata = [
{date: "07", visitors: 0},
{date: "08", visitors: 8},
{date: "09", visitors: 14},
{date: "10", visitors: 17},
{date: "11", visitors: 23},
{date: "12", visitors: 31},
{date: "13", visitors: 40}]

const SimpleLineChart = function() {
    return (
    <LineChart data={mydata} width={600} height={400} margin={{ top: 50, bottom: 50, left:50, right:50}}>
      <XAxis dataKey='date'/>
      <YAxis label='Visitantes'/>
      <Line type="monotone" dataKey="visitors" stroke="#001529" activeDot={{r: 5}}/>
      <Tooltip/>
    </LineChart>
  );
};

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

【讨论】：