React Chartjs 没有显示任何输出

Question

反应

您可以看到条形图的 JSX 代码，假设显示带有数据值的条形图。但它也没有显示任何输出或错误

JSX

import React from 'react'
import { Bar } from 'react-chartjs-2';

    export default function BarChart() {
            var data = {
                labels: ["Home", "Product", "Cart"],
                datasets: [
                    {
                        label: ' ',
                        data: [38, 75, 25],
                        borderColor: ['rgb(82,134,163)'],
                        backgroundColor: ['rgb(82,134,163)'],
                        pointBackgroundColor: 'rgb(82,134,163)',
                        pointBorderColor: 'rgb(82,134,163)'
                    }
                ]
            }
            return (
                <div>
                    <Bar
                        Data={data}
                        height={400}
                        width={600}
                        options={{
                            maintainAspectRatio: false
                        }}
                    />
        
                </div>
            )
        }

Answer 1

将数据传递给Bar组件的prop应该是data而不是Data：

<Bar
  data={data}
  height={400}
  width={600}
  options={{
    maintainAspectRatio: false
  }}
/>

因此，组件的行为就像它没有接收任何数据一样。