我想使用react-chartjs-2创建一个线图,这是ReactJs的图表库。年龄将在X轴上,人数将在Y轴上有两种类型的人,一种是接种疫苗的人,另一种是未接种疫苗的人。任务是在一个图表中绘制两条线
1.接种疫苗的人数
1.未接种疫苗的人数
使用react-chartjs-2和chartjs生成一个ReactJs代码来生成一个线图,数据如下
已接种疫苗人数的数组['1','1','3','2','3','3','1','1','3','3','2','3','6','1']
接种疫苗的相应年龄组['13','17','18','24','25','26','27','28','29','30','31','32','33','34']
未接种疫苗的人数的数组['2','3','1','1','1','1','1','1','2']
未接种疫苗的相应年龄的数组['24','27','28','31','33','35','36','37']
const LineGraph = ({ lineData, lineData2 }) => {
// const lineChartArr= lineChart.data.data;
const lineChartAgeArrayVaccinated = lineData.map((data) => data.age);
const lineChartNumberArrayVaccinated = lineData.map(
(data) => data.number_vaccinated
);
const lineChartAgeArrayNotVaccinated = lineData2.map((data) => data.age);
const lineChartNumberArrayNotVaccinated = lineData2.map(
(data) => data.number_not_vaccinated
);
const ageArray = [];
for (let i = 0; i < 50; i++) {
ageArray.push(i);
}
return (
<>
<div>
<Line
data={{
labels: lineChartAgeArrayVaccinated,
datasets: [
{
id: 1,
label: "People Vaccinated",
data: lineChartNumberArrayVaccinated,
borderColor:'red'
},
],
}}
options={{
scales: {
x: {
title: {
display: true,
text: "Age",
},
},
y: {
title: {
display: true,
text: "Number of People",
},
},
},
}}
/>
<Line
style={{ width: "700px" }}
data={{
labels: lineChartAgeArrayNotVaccinated,
datasets: [
{
id: 2,
label: "People Not vaccinated",
data: lineChartNumberArrayNotVaccinated,
borderColor:'yellow'
},
],
}}
options={{
scales: {
x: {
title: {
display: true,
text: "Age",
},
},
y: {
title: {
display: true,
text: "Number of People",
},
},
},
}}
/>
</div>
</>
);
};
我想把这个放在同一张图表里。
1条答案
按热度按时间wyyhbhjk1#
要绘制一个线图,我们必须使用map方法到x轴上的数组,它有两个参数age和index,map方法将返回一个对象{x:age,y:[elements of y axis][index]}