Question

您好我有一天中每小时的数据集列表，如下所示：

{"x":"2017-10-14T00:00:00","y":95},{"x":"2017-10-14T01:00:00","y":62},...,{"x":"2017-10-14T23:00:00","y":23}

我想在x轴上以四小时的时间单位显示它们，所以设置如下：

scales: {
    xAxes: [{
        type: 'time',
        time: {
            displayFormats: {
                'hour': 'HH:mm'
            },
            unit: 'hour',
            stepSize: 4
        }
    }]
}

然而，图表js会在x轴的末尾显示最后/最大值'23：00'，这非常烦人，因为每个滴答是4小时的差异。请问如何在x轴上禁用最后/最大值？

Answer 1

您可以使用x轴'刻度的回调函数来隐藏/禁用最后一个值，如下所示：

scales: {
   xAxes: [{
      ticks: {
         callback: function(tick) {
            // if tick/value is not equals to '23:00'
            // then return the tick/value
            // else return an empty string
            return tick !== '23:00' ? tick : '';
         }
      }
   }]
}

ᴅᴇᴍᴏ⧩

log = console.log;

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['19:00', '20:00', '21:00', '22:00', '23:00'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               callback: function(tick) {
                  // if tick/value is not equals to '23:00'
                  // then return the tick/value
                  // else return an empty string
                  return tick !== '23:00' ? tick : '';
               }
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

如何禁用图表js中x轴上显示的最后/最大值？

1 个答案: