Recharts 在 React 中不起作用 - 'recharts' 不包含名为 'Recharts' 的导出
Recharts not working in React - 'recharts' does not contain an export named 'Recharts'
我想用 Recharts 绘制图表。
我目前正在查看他们网站上文档中给出的示例。
将他们的代码复制到我的应用程序后,我遇到了以下错误:
'recharts' does not contain an export named 'Recharts'.
包里的东西会不会出错?
我该如何清除这个错误?
import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import Api from '../../Api'
import DatePicker from 'material-ui/DatePicker';
import RaisedButton from 'material-ui/RaisedButton';
import { Recharts } from 'recharts';
const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = Recharts;
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
{ name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
{ name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
{ name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];
render() {
return (
<div className="container">
<LineChart width={600} height={300} data={this.data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis yAxisId="left" />
<YAxis yAxisId="right" orientation="right" />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line yAxisId="left" type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
<Line yAxisId="right" type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
</div>
);
}
}
你好像导入错了。您可以像这样导入它:
import * as Recharts from 'recharts';
或者您可以像这样直接导入单个导出:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts;
我想用 Recharts 绘制图表。
我目前正在查看他们网站上文档中给出的示例。
将他们的代码复制到我的应用程序后,我遇到了以下错误:
'recharts' does not contain an export named 'Recharts'.
包里的东西会不会出错?
我该如何清除这个错误?
import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import Api from '../../Api'
import DatePicker from 'material-ui/DatePicker';
import RaisedButton from 'material-ui/RaisedButton';
import { Recharts } from 'recharts';
const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = Recharts;
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
{ name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
{ name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
{ name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];
render() {
return (
<div className="container">
<LineChart width={600} height={300} data={this.data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis yAxisId="left" />
<YAxis yAxisId="right" orientation="right" />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line yAxisId="left" type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
<Line yAxisId="right" type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
</div>
);
}
}
你好像导入错了。您可以像这样导入它:
import * as Recharts from 'recharts';
或者您可以像这样直接导入单个导出:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts;