Javascript 未渲染、重新渲染、反应的条形图

我正在用

Recharts

和

React

一起使用，我正在用代码获得以下输出，为什么它不在那里显示条形图？（正在渲染偶数条背景）

是否有我缺少的导入或添加的内容

import React, { Component } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, Legend, Line, LineChart } from 'recharts';


class App extends Component {
    cursorStyle = {
        fill: 'white'
    };
    data = [
        { Year: "1929", BMW: "1889", Toyota: "9547", Mercedes: "4881"},
        { BMW: "6548", Mercedes: "8096", Toyota: "4741", Year: "1930"},
        { Year: "1931", BMW: "5013", Toyota: "6269", Mercedes: "3908"},
        { Year: "1932", BMW: "2468", Toyota: "9858", Mercedes: "1623"},
        { Year: "1933", BMW: "3364", Toyota: "5595", Mercedes: "8638"},
        { Year: "1934", BMW: "2032", Toyota: "2570", Mercedes: "8041"}
    ];
    render(){
        return (
            <BarChart
                width={600}
                height={300}
                data={this.data}
                margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                <XAxis type="category" dataKey="Year"/>
                <YAxis type="number"/>
                <Tooltip cursor={false}/>
                <Legend />
                <Bar dataKey="BMW" stroke="#8884d8" fill="#8884d8" background={{ stroke: '#eee' }} isAnimationActive={true} barSize={20}/>
                <Bar dataKey="Mercedes" stroke="#82ca9d" fill="#82ca9d" background={{ stroke: '#eee' }} isAnimationActive={false} barSize={30}/>
            </BarChart>
        )
    }
}

export default App;

import React，{Component}来自'React'；
从“recharts”导入{BarChart、Bar、XAxis、YAxis、工具提示、CartesianGrid、图例、线条、线条图}；
类应用程序扩展组件{
游标样式={
填充：“白色”
};
数据=[
{年份：“1929”，宝马：“1889”，丰田：“9547”，梅赛德斯：“4881”}，
{宝马：“6548”，奔驰：“8096”，丰田：“4741”，年份：“1930”}，
{年份：“1931”，宝马：“5013”，丰田：“6269”，梅赛德斯：“3908”}，
{年份：“1932”，宝马：“2468”，丰田：“9858”，梅赛德斯：“1623”}，
{年份：“1933”，宝马：“3364”，丰田：“5595”，梅赛德斯：“8638”}，
{年份：“1934”，宝马：“2032”，丰田：“2570”，梅赛德斯：“8041”}
];
render（）{
返回(
)
}
}
导出默认应用程序；

以下是我的输出：

---

删除宝马、梅赛德斯的报价。请看演示

它很有效，谢谢。解决方案：数据输入应该是

Number

，我正在解析

String

输入。