在 Chart.js 图表的 x 轴上仅显示第 n 个刻度线 [英] Show only nth tick LINE on x-axis for Chart.js diagram

问题描述

一段时间以来，我一直在寻找解决方案，但由于大量已删除的文档和以前版本的库的老生常谈的答案，我没有更接近解决方案.

I've been searching for a solution to this for a while but am getting no nearer to a solution due to the mass of deleted documentation and hacky answers for previous versions of the library.

我正在使用 ChartJS v2 制作一个图表，其中 x 轴为季度月份名称，并且我设置了我的标签，以便仅显示每 4 个标签(即每年一个).结果是这样的:

I'm working on a chart with ChartJS v2 with quarterly-month names along the x-axis, and I've set my labels so that only every 4th label is shown (i.e. one per year). The result is this:

但是，我希望它使刻度 lines 也只出现在与标签相同的第 4 个 x 轴条目上.这可能吗?

However, I would like to have it such that the tick lines also only appear on every 4th x-axis entry at the same point as the labels. Is this possible?

我目前的脚本标签如下:

My current script tag is as follows:

<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>

这有可能实现吗?提前致谢.

Is this possible to achieve? Thanks in advance.

推荐答案

将你的tick的 userCallback 函数替换为以下...

Replace your tick­'s userCallback function with the following ...

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

基本上，您不需要为要隐藏的标签返回任何空字符串.如果你不返回任何东西(对于你不想要的标签)，它就不会绘制任何刻度(以及网格线) 为那个标签.

Basically, you don't need to return any empty string for the label that you wish to hide. If you do not return anything (for the label you don't want), it won't draw any tick (as well as gridline) for that label.

ᴅᴇᴍᴏ

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>

这篇关于在 Chart.js 图表的 x 轴上仅显示第 n 个刻度线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！