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

但是，我想要使线刻度线也仅出现在每第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>

这有可能实现吗？

推荐答案

替换您的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屋！