使用React ChartJS2的具有不同数据大小的多条线的折线图

zsohkypk  于 2023-06-22  发布在  Chart.js
关注(0)|答案(1)|浏览(181)

我想使用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>
    </>
  );
};

我想把这个放在同一张图表里。

wyyhbhjk

wyyhbhjk1#

要绘制一个线图,我们必须使用map方法到x轴上的数组,它有两个参数age和index,map方法将返回一个对象{x:age,y:[elements of y axis][index]}

const data = {
  labels: Array.from({length:100},(_,i)=>i+1),
  datasets: [
    {
      label:'Vaccinated',
      data: ['13', '17', '18', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34'].map((age,index)=>({x:parseInt(age),y:parseInt(['1', '1', '3', '2', '3', '3', '1', '1', '3', '3', '2', '3', '6', '1'][index])})),
      borderColor:'rgba(75,192,192,1)',
      backgroundColor:'rgba(75,192,0.2)',
      fill:false
    },
    {
      label:'Not Vaccinated',
      data: ['24', '27', '28', '31', '33', '35', '36', '37'].map((age,index)=>({x:parseInt(age),y:parseInt(['2', '3', '1', '1', '1', '1', '1', '2'][index])})),
      borderColor:'rgba(255,99,132,1)',
      backgroundColor:'rgba(255,99,131,0.2)',
      fill:false
    }
  ]
 }

相关问题