ApexCharts Pie/donut 图表显示不正确

Question

我在 React 应用程序的 Apex 图表中遇到 Pie/donut 图表问题，

基本上我是从 google 分析中获取数据并尝试将其显示在 pie/donut 图表上，但图表不会像这样完全呈现：

相反，它看起来像这样：

如您所见，我得到的是那些小“线”而不是完整的图表，而且如果我从 api、

中得到一个值，它也能正常工作

这是组件代码：

import axios from "axios"
import { useQuery } from "react-query"
import ReactApexChart from "react-apexcharts";
import { ApexOptions } from "apexcharts";
import Spinner from "../../utils/Spinner/Spinner";
const VisitedPages = () => {
    const { data, isLoading } = useQuery("visitedPages", () => {
        return axios.post('http://localhost:8000/ga/getRealTimeReport', {
            metrics: 'rt:activeUsers',
            dimensions: 'rt:pagePath',
        })
    });
    const labels= data?.data.data.dimensions.map((e: string[]) => e[0]);
    const options = {
        labels,
        theme: {
            monochrome: {
                enabled: false
            }
        },
        responsive: [
            {
                breakpoint: 480,
                options: {
                    chart: {
                        width: "100%"
                    },
                    legend: {
                        show: false
                    }
                }
            }
        ],

    };
    const series = data?.data.data.dimensions.map((e: string[]) => e[1]);

  



    return (
        <div className="col-span-2 bg-white rounded-lg shadow-xl  flex flex-col justify-center items-center">
            {isLoading ? <Spinner /> : <><h1 className="text-3xl font-bold">Visited Pages</h1>
                <ReactApexChart type="pie" options={options} series={series} /></>}

        </div>
    )
}

export default VisitedPages

Ps：我用常量值试过了，它工作得很好我不知道问题是什么...

Answer 1

问题是 api returns 值是字符串，所以你所要做的就是将它们转换成数字

您所要做的就是更改此行：

const series = data?.data.data.dimensions.map((e: string[]) => e[1]);

进入：

const series = data?.data.data.dimensions.map((e: string[]) => +e[1]);

这很奇怪，因为其他图表可以很好地处理字符串结果

ApexCharts Pie/donut 图表显示不正确

ApexCharts Pie/donut charts are not appearing correctly

charts

google-analytics-api

reactjs

apexcharts