代码之家 › 专栏 › 技术社区 › Hiba Youssef

react谷歌图表:显示数字而非百分比

react-google-charts typescript reactjs

Hiba Youssef · 技术社区 · 3 年前

我有一个项目,它包含几个接口,在这些接口中有一个显示统计信息的接口,

我使用以下库:

react-google-charts

但问题是,这个数字以百分比的形式出现,我希望它以数字的形式出现:

这意味着我需要“3”数字出现,

该文件包含带有react谷歌图表库的分析图表,

import { Button, Card, Col, Row, Space } from 'antd';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import ReactChart from '../../common/chart';
import { typeChart } from '../../common/chart/bar-chart/data/enum';
import '../../../styles/dashboard/index.scss';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import colors from '../../../constants/colors';
import calendar1 from '../../../assets/icons/calendar1-icon.svg';
import calendar2 from '../../../assets/icons/calendar2-icon.svg';
import calendar3 from '../../../assets/icons/calendar3-icon.svg';
import thermometer from '../../../assets/icons/thermometer-icon.svg';
import waving from '../../../assets/icons/waving-hand-icon.svg';
import { useNavigate } from 'react-router';
import { FormattedMessage } from 'react-intl';
import { useQuery } from 'react-query';
import statisticCharts from '../../../api/nuclearMedicineApi/services/Statistic';
import { BsFillSquareFill } from 'react-icons/bs';
import { Chart } from "react-google-charts";
import schedule from '../../../api/nuclearMedicineApi/services/Schedule';
import { MachineCategory } from '../../../constants/enums';



interface DashboardProps { }
const Dashboard: FunctionComponent<DashboardProps> = () => {
    const auth = useContext<IAuthContext>(AuthContext);

    // **************************************************************


    const schedulePatientCount = useQuery('schedulePatientCount', () =>
        schedule.SchedulePatientCountGetAllLite({
            machineCategory: MachineCategory.Analysiss,
        }),
    ).data;

    var analysisPatientCount: any[] = [['', '']];

    const [analysisCountPatient, setAnalysisCountPatient] = useState<any[]>([['', '']])

    useEffect(() => {

        // ****** 10 ****** 
        schedulePatientCount.map((ap: any, index: any) => {
            if (ap?.count !== undefined && ap?.machine.label !== undefined) {
                if (ap?.count !== 0) {
                    let xyData: any[] = [ap?.machine?.label, ap?.count];
                    analysisPatientCount.push(xyData);
                    setAnalysisCountPatient(analysisPatientCount);
                    return analysisPatientCount;
                }
            }
        })

    }, [chartsQueryTopographyData, chartsQueryCityData, chartsQueryAgeData]);

    console.log('cfcfcf: ', analysisCountPatient);


    const options = {
        is3D: true,
    };

    // **************************************************************
    const current = new Date();
    const date = `${current.getFullYear()}/${current.getMonth() + 1
        }/${current.getDate()}`;
    const navigate = useNavigate();
    return (
        <>
            <div className='dashdoard-donutData'>
                {/* 10 charts */}
                <Row>
                    <Col className='mt-4' lg={12}>
                        <Card>
                            <Row>
                                <Col lg={19}>
                                    <h3>
                                        <FormattedMessage id='number-of-cancer-cases-by-city' />{' '}
                                    </h3>
                                </Col>
                            </Row>
                            <Row>
                                <Col lg={24}>
                                    <Chart
                                        chartType="PieChart"
                                        data={analysisCountPatient}
                                        options={options}
                                        width={"100%"}
                                        height={"400px"}
                                    />
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                </Row>
            </div>
        </>
    );
};

export default Dashboard;

1 回复 | 直到 3 年前

Saif Faidi 3 年前

您可以添加 pieSliceText: 'value' 添加到显示值而不是百分比的选项,如果要显示有值的项目 "0" 你可以设置 "sliceVisibilityThreshold" 选项,如下例所述:

import React from "react";
import { Chart } from "react-google-charts";

export const data = [
  ["Task", "Hours per Day"],
  ["Work", 11],
  ["Eat", 2],
  ["Commute", 2],
  ["Watch TV", 2],
  ["Sleep", 7],
  ["Null" , 0 ]
];

export const options = {
  title: "My Daily Activities",
  is3D: true,
  pieSliceText : 'value',
  sliceVisibilityThreshold: 0
};

export function App() {
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
    />
  );
}

结果如下: