chartjsのいくつかの点を削除する方法

Question

このimageのように、2番目の最後の点を除くすべてのデータポイントを非表示/削除する必要がありますが、これを達成するための適切な解決策はありませんでした。スニペットの上

myChart.datasets[0].points[0].display = false; 
legStretchtCtx.update(); 

はChart.jsバージョン1.0用ですが、私はChart.jsバージョンを使用しています：2.7.1。私はこのスニペットを使用しているが、そのエラーを与える：

Cannot read property '0' of undefined

var legStretchtCtx = document.getElementById("leg-stretch-chart"); 
 
      // var legStretch = 
 
      var myChart = new Chart(legStretchtCtx, { 
 
       type: 'line', 
 
       data: { 
 
        labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6","Day 7"], 
 
        datasets: [{ 
 
         label: 'Leg Stretch', 
 
         data: [3, 4, 5, 4, 3, 3.5, 3.5], 
 
       \t \t \t \t backgroundColor:"#70d6db", 
 
         borderColor: ["#70d6db"], 
 
         borderWidth: 4, 
 
         pointBackgroundColor: "#fff", 
 
         pointRadius: 8, 
 
         pointHoverRadius: 8, 
 
     \t \t \t \t   pointHoverBackgroundColor: "#0ba8b0", 
 
         pointHoverBorderColor: "#26c1c9", 
 
     \t \t \t \t   pointBorderColor:"#26c1c9" 
 

 
        }] 
 
       }, 
 
       options: { 
 
        legend: { 
 
         display: false, 
 
         labels: { 
 
          display: true 
 
         } 
 
        }, 
 
     \t \t \t responsive:true, 
 
        scales: { 
 
         xAxes: [{ 
 
          gridLines: { 
 
           display: false, 
 
           drawBorder:false, 
 

 
          }, 
 
          ticks: { 
 
           display: false, 
 
           fontFamily: "Montserrat", 
 
           fontColor: "#2c405a", 
 
     \t \t \t \t \t \t fontSize: 12 
 
          } 
 
         }], 
 
         yAxes: [{ 
 
          gridLines: { 
 
           display: false, 
 
           drawBorder:false, 
 

 
          }, 
 
          ticks: { 
 
     \t \t \t \t \t \t display: false, 
 
     \t \t \t \t \t \t fontFamily: "Montserrat", 
 
           fontColor: "#2c405a", 
 
           \t fontSize: 12, 
 
     \t \t \t \t \t \t stepSize:1, 
 
           min: 0, 
 
           max: 10, 
 
     \t \t \t \t \t } 
 

 
         }] 
 
        } 
 
       } 
 
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> 
 
<div class="chart-container"> 
 
    <div class="leg-stretch-chart-inner"> 
 
    <canvas id="leg-stretch-chart" width="100%" height=""></canvas> 
 
    </div> 
 
</div>

Answer 1

まず、アレイへpointRadiusを変更します。

pointRadius: [8, 8, 8, 8, 8, 8, 8] 

次に、あなたがこの配列を書き換える必要があり各ポイント（この場合は2番目の最後のポイント）の固有の値と更新：

このフィドルで

$("#btnRemovePoints").click(function() 
{ 
    //change the radius of every point except one 
    myChart.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0]; 
    myChart.update(); 
}); 

詳細：https://jsfiddle.net/s7m1961t/

Answer 2

$(document).ready(function() { 
     //My Chart 1 
     myChart1.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0]; 
     myChart1.update(); 
     //My Chart 2 
     myChart2.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0]; 
     myChart2.update();   
    });