无法在 react-chartjs-2 中分配类型
Type can not be assigned in react-chartjs-2
我正在使用 React 和 TypeScript。
我收到类型错误。
我该如何解决?
位置是字符串类型。
http://www.chartjs.org/docs/latest/configuration/legend.html
[反应 + 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} />
);
}
}
[错误。]
属性 '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。
当我们使用 Typescript 时,我们可以使用图例及其属性和值,如下所示。
<Pie
data={data}
options={{
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2,
plugins: {
legend: {
display: true,
position:'bottom',
labels:{
padding: 40
},
},
},
}}
/>
我正在使用 React 和 TypeScript。 我收到类型错误。 我该如何解决?
位置是字符串类型。 http://www.chartjs.org/docs/latest/configuration/legend.html
[反应 + 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} />
);
}
}
[错误。] 属性 '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。
当我们使用 Typescript 时,我们可以使用图例及其属性和值,如下所示。
<Pie
data={data}
options={{
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2,
plugins: {
legend: {
display: true,
position:'bottom',
labels:{
padding: 40
},
},
},
}}
/>