[英]React Apexcharts not working with Typescript
我正在嘗試在 React/Typescript 項目上實現一個簡單的 ApexChart,但是,我遇到了以下類型錯誤:
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'.
我像往常一樣安裝了react-apexcharts
和apexcharts
。 這是我圖表的腳本:
任務圖表.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;
關於如何解決此問題的任何想法? 謝謝!
看起來您已經將type
屬性設置為<ReactApexChart />
屬性。
嘗試從options
中的chart
中刪除type
,錯誤消失了:
const TasksChart: React.FC<Props> = ({ tasks }) => {
const options = {
chart: {
height: 350,
zoom: {
enabled: true
}
}
};
const 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
type="line"
options={options}
series={series}
height={350}
/>
);
};
使用 yarn 或 npm 安裝依賴項
yarn add apexcharts react-apexcharts
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.