我正在使用 React 和 TypeScript。 我收到类型错误。 我该如何解决?
位置是字符串类型。 http://www.chartjs.org/docs/latest/configuration/legend.html
[React + ts + react-chartjs-2]
import React from 'react';
import {Pie} from 'react-chartjs-2';
export default class Chart extends React.Component{
constructor(props) {
super(props);
this.state = { };
}
render() {
let options = {
legend: {
position:'bottom',
}
};
return (
<Pie options={options} />
);
}
}
[错误。] 属性“选项”的类型不兼容。
Type '{ legend: { position: string; }; }' is not assignable to type 'ChartOptions'.
Types of property 'legend' are incompatible.
Type '{ position: string; }' is not assignable to type 'ChartLegendOptions'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type 'PositionType'.
最佳答案
首先,您缺少必需的数据属性,即
<Pie data={data} />
然后您可以将代码更改为:
import React from 'react';
import * as ReactDOM from "react-dom"
import { Pie } from 'react-chartjs-2';
import { ChartOptions } from 'chart.js'
export default class Chart extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const data = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
};
const options: ChartOptions = {
legend: {
position: 'bottom',
}
};
return (
<Pie data={data} options={options} />
);
}
}
ReactDOM.render(<Chart />, document.getElementById("root"))
您可以看到此示例有效 here .
关于javascript - 无法在 react-chartjs-2 中分配类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52315818/