使用Chart.js反映折线图

Question

如何使用Chart.js在React中实现动态图表。我每隔10分钟就有来自API的数据，我想用这些数据填充图表。这是获取数据的代码

fetch('http://localhost:8080/data')
    .then(res => res.json())
    .then(json => this.setState({chartData: [...this.state.chartData, json[0]]})); 

这是图表数据的代码

const data = {
          labels: this.props.data.date
          datasets: [
            {
              label: 'Data1',
              data: this.props.data.entry
            }

将道具传递给图表组件

<Chart data={this.props.chartData} />

组件中的折线图

<Line data={data}  />

Answer 1

React团队提供React wrapper around ChartJS。它支持折线图。这可能比建立自己的更简单，或至少用它作为灵感。