Javascript 无法在react元素上创建图表

我想在我的

react

元素上从

chart.js

创建一个

chart

元素，但我得到了一个错误

    import React from 'react'
    import {Chart} from 'chart.js'//I also tried import Chart

    export default function Stats(props) {

    const options = {
         scales: {
          xAxes: [{
            barPercentage: 0.5,
            barThickness: 6,
            maxBarThickness: 8,
            minBarLength: 2,
            gridLines: {
                offsetGridLines: true
            }
          }]
         }
    }

    const data = {
      labels: ['Red', 'Blue'],
      datasets: [{
          label: '# of Votes',
          data: [12, 19],
          backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)'
          ],
          borderColor: [
           'rgba(255, 99, 132, 1)',
           'rgba(54, 162, 235, 1)'
          ],
          borderWidth: 1
      }]
     }

   return (
     <div className="status">
      <canvas id="myChart" width="400" height="400">
        <Chart
          type="bar"
          data={data}
          options={options}
        />
       </canvas>
     </div>
    )
    }

---

如果您使用的是来自的chart.js库，那么问题在于chart不是react组件，只是一个类，这就是为什么您不能将它放在react三上

请尝试改用此包装器：

    TypeError: Cannot read property 'construct' of undefined

    Chart
    node_modules/chart.js/dist/Chart.js:8045

      8042 | }
      8043 | 
      8044 | var Chart = function (item, config) {
    > 8045 |   this.construct(item, config);
 | ^  8046 |   return this;
      8047 | };
      8048 |