Chart.jsの図のx軸にn番目のティック線だけを表示する

Question

私はこの問題に対する解決策をしばらく探していましたが、削除されたドキュメントと以前のライブラリのバージョン。

私はChartJS v2のチャートをX軸に沿って四半期毎に作成しています。ラベルは4番目のラベルのみが表示されるように設定されています（1年に1つ）。結果はこれです：

しかし、私はダニラインはまた、唯一のラベルと同じポイントで4回ごとのx軸のエン​​トリに表示され、それは、そのようなことをしたいと思います。これは可能ですか？

<script> 
    var ctx = document.getElementById("myChart").getContext('2d'); 
    ctx.canvas.width = 600; 
    ctx.canvas.height = 420; 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 

      < snipped for brevity > 

     }, 
     options: { 
      tooltips: { 
       mode: 'index', 
       intersect: false 
      }, 
      scales: { 
       xAxes: [{ 
        ticks: { 
         userCallback: function(item, index) { 
          if (index%4) return ""; 
          return item; 
         }, 
         autoSkip: false 
        }, 
        display: true 
       }], 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
    }); 
    </script> 

これが可能である達成するために、次のように

私の現在のスクリプトタグはありますか？前もって感謝します。

Answer 1

次...

userCallback: function(item, index) { 
    if (!(index % 4)) return item; 
} 

であなたのダニのuserCallback機能を交換して基本的に、あなたはリターンにあなたが非表示にするラベルのための任意の空の文字列を必要としません。 を返さない場合は、何か（望ましくないラベルの場合）、（グリッドラインと同様）をそのラベルに描画しません。

ᴅᴇᴍᴏ

var ctx = document.getElementById("myChart").getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'], 
 
     datasets: [{ 
 
     label: 'Standard Rating', 
 
     data: [1, 2, 3, 4, 5, 6, 7, 8, 9], 
 
     backgroundColor: 'rgba(209, 230, 245, 0.5)', 
 
     borderColor: 'rgba(56, 163, 236, 1)', 
 
     borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     tooltips: { 
 
     mode: 'label', 
 
     intersect: false 
 
     }, 
 
     scales: { 
 
     xAxes: [{ 
 
      ticks: { 
 
       userCallback: function(item, index) { 
 
        if (!(index % 4)) return item; 
 
       }, 
 
       autoSkip: false 
 
      } 
 
     }], 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="350" height="200"></canvas>