缺少类属性在React中使用Chart.js转换错误

Question

我正试图使用chart .js在react中生成我的第一个图表，我似乎无法克服这个错误。我用"react-chartjs-2"^ 5.1.0"chart.js":"^ 4.1.0"one_answers"react":"^ 18.2.0"。

错误提示:

Failed to compile.

./node_modules/chart.js/dist/chart.js
SyntaxError: /Users/johnwomelsdorf/Documents/Code/Ski-Website-              FrontEnd/node_modules/chart.js/dist/chart.js: Missing class properties transform.
566 |     };
567 | class DatasetController {

568 |  static defaults = {};
|  ^^^^^^^^^^^^^^^^^^^^^
569 |  static datasetElementType = null;
570 |  static dataElementType = null;
571 |  constructor(chart, datasetIndex){.at transformFile.next (<anonymous>)
at run.next (<anonymous>)
at transform.next (<anonymous>)`

下面是我的代码:App.js:

import React, { Component } from 'react';
import Navbar from './components/NavBar';
import Conditions from './components/conditions';
import Graph from './components/graph';
import { Data } from './components/data';

class App extends Component {
state = {
resorts : ['Okemo', 'Snow', 'Hunter', 'Sunapee', 'Stowe'],
resort : 'Okemo'
};

render() { 
return (
<div className='main__wrap'>
<Navbar />
<div className='conditions__box'>
<h2>Current Conditions</h2>
<Conditions resort = {this.state.resort} />
</div>
<div className='graph__box'>
<h2>Conditions this year</h2>
<Graph chartData={Data}/>
</div>
</div>

);
};

}

export default App;

graph.jsx:

import React from 'react';
import { Chart as ChartJS } from "chart.js/auto"
import { Line } from 'react-chartjs-2';

function Graph(chartData) {
return <Line data={chartData} />;
}

export default Graph;

data.js:

export const Data = {
labels: [1, 2, 3, 4, 5, 6],
datasets: [
{
label: "% Lifts Open",
data: [33, 40, 80, 90, 100, 60]
//borderColor: "rgba(19, 49, 92, 1)",
//backgroundColor: "rgba(19, 49, 92,0.2)",
},
{
label: "% Trails Open",
data: [15, 30, 60, 95, 95, 45]
//borderColor: "rgba(141, 169, 196, 1)",
//backgroundColor: "rgba(141, 169, 196,0.2)",
},
{
label: "% Terrain Open",
data: [9, 23, 65, 83, 90, 34]
//borderColor: "rgba(19, 64, 116, 1)",
//backgroundColor: "rgba(19, 64, 116,0.2)",
}
]
};

谢谢你，希望这是我的一个简单的误解。

我已经尝试改变数据的形状，以及它被图形调用的方式。

Answer 1

我也有同样的问题。降级你的chart-js和react-chartjs-2版本。

我正在使用Chart Js .v3