javascript - 如何使用 react-chartjs 创建具有动态宽度的折线图？

Question

我正在尝试创建一个具有动态宽度的折线图，但只获取第一个值。

<LineChart data = {this.state.dataLine} options = {{}} width={this.state.widthChart} height = "250" />

Answer 1

我不确定如何在 react-chartjs 中实现这一点，但在 react-vis 中非常简单，这很相似。

import React from 'react';

import {
  XAxis,
  YAxis,
  FlexibleWidthXYPlot,
  HorizontalGridLines,
  LineSeries
} from 'react-vis';

export default class Example extends React.Component {
  render() {
    return (
      <FlexibleWidthXYPlot
        height={300}>
        <HorizontalGridLines />
        <YAxis />
        <XAxis />
        <LineSeries data={myData}/>
      </FlexibleWidthXYPlot>
    );
  }
}

更多信息请点击这里http://uber.github.io/react-vis/#/documentation/api-reference/flexible-plots