英文:
react-google-charts: displaying number not percentage
问题
我有一个包含多个接口的项目，其中有一个用于显示统计数据的接口，
我使用以下库：
react-google-charts
但问题是数字显示为百分比，我希望它显示为数字：
这意味着我需要数字'3'显示出来，
这个文件包含了使用react-google-charts库的分析图表，
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;
英文:
I have a project that contains several interfaces, and among these interfaces there is an interface to display statistics,
And i use the following library:
react-google-charts
But the problem is that the number appears as a percentage and I want it to appear as a number:
that means i need the '3' number to appear,
this file contains analysis chart with react-google-charts library,
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
得分: 1
You can add pieSliceText: 'value' to your options to display values instead of percentages, if you want to display the items with value "0" you can set the "sliceVisibilityThreshold" option as mentioned in the following example below:
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"
/>
);
}
the result will be as the following:
英文:
You can add pieSliceText: 'value' to your options to display values instead of percentages, if you want to display the items with value "0" you can set the "sliceVisibilityThreshold" option as mentioned in the following example below:
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"}
/>
);
}
the result will be as the following:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论