javascript - 图表js响应式设计在中心对齐标签

Question

我正在使用 npm 包react-charts2在我的 react 应用程序中使用图表 js。我成功地创建了一个图表，但问题是如果我进入移动模式，我的标签不会很好地对齐。

我想在我的页面中心将标签一个在另一个上对齐。感谢您的帮助。

我使用顺风 css 而不是普通 css 的图表组件代码：

return (
    <div className="flex p-2 items-center justify-center h-80 place-items-center w-full mx-auto">
      
      {props.isLoading===true && <Loading /> } 


      {(props.covidData).length>0 
         && 
        <Line
        type = "line"
        data={{
        labels:[...props.covidData.map(arr=>{
          return arr.reduce((acc:any,itm:any,index:number)=>{
              if(index===0){
                acc.push((new Date(itm.referencedate)).toISOString().replace(/T.*/,'').split('-').reverse().join('-'));
              }
              return acc;
          },[])
        }).flat().sort((a:any,b:any)=>{
          return convertDate(a) - convertDate(b)
        })],
        datasets: [
            {
              label: 'Συνολικoί εμβολιασμοί        ',
              data: [...props.covidData.map((d:[])=>getTotalVaccinations(d)).sort((a:any,b:any)=>{
                  return a-b 
              })],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
              ],
              borderColor: [
                'rgba(255, 99, 132, 1)',
              ],
              borderWidth: 1,
              pointRadius: 0,
            },
            {
              label: 'Συνολικά εμβόλια α΄δόσης ',
               data: [...props.covidData.map((d:[])=>getTotalDose1(d)).sort((a:any,b:any)=>{
                return a-b 
                })],
              backgroundColor: '#00FF00',
              borderColor: 'green',
              borderWidth:1,
              pointRadius: 0,
            },
            {
              label: 'Συνολικά εμβόλια β΄δόσης ',
               data: [...props.covidData.map((d:[])=>getTotalDose2(d)).sort((a:any,b:any)=>{
                return a-b 
                })],
              backgroundColor: 'aqua',
              borderColor: '#1799B5',
              borderWidth:1,
              pointRadius: 0,
            },
            {
              label: 'Συνολικός αριθμός εμβολιασμένων',
               data: [...props.covidData.map((d:[])=>getPeopleInjected(d)).sort((a:any,b:any)=>{
                return a-b 
                })],
              backgroundColor: '#ff08d4',
              borderColor: 'purple',
              borderWidth:1,
              pointRadius: 0,
            },
          ],
        }}
        height={400}
        options={{
          responsive:true,
          maintainAspectRatio: false,
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
            xAxes: [{
              type: 'time',
              time: {
                displayFormats: {
                  'millisecond': 'MMM DD',
                  'second': 'MMM DD',
                  'minute': 'MMM DD',
                  'hour': 'MMM DD',
                  'day': 'MMM DD',
                  'week': 'MMM DD',
                  'month': 'MMM DD',
                  'quarter': 'MMM DD',
                  'year': 'MMM DD',
                }
              }
            }],
          },
          legend: {
            labels: {
              fontSize: 35,
            },
          },
        }}
      />
    
    }

   </div>    

  )
}

标签： javascriptcssreactjscharts