如何使用Chart.js限制X轴上的数据点数

Question

我在X轴上有20到30个数据点（点数是动态的，由数据驱动）。如何限制仅显示10个数据点，并且在水平滚动时仍可看到。我正在使用Chart.js v2.7.2和primefaces

我使用了maxTicksLimit：10但是它仍在绘制所有数据并且无法读取X轴标签。数据被塞满了

这是我的代码 如何控制X轴上的数据点以及如何使其滚动

<script>
          function drawChart() {
        
            passings = ["NEWYORK","EDISON","Phili","Baltimore","DC","Alexandria","Springfield","Palmoth","CEDAR","GREENBRIAR","Richmond","FLORCE","Rocky Mount","NORMANDY","Columbia","fayetville","Florence","Savannah","Jacksonville","St.Augustine","Pal Coast","Daytona Beach","Titusville","Melboune ","Westpalm beach","Fort Laudrale","Hollywood","Miami"]
            rain   = [50,40,60,20,10,30,20,10,30,40,50,60,70,20,10,15,40,40,20,10,20,30,40,30,20,10,15,30]      
            var ctx = document.getElementById("myChart").getContext("2d");
            var chartData = null;
            var chartOptions = null;
            chartData = {
              labels : passings,
              datasets : [ {
                fill : false,
                data : rain,
                borderColor : "red"
              }          
              ]
            }
            chartOptions = {
              responsive : true,
              maintainAspectRatio: false,
              elements: {              
                
              legend: {
                display: true,
                position :  'right',                
                
               },             
              title : {
                display : true,               
                text : 'Rain percentage along path'                
              },
              scales : {
                yAxes : [ {
                  display : true,                 
                 // padding : 25,                  
                  ticks : {
                  
                  }
                } ],
                xAxes : [ {
                   display : true,
                  //showXLables :10,                
                                
                  ticks : {
                    autoSkip : false,                    
                    maxTicksLimit :10,                   
                    maxRotation : 0,
                    minRotation : 0
                  }
                } ]
              }
            // end scales
            }
            window.myChart = new Chart(ctx, {
              type : 'line',             
              data : chartData,
              options : chartOptions
            });
          }
        </script>

.chart-container {
     width: 800px;
    height: 500px;    
    margin: 30px; 
    
 /*  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw; */
}

 <h:form id="chartForm">
      <p:scrollPanel style="width:1200px;height:500px" >
           <div class = "chart-container">     
                <canvas id="truckChart" ></canvas>
          </div>
       </p:scrollPanel>   
    </h:form>