類型錯誤：無法讀取未定義的屬性（讀取“toString”）（頂點圖表）

Question

我正在做一個個人項目，我正在考慮使用 apexcharts，但是開始出現圖像中顯示的錯誤，如果我在圖表組件中設置寬度和高度屬性，它就會消失，如果我把網站放在一起，它也會消失在生產中，但目前我正在研究布局的響應能力

export function Chart() {
    const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
    const options: ApexOptions = {
        chart: {
            id: "chart",
            background: "#030a4d8d",
            fontFamily: "Roboto",
            width: "auto",
            height: "auto",
            redrawOnWindowResize: true,
            selection: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            background: {
                borderRadius: 10,
            },
            style: {
                colors: ["#142085"],
            },
        },
        colors: ["#7e838c", "#474d59", "#363b47"],
        grid: {
            show: false,
        },
        legend: {
            fontFamily: "Roboto",
        },
        noData: {
            text: "Nenhum dado encontrado",
            style: {
                fontFamily: "Roboto",
            },
        },
        xaxis: {
            categories: ["Sistemas", "Comandos", "Servidores"],
            labels: {
                style: {
                    colors: "#f5f7fa",
                    fontFamily: "Roboto",
                },
            },
        },
        yaxis: {
            show: false,
        },
        series: [
            {
                data: [100, 200, 300],
            },
        ],
        tooltip: {
            enabled: false,
        },
    };

    return (
        <div className="chart-container">
            <Chart
                options={options}
                series={options.series}
                type="bar"
                width={300}
                height={150}
            />
        </div>
    );
}

我已經嘗試在 css 中定義組件的寬度並在其上設置樣式，但是組件的樣式占上風，我是框架領域的初學者，我什至看不懂英文，我只是希望這個錯誤消失了，我不必在圖表組件中定義寬度和高度屬性

Answer 1

在您的圖表組件中提供這樣的寬度。

        <Chart
            options={options}
            series={options.series}
            type="bar"
            width={"100%"}
            height={150}
        />
    

Answer 2

嘗試動態導入整個組件，而不僅僅是 apex-chart 庫。

我的意思是，go 在樹下：

Root|
    |
    |Page.js| <- use next/dynamic here to import "Component.js"
            |
            |Component.js| <- instead of use next/dynamic here.
                         |
                         |apex-chart component

Answer 3

import dynamic from 'next/dynamic';
import { Props } from 'react-apexcharts';
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false })

const state: Props = {

    series: [{
        name: "Desktops",
        data: [10, 41, 35, 51, 49, 62, 69]
    }],
    options: {
        chart: {
            height: 350,

            type: 'line',
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight'
        },

        grid: {
            row: {
                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                opacity: 0.5
            },
        },
        xaxis: {
            categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat',],
        }
    },


};
export function DashboardChartComponent() {
    return <ReactApexChart options={state.options} series={state.series} type="line" width={"100%"} height={350} />

}