javascript 在React中使用axios从API获取ApexChart数据

yyyllmsg 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(133)

使用ApexChart，我设法显示了来自本地常量的数据，但无法显示使用axios获取的数据。
我无法获取数据结果、console.log或错误

管理图表选项的文件

export const chartData = {
    height: 460,
    type: 'rangeBar',
    id: 'range-chart',
    options: {
        chart: {
    ... },
    series: []
};

显示图表的文件

const MainChart = ({ isLoading }) => {

    const [rawdata, setRawdata] = useState([]);

    useEffect(() => {
        const loadData = async () => {
            const res = await axiosConfig.get(`/<ENDPOINT>/`)
                .then(res => {
                    console.log('data load', res.data.record) //is showing nothing
                    setRawata([{
                        data: res.data.record
                    }])
                }
                )
        }
    }, [])
 return (
        <>
            {isLoading ? (
                <p>Loading...</p>
            ) : (
                <Grid container spacing={0}>
                    <Grid item xs={12} mt={5}>
                        <Chart
                        options={{
                            ...chartData.options
                          }} 
                            series={[{
                                data: rawdata
                              }]}
                             />
                    </Grid>
                </Grid>
            )}
        </>
    );

我只得到选项。我没有任何数据结果，没有控制台日志，也没有控制台错误

JavaScript

来源：https://stackoverflow.com/questions/75309446/fetch-apexchart-data-from-api-using-axios-in-react

1条答案

按热度按时间

lsmepo6l1#

我在回答我自己的问题，以免对别人有所帮助。
调查之后我解决了自己的问题。
在React ApexChart中，您可以传递一个文件中的所有值，或者从其他值中拆分选项。
在管理选项的文件中

export const chartData = {
    // height: 460,
    // type: 'rangeBar',
    // id: 'range-chart',
    options: {
        chart: {
    ... },
    series: []
};

图表组件。在这里你传递选项、序列和你在选项文件中注解的3个值。

<Chart
                            id="range-chart"
                            type="rangeBar"
                            height={460}
                            options={{
                                ...chartData.options
                            }}
                            series={
                                data
                            }
                        />

获取问题与ApexChart无关，但您可以猜到其中存在错误语法。

const [data, setData] = useState([])

    useEffect(() => {
        loadData()
    }, [])

    const loadData = async () => {
        const res = await axiosConfig.get(`<ENDPOINT>`)
        setData(res.data.record)
    }

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 在React中使用axios从API获取ApexChart数据

1条答案

相关问题

热门标签

最新问答