Question

我希望将Recharts用作我的React应用程序的图形系统。

要安装，我已转到安装指南并在终端

中输入以下命令

$ npm install recharts

我的jsx文件看起来像下面的代码： import＆＃34; react＆＃34 ;; 从＆＃34; react-dom＆＃34 ;;导入ReactDOM; 从＆＃34; recharts＆＃34;;

导入ReCharts

var App = React.createClass({
  render: function() {
    var data = [{ name: 'a', value: 12 }];
    return (
     <LineChart width={400} height={400} data={data}>
      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    </LineChart>
    );
  }
});

ReactDOM.render(<App/>, document.getElementById('app'));

它不起作用，因为我没有正确导入充电。任何人都可以提供建议并解释如何导入这些内容以及如何在我的文档中没有任何明确指导的情况下导出另一个库时我的灵魂知道的任何建议。

Answer 1

您需要从LineChart导入Line和Recharts个组件，因为此库没有默认导出Recharts index

import { LineChart, Line } from 'recharts';

<强>更新

您还需要更改dataKey，从'uv'更改为'value'，因为在data中您使用value作为图表值的关键

Example

将Recharts.js库导入jsx react文件

1 个答案: