reactjs - React Apexcharts fungerer ikke med Typescript
Jeg prøver å implementere et enkelt ApexChart i et React/Typescript-prosjekt, men jeg sitter fast på følgende typefeil:
No overload matches this call.
Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error.
Type '{ chart: { height: ApexOptions; type: ApexOptions; zoom: { enabled: ApexOptions; }; }; }' is not assignable to type 'ApexOptions'.
The types of 'chart.height' are incompatible between these types.
Type 'ApexOptions' is not assignable to type 'string | number | undefined'.
Type 'ApexOptions' is not assignable to type 'number'.
Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error.
Type '{ chart: { height: ApexOptions; type: ApexOptions; zoom: { enabled: ApexOptions; }; }; }' is not assignable to type 'ApexOptions'.
Jeg installerte både react-apexcharts og apexcharts, som vanlig. Her er skriptet til diagrammet mitt:
TasksChart.tsx
import ReactApexChart from 'react-apexcharts';
const TasksChart: React.FC<Props> = ({
tasks,
}) => {
const options = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
};
series = [{
name: 'All Tasks',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'My Tasks',
data: [11, 32, 45, 32, 34, 52, 41]
}]
return (
<>
<ReactApexChart options={options} series={series} type="line" height={350} />
</>
);
};
export default TasksChart;
Noen tanker om hvordan man kan fikse dette problemet? Takk!
Svar #1
installer avhengigheter med yarn eller npm
yarn add apexcharts react-apexcharts
importer dem
import ReactApexChart from "react-apexcharts";
import { ApexOptions } from "apexcharts";
definer type alternativer
const options: ApexOptions = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
};
<ReactApexChart
options={options}
series={series}
type="line"
height={350}
/>
det er det =D
