僅在x軸上顯示第n個tick行，用於Chart.js圖

我一直在尋找一種解決方案，但由於大量的刪除文檔和以前的hacky答案，沒有接近解決方案庫的版本。僅在x軸上顯示第n個tick行，用於Chart.js圖

我正在使用ChartJS v2和沿着x軸的季度月份名稱來工作，並且我已經設置了我的標籤，以便只顯示每個第四個標籤（即每年一個）。結果是這樣的：

不過，我想有它使得蜱線也只出現在同一點作爲標記每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>

這是可能實現？提前致謝。

來源

2017-06-05 DTR

更換你剔的userCallback功能具有以下...

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

基本上，你不需要回報爲您希望隱藏標籤的任何空字符串。如果你不返回任何東西（對於你不想要的標籤），它不會爲該標籤畫任何勾號（以及網格線）。

ᴅᴇᴍᴏ

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>

來源

2017-06-05 08:17:21

僅在x軸上顯示第n個tick行，用於Chart.js圖

回答

相關問題