React ApexCharts 甜甜圈消失

Question

我是 React apexcharts 的新手，如果我問了一個愚蠢的問題，請原諒我。 我正在制作類型為“甜甜圈”的年齡組圖表。

我的代碼如下。 我的問題是：圓環圖不會停留在屏幕上。 當我第一次訪問該頁面時，它會顯示，但如果我刷新頁面或調整瀏覽器 (Safari/chrome..) 的大小，它就會消失。

我很感激任何建議或幫助。

import React, { useState, useEffect } from 'react'
import { Col } from 'antd'
import Chart from 'react-apexcharts'
import { endpoints, useApi } from 'src/api.context'

export const AgeDonut = () => {
  const ageGroups = ['<18', '18-25', '26-49', '50-69', '70+']
  const [ageGroupCounts, setAgeGroupCounts] = useState(ageGroups)

  const api = useApi()

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

  const fetchAgeGenderData = () => {
    const params = {
      age_groups: ageGroups,
    }

    api.get(endpoints.PATIENT_STATS, params).then(
      (response) => {
        const data = response.data
        setAgeGroupCounts(data.age_stats[1])
      },
      (error) => {}
    )
  }

  const options = {
        title: {
          text: 'Age',
            align: 'left',
        },
        labels: [...ageGroups],
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 300,
              },
              legend: {
                position: 'bottom',
              },
            },
          },
        ],
    }

  return (
    <Col>
      <Chart
        options={options}
        series={ageGroupCounts}
        type='donut'
        width='400'
      />
    </Col>
  )
}

Answer 1

你能創建一個最小的工作代碼和盒子嗎？ 也許您錯過了選項中的height ？

const options = {
  // Other options here...
  height: 400, // Set the height of the chart
};

return (
  <Col>
    <Chart
      options={options}
      series={ageGroupCounts}
      type="donut"
      width="400"
    />
  </Col>
);

或者，您也可以使用響應屬性根據容器元素的寬度設置圖表的高度。 這是一個例子：

const options = {
  // Other options here...
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 300,
          height: 200, // Set the height of the chart
        },
        legend: {
          position: 'bottom',
        },
      },
    },
  ],
};

return (
  <Col>
    <Chart
      options={options}
      series={ageGroupCounts}
      type="donut"
      width="400"
    />
  </Col>
);